CSS+DIV模仿小米登录页面

body { width :99%; height:100%; background :#F2F2F2; font :12px araiar,微软雅黑; } div { display: block; } .top { padding :0px; padding-top: 25px; margin :0px; height: 75px; background: #ECECEC; border-bottom: 1px solid #D9D9D9; } .top .logo { padding-bottom: 0px; margin: 0px auto; padding-left: 30px; width: 900px; padding-right: 30px; padding-top: 0px; } img { border: 0px; } .main { background :url(../images/welcome.jpg) 0 80px no-repeat; height:600px; width:900px; margin:0 auto ; padding :0 30px; } .clearfix:after { display :block ; height :0px; visibility :hidden ; clear :both ; overflow :hidden ; content :" " } .main_form { width :377px; float :right ; margin-top :95px; background :white url(../images/s_bg.jpg) left top repeat-x; } .main_form_login { padding: 0 0 22px 50px; border: 1px solid gainsboro; border-bottom: 1px dashed #D5D5D5; } h4 { font :normal 22px "微软雅黑"; color :#FF7E00; height :52px; padding-top :50px; margin :0px; } .login_text { position: relative; margin-bottom: 14px; } .user { display: inline-block; height: 20px; padding: 8px; font-size: 14px; border: 1px solid #E3E3E3; border-top: 1px solid #CCC; width: 252px; background: white url(../images/s_bgs.png) 0 -118px repeat-x; } .code { margin:0px 0px 20px 0; padding-top :8px; color :#666; font-size :14px; } .sub_btnLogin { float :left ; margin :0 auto ; width :130px; border :1px solid #DD621F; height:40px; cursor :pointer ; background :url(../images/s_bgs.png) 0 0 repeat-x; } .sub_btnLogin .login_sure { width:130px; height :40px; color :white; font:700 16px/40px 微软雅黑; border :0 none; padding :0px; background-color :transparent; cursor :pointer ; display :block ; } a:hover { outline :0 none; } .btnLogin a { float: left; text-decoration :none; margin: 10px 0 0 20px; font-size: 14px; color :#333; display: inline-block; line-height: 1.5; } .main_form_Regis { padding: 30px 50px 10px 50px; border: 1px solid gainsboro; border-bottom: none; border-top: none; } .main_form_Regis .regis { height:30px; padding-top :12px; display :inline-block; border :1px solid #DADADA; font-size :14px; cursor :pointer ; width :273px; text-align :center ; color:#DD621F; font-weight :bold ; background :url(../images/s_bgs.png) 0 -40px repeat-x; } .all { color :#999; line-height :1.1; text-align:center ; font-size :12px; height :46px; background :url(../images/bom_corner.png) left bottom no-repeat; } .footer { text-align :center ; margin-top :95px; width:900px; margin :0 auto ; padding :0 30px; } .links { display :inline-block ; list-style :none; margin :0px; padding :0px; } .links li { border-right :1px solid #F60; float :left ; display :list-item ; } .footer a { color:#F60; outline :none; padding:0 10px; text-decoration :none; } .links li.copyright { border-right :none; }