h5+css3 登录页

来源：互联网发布：mac系统怎么关闭程序编辑：程序博客网时间：2024/05/09 19:41
<!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;            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>
阅读全文
0 0