網(wǎng)頁設計制作教程《三》

網(wǎng)頁設計制作教程《三》

導航

工具/原料

photoshop

dreamweaver

步驟/方法

1

編寫一個導航的div

2

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

3

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

4

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

5

所有的列表設置一個高度

6

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

7

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

8

設置鼠標經(jīng)過欄目的css樣式

9

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

注意事項

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

【網(wǎng)頁設計制作教程《三》】相關文章：

網(wǎng)頁制作教學設計02-25

制作網(wǎng)頁教學設計04-20

網(wǎng)頁設計與制作報告01-04

網(wǎng)頁設計與制作心得12-12

網(wǎng)頁制作教學設計07-28

網(wǎng)頁設計制作實習報告04-05

【熱門】網(wǎng)頁設計與制作心得01-15

網(wǎng)頁設計與制作心得【薦】01-15

【推薦】網(wǎng)頁設計與制作心得12-31

【熱】網(wǎng)頁設計與制作心得01-15