欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Div+CSS仿微信公眾平臺登錄頁面

  發(fā)布時間：2016-05-10 14:50:34   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了Div+CSS仿微信公眾平臺登錄頁面的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Div+CSS仿微信公眾平臺登錄頁面的具體代碼，供大家參考，具體內(nèi)容如下

html代碼：

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  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.                                     若你已注冊手機(jī)賬號，請     
  52.                                     <a id="phone_loginBth" href="javascript:void(0);">點(diǎn)此登錄</a>     
  53.                                 </p>     
  54.                             </div>     
  55.                         </div>     
  56.                     </div>     
  57.                 </div>     
  58.             </div>     
  59.         </div>     
  60.     </div>     
  61. </body>     
  62. </html>    

CSS代碼：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. body{     
  2.     min-width: 1200px;     
  3.     background-color: #e7e8eb;     
  4.     font-family: "Microsoft YaHei","微軟雅黑"，Helvetica,"黑體"，Arial,Tahoma;     
  5.     font-size: 14px;     
  6.     line-height: 1.6;     
  7.     margin: 0;     
  8. }       
  9. .head_box{     
  10.     position: relative;     
  11.     background-color: #fff;     
  12.     border-top: 4px solid #44b549;     
  13.     border-bottom: 1px solid #d9dadc;     
  14. }     
  15. .head_box .inner.wrp{     
  16.     width: 1200px;     
  17.     margin-left: auto;     
  18.     margin-right: auto;     
  19. }     
  20. .head_box .inner{     
  21.     height: 60px;     
  22. }     
  23. .logo{     
  24.     float: left;     
  25.     padding-top: 8px;     
  26.     font-size: 24px;     
  27. }     
  28. .logo a{     
  29.     display: block;     
  30.     width: 248px;     
  31.     height: 40px;     
  32.     overflow: hidden;     
  33.     text-decoration: none;     
  34.     color: #595959;     
  35.     margin-top: -15px;     
  36. }     
  37. .account{     
  38.     float: rightright;     
  39.     padding-top: 10px;     
  40. }     
  41. .account_meta{     
  42.     display: inline-block;     
  43.     vertical-align: top;     
  44.     font-size: 14px;     
  45. }     
  46. .account_meta a{     
  47.     text-decoration: none;     
  48.     color: #222;     
  49.     display: inline-block;     
  50.     margin-top: 18px;     
  51. }     
  52. #body{     
  53.     width: 1200px;     
  54.     margin-left: auto;     
  55.     margin-right: auto;     
  56.     padding: 2.5em 0 3.5em;     
  57. }     
  58. .container_box{     
  59.     min-height: 650px;     
  60.     overflow: hidden;     
  61.     border: 1px solid #d3d3d3;     
  62.     background-color: #fff;     
  63.     box-shadow: 0 2px 2px 0 #e3e3e3;     
  64.     border-radius: 3px;     
  65. }     
  66. .login_panel_hd{     
  67.     height: 140px;     
  68.     margin-bottom: 50px;     
  69.     background: transparent url(/images/weixin2.png) no-repeat 0 0;     
  70. }     
  71. .login_panel_hd .inner{     
  72.     padding: 24px;     
  73. }     
  74. .login_panel_hd .system_info{     
  75.     position: relative;     
  76.     margin-left: 120px;     
  77.     color: #fff;     
  78.      
  79. }     
  80. dt{     
  81.     font-size: 22px;     
  82. }     
  83. dd{     
  84.     font-size: 16px;     
  85.     margin: 0px;     
  86. }     
  87. .login_panel_bd{     
  88.     margin: 0 50px;     
  89. }     
  90. .login_panel_bd .wxlogin_wrp{     
  91.     text-align: center;     
  92. }     
  93. .login_panel_bd .wxlogin_desc{     
  94.     margin-bottom: 20px;     
  95. }     
  96. .login_panel_bd .wxlogin_desc h3{     
  97.     font-weight: 400;     
  98.     font-style: normal;     
  99.     font-size: 16px;     
  100.     margin: 0;     
  101. }     
  102. .login_panel_bd .wxlogin_desc p{     
  103.     margin: 0px;     
  104. }     
  105. .login_panel_bd .wxlogin_wrp .wxlogin_opr .btn_line{     
  106.     padding-bottom: 20px;     
  107. }     
  108. .btn{     
  109.     min-width: 60px;     
  110.     display: inline-block;     
  111.     overflow: visible;     
  112.     padding: 0 22px;     
  113.     line-height: 30px;     
  114.     vertical-align: middle;     
  115.     text-align: center;     
  116.     font-size: 14px;     
  117.     border-width: 1px;     
  118.     border-style: solid;     
  119.     cursor: pointer;     
  120.     color: #fff;     
  121. }     
  122. .btn_primary{     
  123.     background-color: #44b549;     
  124. }     
  125. .icon_wxlogo_inbtn{     
  126.     vertical-align: middle;     
  127.     margin-right: 5px;     
  128.     border: 0;     
  129. }     
  130. a{     
  131.     text-decoration: none;     
  132.     color: #459ae9;     
  133.     outline: 0;     
  134. }    

總結(jié)：

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

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

overflow: visible/hidden;表示溢出的部分可見/隱藏

border-radius: 3px;表示圓角邊框的半角為3px。

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)CSS樣式有所幫助。

相關(guān)文章

  • amazeui頁面分析之登錄頁面的示例代碼

    這篇文章主要介紹了amazeui頁面分析之登錄頁面的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-08-25

  • HTML+CSS實(shí)現(xiàn)動態(tài)背景登錄頁面

    這篇文章主要介紹了HTML+CSS實(shí)現(xiàn)動態(tài)背景登錄頁面的相關(guān)資料,需要的朋友可以參考下
    2017-06-23

  • Html制作簡單而漂亮的登錄頁面

    這篇文章主要為大家詳細(xì)介紹了Html制作簡單而漂亮的登錄頁面具體代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-10

  • Div+CSS仿支付寶登錄頁面

    這篇文章主要為大家詳細(xì)介紹了Div+CSS仿支付寶登錄頁面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-05-10

  • 如何布局登錄頁面

    混跡學(xué)習(xí)網(wǎng)N長時間了，學(xué)習(xí)網(wǎng)也陪我度過不少青澀的歲月。一直想給學(xué)習(xí)網(wǎng)奉獻(xiàn)點(diǎn)什么，但苦于忙碌奔波于塵世瑣事之中無暇抽身。今天終于驅(qū)除雜念，一心向佛，痛定思痛，分享
    2010-07-21

  • 使用css樣式設(shè)計一個簡單的html登陸界面的實(shí)現(xiàn)

    這篇文章主要介紹了使用css樣式設(shè)計一個簡單的html登陸界面的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著
    2021-03-29

最新評論