Html制作简单而漂亮的登录页面

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

先来看看样子。


Html制作简单而漂亮的登录页面

html源码:

XML/HTML Code复制内容到剪贴板

  
  
  
 

Login

       

css代码:

CSS Code复制内容到剪贴板

html{    width: 100%;    height: 100%;    overflow: hidden;    font-style: sans-serif;   }   body{    width: 100%;    height: 100%;    font-family: 'Open Sans',sans-serif;    margin: 0;    background-color: #4A374A;   }   #login{    position: absolute;    top: 50%;    left:50%;    margin: -150px 0 0 -150px;    width: 300px;    height: 300px;   }   #login h1{    color: #fff;    text-shadow:0 0 10px;    letter-spacing: 1px;    text-align: center;   }   h1{    font-size: 2em;    margin: 0.67em 0;   }   input{    width: 278px;    height: 18px;    margin-bottom: 10px;    outline: none;    padding: 10px;    font-size: 13px;    color: #fff;    text-shadow:1px 1px 1px;    border-top: 1px solid #312E3D;    border-left: 1px solid #312E3D;    border-right: 1px solid #312E3D;    border-bottom: 1px solid #56536A;    border-radius: 4px;    background-color: #2D2D3F;   }   .but{    width: 300px;    min-height: 20px;    display: block;    background-color: #4a77d4;    border: 1px solid #3762bc;    color: #fff;    padding: 9px 14px;    font-size: 15px;    line-height: normal;    border-radius: 5px;    margin: 0;   }

总结:

代码如下:

placeholder=”用户名”的作用:占位符


Html制作简单而漂亮的登录页面

以上就是本文的全部内容,希望对大家的学习有所帮助。

原创文章,作者:江山画,如若转载,请注明出处:http://wpbbw.com/4188.html

发表评论

登录后才能评论