1.滑鼠樣式

商品位於影象上滑鼠的十字變換cursor:move，輪播圖中滑鼠位於小圓點時 變換為小手cursor:hand,

文字樣式 cursor:text

2.輪廓線

強調錶單輸入文字，點選邊框，顯示邊框顏色。若點選時不想顯示邊框顏色，設定 outline:none;

3.文字域

在一些留言中會遇到textarea,防止文字域拖拉放大影響其他元素，設定 resize:none;

4.垂直對齊vertical-align

只針對行內元素和行內塊元素，特別是文字和表單。

常常用來設定影象 的屬性， 解決影象與文字的排列。vertical-align ：baseline(預設與文字基線對齊)，top(文字頂端對齊)

middle（文字中線對齊），bottom（文字底端對齊）。

效果為：左側為影象，右側文字基線（頂端、中線、底端對齊）

和基線對齊，會有一點小錯誤，影象等表單行內塊元素 會與父盒子產生一定間隙（即使沒有文字），

解決方案：

4.1

image{

vertical-align:top ;

border 0;     /*影象去邊框；*/

}

4.2

img{

display:block;

}(缺陷：可能會影響其他元素)

5.多餘文書處理（如新聞li標題）

預設情況，當文字超過父盒子大小，自動換行到下一行顯示。

若想讓其在一行顯示，設定 white-space:nowrap;

若想讓其隱藏，設定 overflow:hidden;

若想讓多餘文字... 顯示，設定3屬性，缺一不可。

white-space: nowrap;overflow:hidden; text-overflow:ellipsis;

注意：瀏覽器會與預設的樣式，可能會影響小點的顯示。因此，要先清除格式。

*{

padding:0;

margin:0;

}

li {

list-style:none;

}

6.精靈圖定位出網頁所有背景影象。

利用background-position. 其屬性與父盒子左上角的位置為起點，向右為x軸正方向，向下為y軸正方向。給父盒子所需圖片寬高，移動精靈圖，得到當前背景影象。

7.滑動門,製造圓角效果。

在網頁中，樣式隨著內容變化而變化。注意，樣式不能設定寬度。給定指定的高度。eg:在a 標籤中巢狀span, 背景影象與a 標籤左對齊，與span 標籤右對齊。當滑鼠懸浮在網頁上，有凹陷效果，則是通過更改背景影象為同大小淺色系，達到視覺上的凹陷。

8、display,visibility,overflow 屬性設定的差別。

display:none (表示不顯示元素，並不佔用位置，其後元素會“頂”上來)。

visibility:visible(元素可見)， hidden（元素不可見），佔有位置。

overflow：visible（內容超出盒子大小範圍，可見） hidden(超出隱藏) scroll(不管內容有沒有超出) auto（xuy）