1.屬性整理
1）<head>標籤中的http-equiv屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<span style="white-space:pre"> </span><head>
<span style="white-space:pre"> </span><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- 等效於 <meta charset="utf-8"> -->
<span style="white-space:pre"> </span><title>我的主頁</title>
<span style="white-space:pre"> </span><style type="text/css"></style>
<span style="white-space:pre"> </span></head>注：http-equiv 屬性爲名稱/值對提供了名稱。並指示服務器在發送實際的文檔之前先在要傳送給瀏覽器的 MIME 文檔頭部包含名稱/值對。
當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告訴瀏覽器準備接受一個 HTML 文檔。
使用帶有 http-equiv 屬性的 <meta> 標籤時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。例如，添加：
<metahttp-equiv="charset"content="iso-8859-1"> <metahttp-equiv="expires"content="31 Dec 2008">
這樣發送到瀏覽器的頭部就應該包含：
content-type: text/html charset:iso-8859-1 expires:31 Dec 2008
當然，只有瀏覽器可以接受這些附加的頭部字段，並能以適當的方式使用它們時，這些字段纔有意義。
2) 各種屬性
1.字體大小：font-size:12px
2.字體類型：font-family:"宋體"
3.取消連接的下劃線:text-decoration:none
4.不知道幹啥的：overflow:hidden
5 在某個區域使用平鋪背景圖片： background: url(../images/bg.jpg) repeat-x;
6.指定位置的邊框：border-bottom:1px solid #C4D4E1
7.取消列表中li的小圓點:list-style:none
8.將內聯元素轉換成塊狀元素:display:block
9.清楚浮動：{clear:both}{clear:top}
10.<li>水平居中:text-align:center;------<li>垂直居中:<li>中設置line-height:外框的高度
11 overflow:當某個元素中的內容超出了給定的長度和跨度，則用來決定顯示狀態。overflow:hidden,隱藏溢出。overflow:scroll,超出範圍出現滑塊
注：隱藏溢出：當我們沒有給父元素這個div設置高度的時候，子元素這個div的高度，就會撐開父元素這個div，而在另一個方面，我們要注意到的是，當我們 給父元素這個div加上一個高度值，那麼無論子元素這個div的高度是多少，父元素這個高度都是我們設定的值。而當子元素的高度超過父元素的高度的時候， 超出的部分就會被隱藏。這就是隱藏溢出的含義!
3）其他
1.使用圖片連接：也可以把圖片放到標題<h1>中來
<a href="#"><img src="images/tu03.jpg" /></a>2.<link href="style.css" type="text/css" rel="stylesheet">
3.導航欄中每個<li>中文字寬度自適應：1)取消每個<li>的跨度。2)在<li>中設置{padding:0 10px}
2.佈局
1）瀏覽器兼容
<span style="font-size:18px;">body,h1,h2,h3,dl,dt,dd,ul,li,p,img{margin:0;padding:0;list-style:none;border:0;}抓喲就是這四個屬性就OK了，是不是很簡單</span>2）佈局技巧
1.令某個DIV區域水平居中：margin:20 auto(上下20px，左右居中)
2.使用dt+dd的組合（兩行，每行一組dt,dd.dt裏放圖片，dd裏方說明）
<span> </span><dl>
<dt><a href="#"><img src="images/tu03.jpg" /></a></dt>
<dd>
<p>名稱：<a href="#">領秀新硅谷</a></p>
<p>類型：社區商業</p>
<p>售價：23000-39000元/平米</p>
<p><a href="#">詳細</a></p>
</dd>
</dl>
<dl>
<dt><a href="#"><img src="images/tu03.jpg" /></a></dt>
<dd>
<p>名稱：<a href="#">領秀新硅谷</a></p>
<p>類型：社區商業</p>
<p>售價：23000-39000元/平米</p>
<p><a href="#">詳細</a></p>
</dd>
</dl>dl{height:95px;padding:7px 0 0 6px;overflow:hidden;}
dt{width:124px;height:102px;float:left;margin-right:10px;}
dt img{border:1px solid #d8d8d8;padding:2px;}
dd{width:180px;height:102px;float:left;}
dd p{height:21px;}3.在標題裏使用span
<h2>商鋪新聞<span><a href="#">市場動態</a> | <a href="#">項目分析</a> | <a href="#">專家動態</a></span></h2>
4.【position:absolute】
意思是：他的意思是絕對定位，他默認參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、
LEFT(下面簡稱TRBL)進行定位，有以下屬性：
1)如果沒有TRBL，以父級的左上角，在沒有父級的時候，他是參照瀏覽器左上角,如果在沒有父級元素的情況下，存在文本，則以它前面的最後一個文字的右上角爲原點進行定位但是不斷開文字，覆蓋於上方。
2)如果設定TRBL，並且父級沒有設定position 屬性，那麼當前的absolute 則以瀏覽器左上角爲原始點進行定位，位置將由TRBL 決定。
3)如果設定TRBL，並且父級設定position 屬性(無論是absolute 還是relative)，則以父級的左上角爲原點進行定位，位置由TRBL 決定。即使父級有Padding 屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角爲原點進行定位，父級的padding對其根本沒有影響。
以上三點可以總結出，若想把一個定位屬性爲absolute 的元素定位於其父級元素內，只有
滿足兩個條件，
第一：設定TRBL
第二：父級設定Position 屬性
上面的這個總結非常重要，可以保證你在用absolue 佈局頁面的時候，不會錯位，並且隨
着瀏覽器的大小或者顯示器分辨率的大小，而不發生改變。
最重要的一句話：“如果用 position 來佈局頁面，父級元素的 position 屬性必須爲relative，而定位於父級內部某個位置的元素，最好用 absolute，同時設置TRBL，因爲它不受父級元素的padding 的屬性影響，當然你也可以用position，不過到時候計算的時候不要忘記padding的值。”
還有一句話：頁面佈局，浮動爲主，Position爲輔