|
这篇文章主要为大家详细介绍了Div+CSS仿微信公众平台登录页面的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码，供大家参考，具体内容如下
html代码：
XML/HTML Code复制内容到剪贴板
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>微信公众平台</title>
- <link rel="stylesheet" type="text/css" href="weixin.css"/>
- </head>
- <body>
- <div id="header" class="head">
- <div class="head_box">
- <div class="inner wrp">
- <h1 class="logo">
- <a title="微信公众平台" href="javascript:void(0);">微信公众平台</a>
- </h1>
- <div class="account">
- <div class="account_meta account_faq">
- <a target="_blank" href="javascript:void(0);">在线客服</a>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div id="body">
- <div class="inner wrp">
- <div class="container_box">
- <div class="login_panel">
- <div class="login_panel_hd">
- <div class="inner">
- <dl class="system_info">
- <dt>微信公众平台接口测试账号申请</dt>
- <dd>无需公众账号、快速申请接口测试号</dd>
- <dd>直接体验和测试公众平台所以高级接口</dd>
- <dd class="icon_sandbox"></dd>
- </dl>
- </div>
- </div>
- <div class="login_panel_bd">
- <div class="wxlogin_wrp">
- <div class="wxlogin_desc">
- <h3>微信号扫一扫登录</h3>
- <p>免注册，方便快捷</p>
- </div>
- <div class="wxlogin_opr">
- <p class="btn_line">
- <a id="wx_loginBtn" class="btn btn_primary btn_wxlogin" href="javascript:void(0);">
- <img class="icon_wxlogo_inbtn" src="/images/weixin.png"></img>
- 登录
- </a>
- </p>
- <p>
- 若你已注册手机账号，请
- <a id="phone_loginBth" href="javascript:void(0);">点此登录</a>
- </p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
CSS代码：
CSS Code复制内容到剪贴板
- body{
- min-width: 1200px;
- background-color: #e7e8eb;
- font-family: "Microsoft YaHei","微软雅黑"，Helvetica,"黑体"，Arial,Tahoma;
- font-size: 14px;
- line-height: 1.6;
- margin: 0;
- }
- .head_box{
- position: relative;
- background-color: #fff;
- border-top: 4px solid #44b549;
- border-bottom: 1px solid #d9dadc;
- }
- .head_box .inner.wrp{
- width: 1200px;
- margin-left: auto;
- margin-right: auto;
- }
- .head_box .inner{
- height: 60px;
- }
- .logo{
- float: left;
- padding-top: 8px;
- font-size: 24px;
- }
- .logo a{
- display: block;
- width: 248px;
- height: 40px;
- overflow: hidden;
- text-decoration: none;
- color: #595959;
- margin-top: -15px;
- }
- .account{
- float: rightright;
- padding-top: 10px;
- }
- .account_meta{
- display: inline-block;
- vertical-align: top;
- font-size: 14px;
- }
- .account_meta a{
- text-decoration: none;
- color: #222;
- display: inline-block;
- margin-top: 18px;
- }
- #body{
- width: 1200px;
- margin-left: auto;
- margin-right: auto;
- padding: 2.5em 0 3.5em;
- }
- .container_box{
- min-height: 650px;
- overflow: hidden;
- border: 1px solid #d3d3d3;
- background-color: #fff;
- box-shadow: 0 2px 2px 0 #e3e3e3;
- border-radius: 3px;
- }
- .login_panel_hd{
- height: 140px;
- margin-bottom: 50px;
- background: transparent url(/images/weixin2.png) no-repeat 0 0;
- }
- .login_panel_hd .inner{
- padding: 24px;
- }
- .login_panel_hd .system_info{
- position: relative;
- margin-left: 120px;
- color: #fff;
-
- }
- dt{
- font-size: 22px;
- }
- dd{
- font-size: 16px;
- margin: 0px;
- }
- .login_panel_bd{
- margin: 0 50px;
- }
- .login_panel_bd .wxlogin_wrp{
- text-align: center;
- }
- .login_panel_bd .wxlogin_desc{
- margin-bottom: 20px;
- }
- .login_panel_bd .wxlogin_desc h3{
- font-weight: 400;
- font-style: normal;
- font-size: 16px;
- margin: 0;
- }
- .login_panel_bd .wxlogin_desc p{
- margin: 0px;
- }
- .login_panel_bd .wxlogin_wrp .wxlogin_opr .btn_line{
- padding-bottom: 20px;
- }
- .btn{
- min-width: 60px;
- display: inline-block;
- overflow: visible;
- padding: 0 22px;
- line-height: 30px;
- vertical-align: middle;
- text-align: center;
- font-size: 14px;
- border-width: 1px;
- border-style: solid;
- cursor: pointer;
- color: #fff;
- }
- .btn_primary{
- background-color: #44b549;
- }
- .icon_wxlogo_inbtn{
- vertical-align: middle;
- margin-right: 5px;
- border: 0;
- }
- a{
- text-decoration: none;
- color: #459ae9;
- outline: 0;
- }
总结：
css中的vertical-align:middle;表示垂直居中的意思
line-height: 30px;表示行高30px;
overflow: visible/hidden;表示溢出的部分可见/隐藏
border-radius: 3px;表示圆角边框的半角为3px。
以上就是本文的全部内容，希望对大家学习CSS样式有所帮助。 | 
发表于 2016-5-10 14:50:34
