本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码，供大家参考，具体内容如下
html代码：
XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>微信公众平台</title> <linkrel="stylesheet"type="text/css"href="weixin.css"/> </head> <body> <divid="header"class="head"> <divclass="head_box"> <divclass="innerwrp"> <h1class="logo"> <atitle="微信公众平台"href="javascript:void(0);">微信公众平台</a> </h1> <divclass="account"> <divclass="account_metaaccount_faq"> <atarget="_blank"href="javascript:void(0);">在线客服</a> </div> </div> </div> </div> </div> <divid="body"> <divclass="innerwrp"> <divclass="container_box"> <divclass="login_panel"> <divclass="login_panel_hd"> <divclass="inner"> <dlclass="system_info"> <dt>微信公众平台接口测试账号申请</dt> <dd>无需公众账号、快速申请接口测试号</dd> <dd>直接体验和测试公众平台所以高级接口</dd> <ddclass="icon_sandbox"></dd> </dl> </div> </div> <divclass="login_panel_bd"> <divclass="wxlogin_wrp"> <divclass="wxlogin_desc"> <h3>微信号扫一扫登录</h3> <p>免注册，方便快捷</p> </div> <divclass="wxlogin_opr"> <pclass="btn_line"> <aid="wx_loginBtn"class="btnbtn_primarybtn_wxlogin"href="javascript:void(0);"> <imgclass="icon_wxlogo_inbtn"src="/images/weixin.png"></img> 登录 </a> </p> <p> 若你已注册手机账号，请 <aid="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:"MicrosoftYaHei","微软雅黑"，Helvetica,"黑体"，Arial,Tahoma; font-size:14px; line-height:1.6; margin:0; } .head_box{ position:relative; background-color:#fff; border-top:4pxsolid#44b549; border-bottom:1pxsolid#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; } .logoa{ 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_metaa{ text-decoration:none; color:#222; display:inline-block; margin-top:18px; } #body{ width:1200px; margin-left:auto; margin-right:auto; padding:2.5em03.5em; } .container_box{ min-height:650px; overflow:hidden; border:1pxsolid#d3d3d3; background-color:#fff; box-shadow:02px2px0#e3e3e3; border-radius:3px; } .login_panel_hd{ height:140px; margin-bottom:50px; background:transparenturl(/images/weixin2.png)no-repeat00; } .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:050px; } .login_panel_bd.wxlogin_wrp{ text-align:center; } .login_panel_bd.wxlogin_desc{ margin-bottom:20px; } .login_panel_bd.wxlogin_desch3{ font-weight:400; font-style:normal; font-size:16px; margin:0; } .login_panel_bd.wxlogin_descp{ margin:0px; } .login_panel_bd.wxlogin_wrp.wxlogin_opr.btn_line{ padding-bottom:20px; } .btn{ min-width:60px; display:inline-block; overflow:visible; padding:022px; 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。
以上就是本文的全部内容，希望对大家学习CSS样式有所帮助。