小编给大家分享一下css如何制作一个登陆表单，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联公司拥有10余年的建站服务经验，在此期间，我们发现较多的客户在挑选建站服务商前都非常的犹豫。主要问题集中：在无法预知自己的网站呈现的效果是什么样的？也无法判断选择的服务商设计出来的网页效果自己是否会满意？创新互联公司业务涵盖了互联网平台网站建设、移动平台网站制作、网络推广、按需定制设计等服务。创新互联公司网站开发公司本着不拘一格的网站视觉设计和网站开发技术相结合，为企业做网站提供成熟的网站设计方案。
HTML结构：
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如何制作一个登陆表单”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！