Div+CSS仿微信公众平台登录页面

Nicole ·

更新时间:2024-11-14

· 890 次阅读

本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码，供大家参考，具体内容如下

html代码：

XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微信公众平台</title> <link rel="stylesheet" type="text/css" href="weixin.css"/> </head> <body> <div id="header" class="head"> <div class="head_box"> <div class="inner wrp"> <h1 class="logo"> <a title="微信公众平台" href="javascript:void(0);">微信公众平台</a> </h1> <div class="account"> <div class="account_meta account_faq"> <a target="_blank" href="javascript:void(0);">在线客服</a> </div> </div> </div> </div> </div> <div id="body"> <div class="inner wrp"> <div class="container_box"> <div class="login_panel"> <div class="login_panel_hd"> <div class="inner"> <dl class="system_info"> <dt>微信公众平台接口测试账号申请</dt> <dd>无需公众账号、快速申请接口测试号</dd> <dd>直接体验和测试公众平台所以高级接口</dd> <dd class="icon_sandbox"></dd> </dl> </div> </div> <div class="login_panel_bd"> <div class="wxlogin_wrp"> <div class="wxlogin_desc"> <h3>微信号扫一扫登录</h3> <p>免注册，方便快捷</p> </div> <div class="wxlogin_opr"> <p class="btn_line"> <a id="wx_loginBtn" class="btn btn_primary btn_wxlogin" href="javascript:void(0);"> <img class="icon_wxlogo_inbtn" src="/images/weixin.png"></img> 登录 </a> </p> <p> 若你已注册手机账号，请 <a id="phone_loginBth" href="javascript:void(0);">点此登录</a> </p> </div> </div> </div> </div> </div> </div> </div> </body> </html>

CSS代码：

CSS Code复制内容到剪贴板 body{ min-width: 1200px; background-color: #e7e8eb; font-family: "Microsoft YaHei","微软雅黑"，Helvetica,"黑体"，Arial,Tahoma; font-size: 14px; line-height: 1.6; margin: 0; } .head_box{ position: relative; background-color: #fff; border-top: 4px solid #44b549; border-bottom: 1px solid #d9dadc; } .head_box .inner.wrp{ width: 1200px; margin-left: auto; margin-right: auto; } .head_box .inner{ height: 60px; } .logo{ float: left; padding-top: 8px; font-size: 24px; } .logo a{ display: block; width: 248px; height: 40px; overflow: hidden; text-decoration: none; color: #595959; margin-top: -15px; } .account{ float: rightright; padding-top: 10px; } .account_meta{ display: inline-block; vertical-align: top; font-size: 14px; } .account_meta a{ text-decoration: none; color: #222; display: inline-block; margin-top: 18px; } #body{ width: 1200px; margin-left: auto; margin-right: auto; padding: 2.5em 0 3.5em; } .container_box{ min-height: 650px; overflow: hidden; border: 1px solid #d3d3d3; background-color: #fff; box-shadow: 0 2px 2px 0 #e3e3e3; border-radius: 3px; } .login_panel_hd{ height: 140px; margin-bottom: 50px; background: transparent url(/images/weixin2.png) no-repeat 0 0; } .login_panel_hd .inner{ padding: 24px; } .login_panel_hd .system_info{ position: relative; margin-left: 120px; color: #fff; } dt{ font-size: 22px; } dd{ font-size: 16px; margin: 0px; } .login_panel_bd{ margin: 0 50px; } .login_panel_bd .wxlogin_wrp{ text-align: center; } .login_panel_bd .wxlogin_desc{ margin-bottom: 20px; } .login_panel_bd .wxlogin_desc h3{ font-weight: 400; font-style: normal; font-size: 16px; margin: 0; } .login_panel_bd .wxlogin_desc p{ margin: 0px; } .login_panel_bd .wxlogin_wrp .wxlogin_opr .btn_line{ padding-bottom: 20px; } .btn{ min-width: 60px; display: inline-block; overflow: visible; padding: 0 22px; line-height: 30px; vertical-align: middle; text-align: center; font-size: 14px; border-width: 1px; border-style: solid; cursor: pointer; color: #fff; } .btn_primary{ background-color: #44b549; } .icon_wxlogo_inbtn{ vertical-align: middle; margin-right: 5px; border: 0; } a{ text-decoration: none; color: #459ae9; outline: 0; }

总结：

css中的vertical-align:middle;表示垂直居中的意思

line-height: 30px;表示行高30px;

overflow: visible/hidden;表示溢出的部分可见/隐藏

border-radius: 3px;表示圆角边框的半角为3px。

div+css 微信公众平台 CSS div

1024 个赞