查看效果：http://hovertree.com/texiao/css/12.htm
Demo1
Demo2
Demo3
Demo4
源代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>HTML5簡單漂亮的登錄頁面 - 何問起 </title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/css/12/loginhovertree.css">
<style>.hvtholder{width:789px;margin:5px auto;}a{color:blue}</style>
</head>
<body>
<div class="hvtholder">
<h2>登錄HoverTreeCMS管理面板</h2>
<br /><br />
<a href="http://hovertree.com/">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
<a href="http://hovertree.com/menu/css/">CSS</a>
<a href="http://hovertree.com/hvtart/bjae/dh4pqx2p.htm">原文</a>
<a href="http://hovertree.com/map/">導航</a>
<a href="http://hovertree.com/texiao/jquery/13.htm">Demo1</a>
<a href="http://hovertree.com/texiao/jquery/14.htm">Demo2</a>
<a href="http://hovertree.com/texiao/jquery/15.htm">Demo3</a>
</div>
<div class="contenthovertree">
<!-- 登錄面板 -->
<div class="panel">
<!-- 賬號和密碼組 -->
<div class="group">
<label>賬號</label>
<input placeholder="何問起提示：請輸入賬號">
</div>
<div class="group">
<label>密碼</label>
<input placeholder="何問起提示：請輸入密碼" type="password">
</div>
<!-- 登錄按鈕 -->
<div class="login">
<button>登錄</button>
</div><div class="tipshovertree">
默認賬號：hovertree
<br />默認密碼:hovertree.com
</div>
</div>
<!-- 注冊按鈕 -->
<div class="register">
<button>創建新賬號</button>
</div>
</div>
</body>
</html>
源代碼中用到：placeholder
placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，並會在字段獲得焦點或者輸入內容時消失。
注釋：placeholder 屬性適用於以下的 <input> 類型：text, search, url, telephone, email 以及 password。
placeholder 屬性是 HTML5 中的新屬性。
loginhovertree.css源代碼：
/*按照樣圖要求，添加一個淺灰色背景*/
body{
background-color: #F2F2F2;
}
/*設置內容模塊距離頂部一個有一段距離150px*/
.contenthovertree {
margin-top: 20px;
}
/*登錄和注冊按鈕的整體樣式*/
.contenthovertree button {
height: 30px;/*登錄和注冊按鈕的高度*/
color: white;/*登錄和注冊按鈕字體顏色為白色*/
font-size: 18px;/*登錄和注冊按鈕的字體大小*/
border: 0px;/*無邊框*/
padding: 0px;/*無內邊距*/
cursor: pointer;/*登錄和注冊按鈕的選擇時為手形狀*/
}
/*登錄面板*/
.contenthovertree .panel {
background-color: white;/*登錄面板背景顏色為白色*/
width: 302px;/*寬度為302px*/
text-align: center;/*子內容居中*/
margin: 0px auto;/*自身居中*/
padding-top: 20px;/*頂部的內邊距為20px*/
padding-bottom: 20px;/*底部的內邊距為20px*/
border: 1px solid #ddd;/*邊框顏色為灰色*/
border-radius: 5px;/*邊框邊角有5px的弧度*/
}
/*登錄和密碼組*/
.contenthovertree .panel .group {
text-align: left;/*子內容居中*/
width: 262px;/*寬度為262px*/
margin: 0px auto 20px;/*自身居中，並距離底部有20px的間距*/
}
.contenthovertree .panel .group label {
line-height: 30px;/*高度為30px*/
font-size: 18px;/*字體大小為18px*/
}
.contenthovertree .panel .group input {
display: block;/*設置為塊，是為了讓輸入框獨占一行*/
width: 250px;/*寬度為250px*/
height: 30px;/*高度為30px*/
border: 1px solid #ddd;/*輸入框的邊框*/
padding: 0px 0px 0px 10px;/*左邊內邊距為10px，顯得美觀*/
font-size: 16px;/*字體大小*/
}
.contenthovertree .panel .group input:focus{
border-left: 1px solid #CC865E;/*當輸入框成為焦點時，左邊框顏色編程褐色*/
}
.contenthovertree .panel .login button {
background-color: #CC865E;/*按鈕的背景顏色*/
width: 260px;/*按鈕的寬度*/
}
.contenthovertree .panel .login button:hover {
background-color: white;/*按鈕選中後背景顏色為白色*/
color: #CC865E;/*按鈕選中後字體顏色為褐色*/
border: 1px solid #CC865E;/*按鈕選中後邊框顏色為褐色*/
}
/*注冊按鈕*/
.contenthovertree .register {
text-align: center;/*子內容居中*/
margin-top: 20px;/*頂部的內邊距為20px*/
}
.contenthovertree .register button {
background-color: #466BAF;/*按鈕的背景顏色為藍色*/
width: 180px;/*按鈕的寬度*/
}
.contenthovertree .register button:hover {
background-color: white;/*按鈕選中後背景顏色為白色*/
color: #466BAF;/*按鈕選中後字體顏色為藍色*/
border: 1px solid #466BAF;/*按鈕選中後邊框顏色為藍色*/
}
.tipshovertree{text-align:left;width:260px;margin-left:20px;margin-top:10px;color:gray}