首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1082
收藏 0 赞 0 分享

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

更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22