您的位置 首页 css教程

如何使用css布局一个登陆表单

本篇文章给大家带来的内容是关于如何使用css布局一个登陆表单,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信截图_20181124152506.png

css布局制作一个登陆表单

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

HTML 结构:

<div class="box"><form action="#" method="get"><ul><li><label for="username">Email:</label><input type="text" id="username"  class="username" placeholder="john.smith@strategysoft.com"/></li><li><label for="password">Password:</label><input type="password" id="password" class="password" placeholder="******"/></li></ul><a href="javascript:;" class="button"/><i class="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: none 0;}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: 50px auto;}.box li{list-style-type: none;margin-bottom: 10px;border-radius: 5px;overflow: hidden;position: relative;height: 42px;}.box li input{box-shadow:inset 0 0 5px rgba(0,0,0,.5),-1px 1px 0 rgba(255,255,255,.05);border:0 none;padding:8px 5px 5px;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;}.box li:first-child:after,.box li:last-child:after{position: absolute;width: 50px;height: 50px;content: "";border-radius: 25px;z-index: 2;right: -23px;box-shadow: 0 0 8px rgba(0,0,0,.5);}::-webkit-input-placeholder {color:#fff;font-weight: bold;}.box li:first-child:after{top: 15px;}.box li:last-child:after{bottom:15px;}.box label{width: 70px;display: inline-block;text-align: right;}.box span{display: block;color: #6296b4;padding-left: 75px;}.button{position: absolute;top: 24px;right: -30px;width: 44px;height: 44px;border-radius: 22px;border:1px solid #00a1d2;background: -webkit-linear-gradient(top,#029ecd,#0d7796);color: #fff;text-shadow:1px 1px 0 #666;box-shadow:0 0 0 5px #2c2c2c;z-index: 3;text-align: center;line-height: 46px;-webkit-transition: all 0.28s ease-in;-moz--transition: all 0.28s ease-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中文网。

以上就是如何使用css布局一个登陆表单的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:如何使用css布局一个登陆表单

文章地址:https://www.pyhw.net/40299_%e5%a6%82%e4%bd%95%e4%bd%bf%e7%94%a8css%e5%b8%83%e5%b1%80%e4%b8%80%e4%b8%aa%e7%99%bb%e9%99%86%e8%a1%a8%e5%8d%95.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图