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

先来看看样子。

html源码：

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

 !DOCTYPE html  html lang= en  head  meta charset= UTF-8  title Login /title  link rel= stylesheet type= text/css href= Login.css /  /head  body  p id= login  h1 Login /h1  form method= post  input type= text required= required placeholder= 用户名 name= u /input  input type= password required= required placeholder= 密码 name= p /input  button >
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;  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; }
总结：
复制代码
代码如下:
 input type= text required= required **placeholder= 用户名 ** name= u /input  input type= password required= required **placeholder= 密码 ** name= p /input 
placeholder= 用户名 的作用:占位符
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐：
向HTML中插入视频并兼容所有浏览器的方法
以上就是Html制作简单而漂亮的登录页面的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。