本文实例为大家分享了Div+CSS仿微信 公众平台 登录页面的具体代码，供大家参考，具体内容如下
ht ML 代码：
XM L/HTML Code 复制内容到剪贴板
<!DOCTY PE &nbs p; html > < html lang = "en" > < head > < meta charset = "UTF-8" > < t IT le > 微信 公众 平台 </ title > < link rel = "stylesheet" type = "text/css" hr ef = "w ei xin.css" /> </ head > < body > < div id = "header" class = "head" > < div class = "head_box" > < div class = "inner wrp" > < h1 class = " LOG o" > < a title = "微信公众平台" href = "javascript:void(0);" > 微信公众平台 </ a > </ h1 > < div class = "account" > < div class = "account_meta account_faq" > < a t arg et = "_blank" href = "javascript:void(0);" > 在线 客服 </ a > </ div > </ div > </ div > </ div > </ div > < div id = "body" > < div class = "inner wrp" > < div class = "cont ai ner_box" > < div class = "lo gin _panel" > < div class = "login_panel_hd" > < div class = "inner" > < dl class = " Sys tem_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_o PR " > < p class = " BT n_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-f ami ly : " ;m icrosoft YaHei" , " 微软雅黑 " ， Helvetica , "黑体" ， Arial , Tahoma ; font -s ize : 14px ; line-height : 1.6; margin : 0; } .head_box{ position : relative ; background-color : #fff ; border -t op : 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{ dis play : block ; width : 248px ; height : 40px ; overflow : hidden ; text-decoration : none ; color : #595959 ; margin-top : - 15px ; } .account{ float : right right ; padding-top : 10px ; } .account_meta{ display : inline - block ; vert ical -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。
以上就是本文的全部内容，希望对大家学习CSS样式有所帮助。
总结
以上是 为你收集整理的 Div+CSS仿微信公众平台登录页面 全部内容，希望文章能够帮你解决 Div+CSS仿微信公众平台登录页面 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Div+CSS仿微信公众平台登录页面的详细内容...