1. 基本列表樣式
基本列表樣式如下：
一般為了新增定製的列表符號，可以使用list-style-image屬性。但是，這種方法對符號影象的位置的控制能力不強
而更常用的方法是關閉列表符號，並將定製的影象作為背景載入列表元素上，然後可以使用背景影象的定位屬性精確的控制定製符號的對準方式
一般ie和opera使用左空白邊控制列表的縮排，而safari和firefox選擇使用左填充
因此，首先要將列表的margin和padding設定為0，從而去掉這個縮排
要去掉預設的符號，只需將列表樣式型別設定為none：
ul我們希望在每個連線之間建立分割線，將乙個分隔線影象作為背景影象應用於每個錨鏈結的左邊
ul li a
ul .first a{
background:none;
最後，翻轉狀態僅僅是改變鏈結的顏色
ul a:hover{
color:#333;
5. 滑動門標籤頁式導航
有時候導航條中文字需要擴充套件，這樣文字長短不一，這就需要導航條也需要擴充套件，滑動門很適合這種應用
建立簡單的html結構：
將margin和padding設定為0，去掉列表符號，並設定導航條的寬度，標籤頁式導航條也向左浮動以便包含內部的浮動元素
ul{margin:0;
padding:0;
list-style:none;
width:720px;
float:left;
列表元素向左浮動，從而讓它水平顯示而不是垂直顯示，但這次，將組成標籤頁的兩個影象中比較大的影象作為背景影象應用於列表項，由於這個影象形成標籤頁的右邊緣，所以將它定位到右邊：
ul li{
float:left;
background:url(images/tab_right.gif) no-repeat top right;
錨顯示為塊級元素以使整個區域可單擊，每個標籤頁的寬度由內容的寬度來決定，設定行高來控制高度
為了完成效果，將標籤頁的左邊影象作為背景影象應用於錨並且對準左邊，當標籤頁改變尺寸時，這個影象總是左對準的，該在大圖的上面，蓋住左邊的硬邊緣
li a{
dispaly:block;
padding:0 2em;
line-height:2.5em;
background:url(images/tab-left.gif) no-repeat top left;
text-decoration:none;
color:#fff;
float:left;
ul a:hover{
color:#333;
效果圖如圖：
背景圖左的不太好（非專業）
CSS學習 CSS 列表樣式（ul）
css列表屬性作用如下 設定不同的列表項標記為有序列表 設定不同的列表項標記為無序列表 設定列表項標記為影象 在html中，有兩種型別的列表 無序列表 列表項標記用特殊圖形 如小黑點 小方框等 有序列表 列表項的標記有數字或字母 使用css，可以列出進一步的樣式，並可用影象作列表項標記。list s...
CSS樣式學習筆記？
如何利用css做到 混排？把文字當作處理，當作文書處理 為了保證不佔一行 或乙個div 需要用float left這個樣式，寫海報 首字母下沉 效果需要用到這個樣式 利用標籤做導航標籤？設定list style type none float left 可以不需要標籤，如果有則也需要將list st...
angular學習筆記 九 css類和樣式3
再來看乙個選擇li列表的例子 點選li中的任意項,被點選的li高亮顯示 doctype html html head title 6.3css類和樣式 title meta charset utf 8 script src angular.js script script src script.js...