设为首页 - 加入收藏 - 网站地图 SecYe安全 Www.SecYe.Com - 国内网络信息安全IT技术门户网
当前位置:首页 > 网页设计 > 网页设计理论 > 正文

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

时间:2016-05-20 11:22 来源:未知 作者:SecYe安全 阅读:

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

html代码:

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>     
  2. <html lang="en">     
  3. <head>     
  4.     <meta charset="UTF-8">     
  5.     <title>微信公众平台</title>     
  6.     <link rel="stylesheet" type="text/css" href="weixin.css"/>     
  7. </head>     
  8. <body>     
  9.     <div id="header" class="head">     
  10.         <div class="head_box">     
  11.             <div class="inner wrp">     
  12.                 <h1 class="logo">     
  13.                     <a title="微信公众平台" href="javascript:void(0);">微信公众平台</a>     
  14.                 </h1>     
  15.                 <div class="account">     
  16.                     <div class="account_meta account_faq">     
  17.                         <a target="_blank" href="javascript:void(0);">在线客服</a>     
  18.                     </div>     
  19.                 </div>     
  20.             </div>     
  21.         </div>     
  22.     </div>     
  23.     <div id="body">     
  24.         <div class="inner wrp">     
  25.             <div class="container_box">     
  26.                 <div class="login_panel">     
  27.                     <div class="login_panel_hd">     
  28.                         <div class="inner">     
  29.                             <dl class="system_info">     
  30.                                 <dt>微信公众平台接口测试账号申请</dt>     
  31.                                 <dd>无需公众账号、快速申请接口测试号</dd>     
  32.                                 <dd>直接体验和测试公众平台所以高级接口</dd>     
  33.                                 <dd class="icon_sandbox"></dd>     
  34.                             </dl>     
  35.                         </div>     
  36.                     </div>     
  37.                     <div class="login_panel_bd">     
  38.                         <div class="wxlogin_wrp">     
  39.                             <div class="wxlogin_desc">     
  40.                                 <h3>微信号扫一扫登录</h3>     
  41.                                 <p>免注册,方便快捷</p>     
  42.                             </div>     
  43.                             <div class="wxlogin_opr">     
  44.                                 <p class="btn_line">     
  45.                                     <a id="wx_loginBtn" class="btn btn_primary btn_wxlogin" href="javascript:void(0);">     
  46.                                         <img class="icon_wxlogo_inbtn" src="/images/weixin.png"></img>     
  47.                                         登录     
  48.                                     </a>     
  49.                                 </p>     
  50.                                 <p>     
  51.                                     若你已注册手机账号,请     
  52.                                     <a id="phone_loginBth" href="javascript:void(0);">点此登录</a>     
  53.                                 </p>     
  54.                             </div>     
  55.                         </div>     
  56.                     </div>     
  57.                 </div>     
  58.             </div>     
  59.         </div>     
  60.     </div>     
  61. </body>     
  62. </html>    

CSS代码:

CSS Code复制内容到剪贴板

  1. body{     
  2.     min-width1200px;     
  3.     background-color#e7e8eb;     
  4.     font-family"Microsoft YaHei","微软雅黑"Helvetica,"黑体"Arial,Tahoma;     
  5.     font-size14px;     
  6.     line-height: 1.6;     
  7.     margin: 0;     
  8. }       
  9. .head_box{     
  10.     positionrelative;     
  11.     background-color#fff;     
  12.     border-top4px solid #44b549;     
  13.     border-bottom1px solid #d9dadc;     
  14. }     
  15. .head_box .inner.wrp{     
  16.     width1200px;     
  17.     margin-leftauto;     
  18.     margin-rightauto;     
  19. }     
  20. .head_box .inner{     
  21.     height60px;     
  22. }     
  23. .logo{     
  24.     floatleft;     
  25.     padding-top8px;     
  26.     font-size24px;     
  27. }     
  28. .logo a{     
  29.     displayblock;     
  30.     width248px;     
  31.     height40px;     
  32.     overflowhidden;     
  33.     text-decorationnone;     
  34.     color#595959;     
  35.     margin-top: -15px;     
  36. }     
  37. .account{     
  38.     floatrightright;     
  39.     padding-top10px;     
  40. }     
  41. .account_meta{     
  42.     displayinline-block;     
  43.     vertical-aligntop;     
  44.     font-size14px;     
  45. }     
  46. .account_meta a{     
  47.     text-decorationnone;     
  48.     color#222;     
  49.     displayinline-block;     
  50.     margin-top18px;     
  51. }     
  52. #body{     
  53.     width1200px;     
  54.     margin-leftauto;     
  55.     margin-rightauto;     
  56.     padding: 2.5em 0 3.5em;     
  57. }     
  58. .container_box{     
  59.     min-height650px;     
  60.     overflowhidden;     
  61.     border1px solid #d3d3d3;     
  62.     background-color#fff;     
  63.     box-shadow: 0 2px 2px 0 #e3e3e3;     
  64.     border-radius: 3px;     
  65. }     
  66. .login_panel_hd{     
  67.     height140px;     
  68.     margin-bottom50px;     
  69.     backgroundtransparent url(/images/weixin2.png) no-repeat 0 0;     
  70. }     
  71. .login_panel_hd .inner{     
  72.     padding24px;     
  73. }     
  74. .login_panel_hd .system_info{     
  75.     positionrelative;     
  76.     margin-left120px;     
  77.     color#fff;     
  78.      
  79. }     
  80. dt{     
  81.     font-size22px;     
  82. }     
  83. dd{     
  84.     font-size16px;     
  85.     margin0px;     
  86. }     
  87. .login_panel_bd{     
  88.     margin: 0 50px;     
  89. }     
  90. .login_panel_bd .wxlogin_wrp{     
  91.     text-aligncenter;     
  92. }     
  93. .login_panel_bd .wxlogin_desc{     
  94.     margin-bottom20px;     
  95. }     
  96. .login_panel_bd .wxlogin_desc h3{     
  97.     font-weight: 400;     
  98.     font-stylenormal;     
  99.     font-size16px;     
  100.     margin: 0;     
  101. }     
  102. .login_panel_bd .wxlogin_desc p{     
  103.     margin0px;     
  104. }     
  105. .login_panel_bd .wxlogin_wrp .wxlogin_opr .btn_line{     
  106.     padding-bottom20px;     
  107. }     
  108. .btn{     
  109.     min-width60px;     
  110.     displayinline-block;     
  111.     overflowvisible;     
  112.     padding: 0 22px;     
  113.     line-height30px;     
  114.     vertical-alignmiddle;     
  115.     text-aligncenter;     
  116.     font-size14px;     
  117.     border-width1px;     
  118.     border-stylesolid;     
  119.     cursorpointer;     
  120.     color#fff;     
  121. }     
  122. .btn_primary{     
  123.     background-color#44b549;     
  124. }     
  125. .icon_wxlogo_inbtn{     
  126.     vertical-alignmiddle;     
  127.     margin-right5px;     
  128.     border: 0;     
  129. }     
  130. a{     
  131.     text-decorationnone;     
  132.     color#459ae9;     
  133.     outline: 0;     
  134. }    

总结:

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

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

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

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

以上就是本文的全部内容,希望对大家学习CSS样式有所帮助。

本文来源:SecYe安全网[http://www.secye.com] (责任编辑:SecYe安全)

点击复制链接 与好友分享!

顶一下
(0)
0%
踩一下
(0)
0%
推荐内容