垂直選單設計
同樣的先寫html結構
在其中加入css樣式
這裡本來是設定的塊級元素li的樣式，由於塊級元素只有乙個a，就直接將a設定為塊級元素，然後對a寫滑鼠經過事件
a:hover下面是樣式，其中text-indent是內部縮排，保持了a的大小不變，只是對內部進行縮排
水平選單設計
將上面的css中li設定為左浮動(float:left)，然後要將ul的width刪除後才能看到效果，因為ul的width只有100px，而a中的width就為100px，即便是左浮動，因為佔據了父類的全部空間，因此仍然顯示的是垂直排列，浮動的原理是，將塊級元素變成行級元素，並按照浮動的方法排列，當排滿一行後，就會移到下一行中
其中將text-indent改為了text-align:center（即文字相對文字的外邊界居中）
導航條選單的製作
混合布局垂直選單水平選單伸縮選單的製作 改變高度 伸縮選單的製作 水平方向 導航條選單的製作 混合布局 任務1 完成頂部 top 底部 foot 寬度自適應 任務2 中間分為2兩欄，其中，左側 left 寬度為200px，右側 right 寬度自適應 任務3 要求右側 right 先載入，左側 le...
導航條選單製作總結
整理自慕課網 製作垂直導航條時若不想增加導航塊的長度可用text indent 20px 進行縮排 導航條選單製作總結 1 用無序列表構建選單 ul li 2 垂直選單轉變為水平選單 float left 3 在製作圓角選單時，背景貼在標籤上 雪碧圖的應用 background position 4...
基本的導航條的製作
一想到導航選單就會想到用 ul li無序列表來製作。因為他的語義非常接近條目性的內容。給導航條加上css裝飾 這裡做了乙個基本的樣式清除，並且設定初始的文字大小為14px ul list style none 是為了清除條目前的那個圓點li padding left 10px是為了讓文字向右移動10...