一想到導航選單就會想到用 ul li無序列表來製作。因為他的語義非常接近條目性的內容。
* //這裡做了乙個基本的樣式清除，並且設定初始的文字大小為14px;ul //list-style:none;是為了清除條目前的那個圓點li //padding-left:10px是為了讓文字向右移動10個畫素，但是li的寬度也會增加10個畫素，這裡推薦用text-indent:10px;文字縮排10個畫素a //這個是滑鼠經過的樣式垂直選單只需要將水平選單中設定為float:left就可。
li通過設定背景，改變外觀樣式，通過a:hover,可以為選單增加互動效果
先看乙個圓角背景的貼圖，的寬120px 高60px 分為上下兩個部分，上面部分為預設狀態，下面黃色部分為滑鼠經過的時候的狀態。
最終效果圖：
**如圖：
原理：並不是將原來的矩形通過**變成的圓角矩形，而是借助剛剛那個圓角，通過移動的位置，讓人們在視覺上認為，變成了圓角矩形。 還有背景寬120px，高60px，但a標籤的高度只有30px，所以預設狀態下背景只顯示了上半部分，然後通過background-position來移動背景左右不變為0，希望上移一半所以是-30px，所以hour狀態實際就變成顯示下半部分，所以就變色了~ 所以我們只看到了下面的橙色矩形。
將首頁設定為了超連結狀態
首頁 標籤設定了class=「on」，css樣式表中.on裡邊的設定就一直生效，所以移到其他標籤上首頁也不還原，想要還原要用到js
改變高度的伸縮
效果圖：這裡只需改變a:hover滑鼠經過時候的狀態即可
.on,a:hover 因為的寬度是30px 這裡設定的是當滑鼠經過的時候高度變為40px 但是如果不加 margin-top:-10px的時候增加的高度是在往下延伸，而不是向上延伸改變寬度的伸縮
導航條選單的製作
混合布局垂直選單水平選單伸縮選單的製作 改變高度 伸縮選單的製作 水平方向 導航條選單的製作 混合布局 任務1 完成頂部 top 底部 foot 寬度自適應 任務2 中間分為2兩欄，其中，左側 left 寬度為200px，右側 right 寬度自適應 任務3 要求右側 right 先載入，左側 le...
導航條選單的製作（一）
垂直選單設計 同樣的先寫html結構 在其中加入css樣式 這裡本來是設定的塊級元素li的樣式，由於塊級元素只有乙個a，就直接將a設定為塊級元素，然後對a寫滑鼠經過事件 a hover當滑鼠經過的時候，a的背景顏色變為red，文字顏色變為白色 下面是樣式，其中text indent是內部縮排，保持了...
導航條選單製作總結
整理自慕課網 製作垂直導航條時若不想增加導航塊的長度可用text indent 20px 進行縮排 導航條選單製作總結 1 用無序列表構建選單 ul li 2 垂直選單轉變為水平選單 float left 3 在製作圓角選單時，背景貼在標籤上 雪碧圖的應用 background position 4...