首页前端开发HTMLDiv+CSS仿微信公众平台登录页面

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

时间2024-01-23 23:41:42发布访客分类HTML浏览583
导读：收集整理的这篇文章主要介绍了Div+CSS仿微信公众平台登录页面，觉得挺不错的，现在分享给大家，也给大家做个参考。 本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码，供大家参考，具体内容如下htML代码：XML/...
收集整理的这篇文章主要介绍了Div+CSS仿微信公众平台登录页面，觉得挺不错的，现在分享给大家，也给大家做个参考。

本文实例为大家分享了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-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样式有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

CSS微信

若转载请注明出处： Div+CSS仿微信公众平台登录页面
本文地址： https://pptw.com/jishu/584771.html
如何用CSS让文字居于div的底部 关于学习DIV CSS的一些精妙问答

游客 回复需填写必要信息
↑