css如何制作一个登陆表单

小编给大家分享一下CSS如何制作一个登陆表单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

　　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,&hellip;）；

　　}

　　.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如何制作一个登陆表单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网JavaScript频道！