css布局制作一个登陆表单

 

　　这个案例主要制作的是一个登录表单，在这个案例中使用了box-shadow、gradient,transform和transition等属性，其中最难的地方是输入框被咬的那部分，原本使用纯CSS3的渐变配合多背景制作，但受限于阴影，最终改变使用base的64位图像处理。详细的参考代码吧：

 

　　HTML结构：

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　

 

　　<divclass="box">

 

　　<formaction="#"method="get">

 

　　<ul>

 

　　<li>

 

　　<labelfor="username">Email:</label><inputtype="text"id="username"class="username"placeholder="john.smith@strategysoft.com"/>

 

　　</li>

 

　　<li>

 

　　<labelfor="password">Password:</label><inputtype="password"id="password"class="password"placeholder="******"/>

 

　　</li>

 

　　</ul>

 

　　<ahref="javascript:;"class="button"/><iclass="icon-arrow-right"></i></a>

 

　　</form>

 

　　</div>

 

　　CSS代码：

 

　　body,ul{

 

　　margin:0;

 

　　padding:0

 

　　}

 

　　a{

 

　　color:rgb（1,124,185）；

 

　　text-decoration:none;

 

　　}

 

　　input:focus{

 

　　outline:none0;

 

　　}

 

　　body{

 

　　color:#b5b5b5;

 

　　font:14px'Arial';

 

　　}

 

　　body,

 

　　li:first-child:after,

 

　　li:last-child:after{

 

　　background-image:url（data:image/png;base64,…）；/**/

 

　　}

 

　　.box{

 

　　position:relative;

 

　　width:384px;

 

　　height:140px;

 

　　margin:50pxauto;

 

　　}

 

　　.boxli{

 

　　list-style-type:none;

 

　　margin-bottom:10px;

 

　　border-radius:5px;

 

　　overflow:hidden;

 

　　position:relative;

 

　　height:42px;

 

　　}

 

　　.boxliinput{

 

　　box-shadow:inset005pxrgba（0,0,0,.5），-1px1px0rgba（255,255,255,.05）；

 

　　border:0none;

 

　　padding:8px5px5px;

 

　　border-radius:5px;

 

　　width:300px;

 

　　height:28px;

 

　　-webkit-box-sizing:content-box;

 

　　-moz-box-sizing:content-box;

 

　　-o-box-sizing:content-box;

 

　　-ms-box-sizing:content-box;

 

　　box-sizing:content-box;

 

　　background:rgba（0,0,0,.1）；

 

　　color:#fff;

 

　　}

 

　　.boxli:first-child:after,

 

　　.boxli:last-child:after{

 

　　position:absolute;

 

　　width:50px;

 

　　height:50px;

 

　　content:"";

 

　　border-radius:25px;

 

　　z-index:2;

 

　　right:-23px;

 

　　box-shadow:008pxrgba（0,0,0,.5）；

 

　　}

 

　　::-webkit-input-placeholder{

 

　　color:#fff;

 

　　font-weight:bold;

 

　　}

 

　　.boxli:first-child:after{

 

　　top:15px;

 

　　}

 

　　.boxli:last-child:after{

 

　　bottom:15px;

 

　　}

 

　　.boxlabel{

 

　　width:70px;

 

　　display:inline-block;

 

　　text-align:right;

 

　　}

 

　　.boxspan{

 

　　display:block;

 

　　color:#6296b4;

 

　　padding-left:75px;

 

　　}

 

　　.button{

 

　　position:absolute;

 

　　top:24px;

 

　　right:-30px;

 

　　width:44px;

 

　　height:44px;

 

　　border-radius:22px;

 

　　border:1pxsolid#00a1d2;

 

　　background:-webkit-linear-gradient（top,#029ecd,#0d7796）；

 

　　color:#fff;

 

　　text-shadow:1px1px0#666;

 

　　box-shadow:0005px#2c2c2c;

 

　　z-index:3;

 

　　text-align:center;

 

　　line-height:46px;

 

　　-webkit-transition:all0.28sease-in;

 

　　-moz--transition:all0.28sease-in;

 

　　}

 

　　.button:hover{

 

　　-webkit-transform:rotate（90deg）；

 

　　}

 

　　@font-face{

 

　　font-family:'FontAwesome';

 

　　src:url（'font/fontawesome-webfont.eot'）；

 

　　src:url（'font/fontawesome-webfont.eot?#iefix'）format（'embedded-opentype'），

 

　　url（'font/fontawesome-webfont.woff'）format（'woff'），

 

　　url（'font/fontawesome-webfont.ttf'）format（'truetype'），

 

　　url（'font/fontawesome-webfont.svg#FontAwesome'）format（'svg'）；

 

　　font-weight:normal;

 

　　font-style:normal;

 

　　}

 

　　.icon-arrow-right:before{

 

　　font-family:FontAwesome;

 

　　font-weight:normal;

 

　　font-size:26px;

 

　　font-style:normal;

 

　　display:inline-block;

 

　　text-decoration:inherit;

 

　　content:"\f061";

 

　　}

 

　　以上就是对如何使用css布局一个登陆表单的全部介绍，如果您想了解更多有关CSS教程，请关注PHP中文网。




本文转载自中文网