html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 登录 </title>
- <style type="text/CSS">
- /* CSS Document */
- body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,table,td,img,div,dl,dt,dd,input{margin:0;padding:0; box-sizing: border-box}
- body{font-size:12px;}
- img{border:none;}
- li{list-style:none;}
- input,select,textarea{outline:none;}
- textarea{resize:none;}
- a{text-decoration:none;}
- /* 清浮动 */
- .clearfix:after{content:"";display:block;clear:both;}
- .clearfix{zoom:1;}
- /* 取消 a 标签点击后的虚线框 */
- a {outline: none;}
- a:active {star:expression(this.onFocus=this.blur());}
- input[type="text"]{
- outline: none;
- }
- .pr{
- position: relative;
- }
- /* 页面样式 */
- header{
- width: 100%;
- }
- .headerCon{
- width: 1200px;
- height: 70px;
- line-height: 70px;
- margin: 10px auto;
- }
- .headerCon .logo{
- display: block;
- width: 240px;
- height: 64px;
- background:url("image/logo.png") left center no-repeat;
- float: left;
- }
- .headerCon span{
- margin-left: 20px;
- font-size: 24px;
- }
- section{
- width: 100%;
- height: 600px;
- background: #0169C6;
- }
- section .mainCon{
- width: 1200px;
- height: 100%;
- margin: 0 auto;
- position: relative;
- background: #0169C6;
- }
- section .mainLeft{
- float: left;
- width: 840px;
- height: 100%;
- background: url("image/loginbg.png") left center/100% no-repeat;
- background-origin: content-box;
- }
- section .mainRight{
- float:right ;
- width: 360px;
- height: 400px;
- background: #FFFFFF;
- position: absolute;
- top: 50%;
- right: 0;
- margin-top: -200px;
- padding: 30px 0 0 40px;
- }
- section .mainRight h4{
- width: 280px;
- font-size: 20px;
- text-align: center;
- }
- section .mainRight ul li{
- margin: 5px 0;
- }
- section .mainRight ul li .liLabel{
- width: 100%;
- display: block;
- height: 40px;
- line-height: 40px;
- }
- section .mainRight input[type="text"],section .mainRight input[type="button"]{
- width: 280px;
- height: 40px;
- line-height: 40px;
- }
- section .mainRight input[type="text"]{
- color: #979797;
- text-indent: 12px;
- }
- section .mainRight input[type="button"]{
- margin-top: 10px;
- cursor: pointer;
- }
- section .mainRight ul li .codeText{
- width: 120px!important;
- }
- section .mainRight ul li .codeImage{
- width: 92px;
- height:38px;
- position: absolute;
- left:140px;
- top:40px;
- cursor: pointer;
- background-size: 100%;
- }
- footer{
- width: 100%;
- text-align: center;
- }
- footer .footerCon{
- width: 1200px;
- height: 36px;
- margin: 0 auto;
- line-height: 36px;
- }
- </style>
- </head>
- <body>
- <header>
- <div class="headerCon">
- <a href="#" title="logo" class="logo"></a>
- <span > 欢迎登录 </span>
- </div>
- </header>
- <section>
- <div class="mainCon clearfix">
- <div class="mainLeft"></div>
- <div class="mainRight">
- <h4>xxx 系统登录 </h4>
- <form>
- <ul class="clearfix">
- <li>
- <label class="liLabel"> 用户名:</label>
- <input type="text" name="firstname" placeholder="请输入用户名">
- </li>
- <li>
- <label class="liLabel"> 密码:</label>
- <input type="text" name="firstname" placeholder="请输入密码">
- </li>
- <li class="pr">
- <label class="liLabel"> 验证码:</label>
- <input class="codeText" type="text" name="firstname" placeholder="请输入验证码">
- <div><img src="image/code.png" class="codeImage"> </div>
- </li>
- <li>
- <input type="button" value="登录">
- </li>
- </ul>
- </form>
- </div>
- </div>
- </section>
- <footer>
- <p class="footerCon">footerConfooterConfooterConfooterCon</p>
- </footer>
- </body>
- </html>
来源: http://www.qdfuns.com/article/45167/fc1fea47341ccae7d6b44d2a1d13729b.html