大家都在搜：
开源软件
技术教程
源码分享
网站模版
当前位置： 首页>技术教程>网页制作>CSS>正文

CSS技术如何达到微信公众登录页面水平

来源：爱站网时间：2021-12-21编辑：网友分享
本篇文章带大家走进关于CSS技术如何实现微信公众登录页面水平，这个过程所存在的代码操作都至关重要，具有一定的参考价值。感兴趣的小伙伴就随爱站技术频道小编来了解清楚。

html代码：

XML/HTML Code复制内容到剪贴板
  1. nbsp;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。

以上就是本文的全部内容了，爱站技术频道小编希望能帮助到大家。对Div+CSS仿微信公众平台登录页面还有什么不懂得的，欢迎随时来咨询小编。

上一篇：CSS3 渐变（Gradients）之CSS3 径向渐变的相关资讯

下一篇：该如何使用:before和:after

您可能感兴趣的文章

相关阅读

查看更多 >

热门软件源码

最新软件源码下载

©2009-2024Aizhan.COM粤ICP备2022129511号

公司简介|联系方法|招聘信息|广告服务|友情链接|帮助中心|意见反馈