關於ul製作導航選單圖文實例

先上圖，最終效果：

#HTML程式碼：

 

;

• 選單


• 選單選單


• 選單


• 選單選單選單

< li>選單選單

 

CSS程式碼：

 

#qwe{
width: 200px;
font -family: "微軟雅黑";
margin: 50px;
}
#qwe ul{
list-style-type ： 沒有任何;
填滿：0;
}
#qwe ul li a{
文字裝飾：無;
顯示：區塊;
寬度：200px;
高度：25px；
左邊框：10 像素實心#333333;
右邊框：1 像素實心#666666;
下邊框：1 像素實心#555555;
左內邊距：3 像素；
邊距-底部: 1px;
}
#qwe ul li a:link,#qwe ul li a:visited{
顏色: 深紅色;
背景顏色: #999999;
}
#qwe ul li a:hover{
顏色：綠色;
背景顏色：#777777;
}
#qwe ul li a:active{
顏色：darkorange;
}

 

備註：其中包含α類別的設定