網站開發_從基礎做起2

標籤：高度自適應   http   color   使用   os   io   問題   cti   

 一超連結的四種樣式

假定一個超連結  <a href = www.561.cn>這是一個超連結</a>

a:link {color: #FF0000} /* 未訪問的連結 */ a:visited {color: #00FF00} /* 已訪問的連結 */ a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */ a:active {color: #0000FF} /* 選定的連結 */

以上分別定義了超連結未訪問時的連結樣式，已訪問的連結樣式，滑鼠移上時連結樣式和選定的連結樣式。之所以稱之為偽類，也就是說它不是一個真實的類，正常的類是以點開始，後邊跟一個名稱，而它是以a開始後邊跟個冒號，再跟個狀態限定字元。

二、將連結轉換為區塊層級元素

連結在預設狀態下是內嵌元素，轉換為區塊層級元素後可以獲得更大的點擊地區，可以設定寬度和高度，將連結轉換為塊狀，只需增加一個display:block的css屬性即可。

a { display: block; height: 30px; width: 100px; line-height: 30px; text-align: center; background: #CCC; } a:hover { color: #FFF; text-decoration: none; background: #333; }

三、用css製作按鈕

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(/upload/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; } a:hover { background: url(/upload/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

四、首字下沉

p { width: 400px; line-height: 1.5; font-size: 14px; } p:first-letter { font-family: "microsoft yahei"; font-size: 40px; float: left; padding-right: 10px; line-height: 1; }

五、橫向圖文列表四、 浮動後父容器高度自適應

　　當一個容器內元素都浮動後，它將高度將不會隨著內部元素高度的增加而增加，所以造成內容元素的顯示超出了容器。

要解決這個問題，需要使用以下樣式

overflow:auto; zoom:1;