长沙飞禽走兽遥控器
想自學教程的朋友,就來教程巴巴。
教程巴巴
當前位置: 主頁 > 圖文 > 網頁制作教程 >

十天學會DIV+CSS 第四天 縱向導航菜單及二級彈出菜單

發布時間:2011-03-29 21:30 點擊:
分享到:
【評論本教程】 【挑錯本教程】
------分隔線----------------------------

今天我們開始學習《十天學會web標準(div+css)》的縱向導航菜單及二級彈出菜單,包含以下內容和知識點:

  • 縱向列表
  • 標簽的默認樣式
  • css派生選擇器
  • css選擇器的分組
  • 縱向二級列表
  • 相對定位和絕對定位

一、縱向列表

縱向列表或稱為縱向導航,在網站的產品列表中應用比較廣泛,如淘寶網左側的淘寶服務,今天我們就學習一下縱向導航的制作

先新建一個頁面,然后插入一個ID為menu的div,然后在設計視圖中選中文字,點擊工具欄的ul圖標,即會自動插入ul和li,然后修改文字內容為你需要的內容。

<div id="menu">
<ul>
<li>首頁</li>
<li>網頁版式布局</li>
<li>div+css教程</li>
<li>div+css實例</li>
<li>常用代碼</li>
<li>站長雜談</li>
<li>技術文檔</li>
<li>資源下載</li>
<li>圖片素材</li>
</ul>
</div>

從預覽的效果上看,四周都有很大的空隙,而且每一行前邊還有個點,這是因為標簽的默認樣式造成的,下面我們需要創建樣式表把標簽的默認樣式給清除掉

生成的css代碼如下:

<style type="text/css">
#menu ul { list-style: none; margin: 0px; padding: 0px; }
</style>

下面我們定義一下全局的字體,字號,行距等,點擊css樣式面板上的新建按鈕,在彈出的窗口中選擇器類型選擇標簽,名稱選擇body,然后在css編輯器中設置如下圖所示屬性

body全局樣式定義后,下面我們給#menu定義一個灰色的1px邊框及寬度,然后把li定義下背景色和下邊框及內邊距等

接下來定義li的背景色為淺灰色及下邊框和內邊距

這些屬性設置完后,一個簡單的縱向列表菜單初具模型了。因為導航菜單,需要鏈接到其它頁面,下邊把這些導航加上鏈接,然后在定義a的狀態和鼠標劃過狀態。

要添加鏈接,先選擇要添加鏈接的文字,然后在屬性頁面鏈接上輸入要鏈接的頁面址,我這里輸入個#,是個虛擬鏈接,不指向任何頁面。

长沙飞禽走兽遥控器