欢迎来到模板无忧!织梦模板,dede模板下载,织梦cms模板,免费网站模板下载站

模板无忧

怎么用css布局一个登陆表单

企业模板

  css布局制作一个登陆表单

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

  HTML结构:

  

  

  

  

  

  

  

  

  <pclass="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>

  </p>

  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布局一个登陆表单

本文转载自中文网


希望以上内容可以解决您的问题!
如有其他问题欢迎大家一起交流学习!
作者:酱油妹 来源:www.109f.cn 关注: 时间:2022-05-10 22:00
版权声明:凡注明来源为http://www.nsxcb.cn的均为本站原创,转载请注明来源。
本文网址:http://www.nsxcb.cn/CSS/CSS3/20220510/14149.html
凡本站提供教程均已验证教程的准确性。
相关教程
在线客服

织梦模板 整站模板 新手教程 使用技巧