網頁設計製作教程《三》

導航

工具/原料

photoshop

dreamweaver

步驟/方法

1

編寫一個導航的div

2

編寫導航中的`欄目，這裏用列表

3

這樣，html就編寫好了...下面我們對給html設置樣式，具體編寫位置以及全局簡介看網頁設計製作教程《一，二》

4

給導航一個寬度，並且讓導航居中顯示，並且給導航一個#ccc的背景色

5

所有的列表設置一個高度

6

導航的所有列表，在一條線上排列

7

對列表中的每一個欄目進行css樣式設定：塊狀，寬度100，高度40，行高40，左浮動，文字居中顯示，文字下劃線沒有，背景#ddd，左邊距6px，字體大小14，顏色#666

8

設置鼠標經過欄目的css樣式

9

這樣，一個導航就編寫好了

注意事項

ul li{ display:inline;}必須要，要不然 ul li a 浮動過之後不會在一條線上...