製作簡單網站導航步驟

來源:酷知科普網 7.79K

使用Dreamweaver製作導航條會用到css樣式,現在就給大家簡單的製作一個導航條。

操作方法

(01)使用Dreamweaver新建一個html頁,並在<title></title>間新增css樣式。

(02)在<body></body>間新增一個div,class是預先寫好的top

製作簡單網站導航步驟

(03)在div中新增列表<ul><li></li></ul>,儲存預覽

製作簡單網站導航步驟 第2張
製作簡單網站導航步驟 第3張

(04)新增列表樣式top ul li{ float:left;},預覽一下。

製作簡單網站導航步驟 第4張
製作簡單網站導航步驟 第5張

(05)去掉列表前面的點,新增list-style:none;

製作簡單網站導航步驟 第6張
製作簡單網站導航步驟 第7張

(06)為導航列表新增寬度、高度、行間距、字號等。

製作簡單網站導航步驟 第8張

(07)為導航列表新增背景色邊框,並且居中顯示。

製作簡單網站導航步驟 第9張

(08)最終效果,如下圖。很簡單的製作,如果想要更精美就繼續學習css吧。

製作簡單網站導航步驟 第10張
熱門標籤