html登陆页面如何做,通过html和css页面布局来做一个登陆页面，实例？

效果如图：

代码如下：

用户登录

*{margin: 0;

padding: 0;

}/*去掉页面样式，通用选择器*/

body{color:white}/*标签选择器*/

.context{background: #50A3A2;

position: absolute;

left: 0;

top:50%;

width: 100%;

height: 400px;

margin-top: -200px;

overflow: hidden;/*隐藏滚动条*/

}/*定位浏览器边距位置 左 上 */

.container{/*类选择器*/

max-width: 600px;

height: 400px;/*左右*/

padding: 80px 0;/*上下*/

text-align: center;

margin: 0 auto;/*居中显示*/

}

.container h1{/*派生*/

font-size: 40px;

font-weight: 300;}

form{padding: 20px 0;}

form input{border: 1px solid #FFF;

width: 220px;

padding: 10px 15px;

display: block;

margin: 0 auto 10px auto;

border-radius: 30px;/*圆角*/

font-size: 18px;

font-weight: 300;

text-align: center;

}

form button{

background: white;

border: 0;

padding: 10px 15px;

color: green;

border-radius: 8px;

width: 250px;

font-size: 16px;

}

form button:hover{

background:#CCC; /*鼠标移动上去按钮颜色变灰色*/

}

Welcome

登  陆