网站前端技术干货之Html5+CSS3实现用户登陆界面
本篇信息文章千锋重庆的老师主要跟大家分享三个方面：一个是html5的模版结构，一个是CSS3样式，一个是网站页面居中的主题定位。
1.html5中的属性（placeholder）实现文本信息框的提示信息，required属性配置设置文本信息框信息是必填的。
2. CSS3的属性线性渐变（linear-gradient）实现网站页面（body）区域的背景色。
3.通过绝对主题定位（position:absolute）和CSS3中的变形(transform)实现div的网站页面居中主题定位。
case案例的结果效果如下：
网页页面login.html的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title标题></title标题>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
</head>
<body>
<div>
<h1>后台管理登陆</h1>
<div>
<form>
<p>
<input type="text" placeholder="请输入登录帐号" required="required"/>
</p>
<p>
<input type="password" placeholder="请输入登录密码" required="required"/>
</p>
<p>
<button type="submit">登陆</button>
</p>
</form>
</div>
</div>
</body>
</html>
外部样式文件page.css的代码如下：
说明：在外部样式（page.css）中，类（.login1）控制的div主题定位如果还不太理解的话，请参看下面的图示。
这样，就完成了操作。
转载自：网站前端技术干货之Html5+CSS3实现用户登陆界面
