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,…）；
}
.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';
class="lazy" data-src:url（'font/fontawesome-webfont.eot'）；
class="lazy" data-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如何制作一个登陆表单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
