开心学习
当前位置：Web前端 > > 正文

css代码大全登录界面（Div+CSS仿微信公众平台登录页面）

时间：2021-11-05 14:24:53类别：Web前端

css代码大全登录界面

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

本文实例为大家分享了li+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.     <li id="header" class="head">     
    10.         <li class="head_box">     
    11.             <li class="inner wrp">     
    12.                 <h1 class="logo">     
    13.                     <a title="微信公众平台" href="javascript:void(0);">微信公众平台</a>     
    14.                 </h1>     
    15.                 <li class="account">     
    16.                     <li class="account_meta account_faq">     
    17.                         <a target="_blank" href="javascript:void(0);">在线客服</a>     
    18.                     </li>     
    19.                 </li>     
    20.             </li>     
    21.         </li>     
    22.     </li>     
    23.     <li id="body">     
    24.         <li class="inner wrp">     
    25.             <li class="container_box">     
    26.                 <li class="login_panel">     
    27.                     <li class="login_panel_hd">     
    28.                         <li 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.                         </li>     
    36.                     </li>     
    37.                     <li class="login_panel_bd">     
    38.                         <li class="wxlogin_wrp">     
    39.                             <li class="wxlogin_desc">     
    40.                                 <h3>微信号扫一扫登录</h3>     
    41.                                 <p>免注册，方便快捷</p>     
    42.                             </li>     
    43.                             <li 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.                             </li>     
    55.                         </li>     
    56.                     </li>     
    57.                 </li>     
    58.             </li>     
    59.         </li>     
    60.     </li>     
    61. </body>     
    62. </html>    

    • CSS代码：

  • CSS Code复制内容到剪贴板
    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. }    

    • 总结：

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

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

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

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

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

    标签：
    微信 登录页面 DIV css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习