这篇文章主要为大家详细介绍了Div+CSS仿微信公众平台登录页面的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Div+CSS仿微信公众平台登录页面的具体代码,供大家参考,具体内容如下

html代码:

 
    
           
      
    
            
    
           微信公众平台  
    
             
      
      
    
             
    
              
    
               
    
               
               
                微信公众平台  
                 
                  
                  
                   在线客服 
                  
                 
                
               
              
             
            
           
          
         
微信公众平台接口测试账号申请
无需公众账号、快速申请接口测试号
直接体验和测试公众平台所以高级接口

微信号扫一扫登录

免注册,方便快捷

登录

若你已注册手机账号,请 点此登录

CSS代码:

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样式有所帮助。

最新资讯
微软Windows7的终结也标志着PC时代的终结

微软Windows7的终结也

英国ZDNet主编Steve Lange认为Windows 7的终结也标志
从今天开始微软将停止支持Windows 7系统

从今天开始微软将停止

根据Net Applications去年12月的数据,32.74%的笔记本和
聚美优品拟再私有化 陈欧为共享充电宝铺路?

聚美优品拟再私有化

1月12日,化妆品特卖电商聚美优品发布公告,称公司董事会
实探废弃共享汽车“停车场”:风口过后路在何方?

实探废弃共享汽车“停

从浙江嘉兴市中心向西约20公里路程后就能抵达万民村。
历经低潮 半导体的好消息从韩国传来了

历经低潮 半导体的好

经过长达一年的低潮后,韩国半导体出口终现增长,1月前十
直面特斯拉:中国车企如何 “借势而上”?

直面特斯拉:中国车企如

特斯拉来了,而且“来得太快,就像龙卷风”。一场只有10辆
最新文章
针对class、id所做的CSS HACK

针对class、id所做的C

这是一篇关于CSS HACK的文章,这篇文章中提到的CSS HACK
WEB标准教程:P标签的应用

WEB标准教程:P标签的

从今天开始,我将全面的共享出我所能理解的所有WEB标准
Web前端开发的Firefox插件

Web前端开发的Firefox

一、Web DeveloperWeb Developer 可说是网页设计师最
详解CSS粘性定位 sticky

详解CSS粘性定位 stic

这篇文章主要介绍了CSS粘性定位 sticky 的相关知识,本
详解css透明度之rgba和opacity的区别及兼容

详解css透明度之rgba

对于设置透明度,我们有两个可以选的css3属性:rgba 和 op
轻松搞懂CSS浮动与清除浮动图文详解

轻松搞懂CSS浮动与清

本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮

联系我们 | 网站地图 | 最近更新 | Tags标签云

©CopyRight 2006-2016 Lovean.Com Inc All Rights Reserved.