描述：剛開始寫的時候，想着就是將這個框架分爲三部分，整體一個，上面橫欄一個，下面正方形一個，正方形內含有兩個文本框，一個複選框，一個提交按鈕。
剛開始我設置了整體框的大小以及上面橫欄的大小，以設置不同class樣式的形式寫出來的效果是隻有橫欄的效果，後來將main_box裏的整體框架的高度去掉加在了login_box裏，將login_box的高30加在了login_box h3裏，這樣整體的框架出來了，橫欄框架也出來了。我發現想要出橫欄效果只需在整體框內加上一個內聯框，將它的padding的左右屬性距離設爲0px，將內聯框的框架搭在整體框內就OK。（注：font-family字體，border框的基本設置（邊線粗細，邊線的樣式，邊線的顏色），border-radius弧度）。
在處理用戶名和密碼框時，我遇到了怎樣設置內邊距，display的用法及如何設置內聯框的屬性等問題。
將form-all-box設置這兩種框的基本屬性（後面的登錄按鈕也可以通用）也就是內邊距和顏色。將form-box設置更細節的東西，感覺和Java裏類和方法的性質差不多，相同的部分用一個class。
（<div>是一個塊級元素，換行是 <div> 固有的唯一格式表現。不必爲每一個 <div> 都加上類或 id，常常只用其中一種。）
（class與id的區別：class 用於元素組（類似的元素，或者可以理解爲某一類元素），而 id 用於標識單獨的唯一的元素。）
（<span>塊級元素，組合文檔中行內元素，方便通過設置改變其樣式）
（placeholder：佔位符）
屬性規定可描述輸入字段預期值的簡短的提示信息（比如：一個樣本值或者預期格式的短描述）。
該提示會在用戶輸入值之前顯示在輸入字段中。
注意：placeholder 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password。）
（a href="###"：點擊頁面不跳轉。）
（<a>標籤：定義超鏈接，用於從一張頁面鏈接到另一張頁面。）
<a> 標籤的 href 屬性用於指定超鏈接目標的URL。
href 屬性的值可以是任何有效文檔的相對或絕對URL，包括片段標識符和 JavaScript 代碼段。如果用戶選擇了 <a> 標籤中的內容，那麼瀏覽器會嘗試檢索並顯示 href 屬性指定的 URL 所表示的文檔，或者執行 JavaScript 表達式、方法和函數的列表。
）
（在所有瀏覽器中，鏈接默認的外觀是：
- 未被訪問的鏈接帶有下劃線而且是藍色的
- 已被訪問的鏈接帶有下劃線而且是紫色的
- 活動鏈接帶有下劃線而且是紅色的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁面</title>
<style>
.main_box{width: 400px;margin: 0px auto;padding: 110px 0 60px 0 ;}
.login_box{height: 370px;font-family: normal;border: 1px solid gray;border-radius: 4px;}
.login_box h3{height: 30px;font-size: 14px;padding: 4px 30px;border-bottom: 1px solid gray; }
.login_box h3 span{font-weight: bold;float: left;}
.ml{float: left;}
.mr{float: right;}
.form_all_box{padding: 0 30px;color: gray;}
.form_box{display: inline-block; height: 40px;width: 338px; color: gray; border: 1px solid gray;margin-top: 35px; padding:0; text-indent: 10px; line-height: 40px;border-radius: 4px;}
.select_btn{font-family: normal;font-size: 14px;padding: 4px 30px;}
.form_all_box button{padding: 0 30px;border: 1px solid #1f95e2;}
.btn_box{display: inline-block; height: 40px;width: 338px; margin-top: 15px; padding:0; text-indent: 10px; line-height: 40px;border-radius: 4px;width: 100%; font-size: 16px; letter-spacing: 4px;font-color: white;background-color: blue;color: #fff;background-color: #1f95e2;}
</style>
</head>
<body>
<div class="main_box">
<div class="login_box">
<h3><span>用戶登錄</span><a href="www.baidu.com" class="mr">立即註冊</a></h3>
<div class="form_all_box">
<input type="text" class="form_box" name="uers" placeholder="用戶名/郵箱">
</div>
<div class="form_all_box">
<input type="text" class="form_box" name="password" placeholder="密碼">
</div>
<div class="select_btn">
<h4 class="ml">
<input type="checkbox" name="select" value="下次自動登錄"><span>下次自動登錄</span>
</h4>
<h4 class="mr">
<span class="forget_pw">忘記密碼？<a href="javascript:">找回</a></span>
</h4>
</div>
<div class="form_all_box ">
<button type="submit" class="btn_box">登錄</button>
</div>
</div>
</body>
</html>
剛剛瞭解到一般的頁面應該是將HTML和CSS樣式分開寫，HTML創建框架，CSS實現具體內容顯示。