垂直水平導航選單的製作

2021-07-11 14:46:59 字數 613 閱讀 5702

1.先製作乙個垂直的選單：

設定一下css樣式，包括：去掉列表前面的小圓點（list-style）; a標籤的下劃線（text-decoration）; li的高度寬度背景顏色; 還有文字的縮排（text-indent，不改變整個li的寬度）。

但是，為了加互動效果，比如hover,應該將這些樣式設定在最內層的標籤a標籤，否則a標籤設定hover後，li標籤的樣式還在，會影響互動效果。而為了給a標籤設定li的這樣樣式，需要先將a標籤設定為塊元素：display:block。然後把li的樣式全部拷貝到a中，再設定乙個hover的樣式：

滑鼠覆蓋上面的時候就會有hover的效果，背景顏色改變：

2.水平導航選單需要給li設定乙個float向左的屬性即可：

其中的首頁中間的空格用。

垂直選單的製作

1.用ul無序列列表構建選單 2.清除預設樣式清除ul的樣式 ul，能去掉前面的預設小圓點去掉a標籤的下劃線 a 在導航欄中經常用 height 30px line height 30px 可使文字垂直居中。3.如果用為文字前面增加畫素，最好用縮排的方式來實現文字縮排,用text indent...

CSS 導航選單的製作

在製作過程中，出現了一些小問題，因為，我沒有設定列的div的高度，所以它會跟著ul的大小變化，導致背景色會變化，而且我不能設定ul的外邊距，也會導致背景色有變化，所以我設定了ul的內填充，我想這是因為div的內容填充的問題。最後我給ul設定內填充padding解決這個問題。也許還有剛更好的解決，還請...

導航選單欄製作

做法一效果圖導航選單.html charset gb2312 導航選單title rel stylesheet href style.css type text css head id daohang id d1 href 首頁a div id d2 關於醫學院div id d3 就業指導中心d...