1.html5中的属性（placeholder）实现文本框的提示信息，required属性设置文本框信息是必填的。

2. CSS3的属性线性渐变（linear-gradient）实现页面（body）区域的背景色。

3.通过绝对定位（position:absolute）和CSS3中的变形(transform)实现div的页面居中定位。

html5css3实现超酷登录窗口网站前端技巧干货之Html5CSS3实现用户上岸界面 JavaScript

案例的效果如下：

网页login.html的代码如下：

<!DOCTYPE html&gt;

<html>

<head>

<meta charset=\"大众UTF-8\"大众>

<title></title>

<link rel=\"大众stylesheet\"大众 type=\"大众text/css\"大众 href=\"大众css/page.css\"大众/>

</head>

<body>

<div class=\"大众login1\"大众>

<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定位如果还不太理解的话，请参看下面的图示。

至此，案例制作完成。