cssup-banner.jpg 

擁有易用的導航對於任何網站都很重要。

通過CSS,您能夠把乏味的HTML 菜單轉換為漂亮的導航欄。


導航欄= 鏈接列表

導航欄需要標準的HTML 作為基礎。

在我們的例子中,將用標準的HTML 列表來構建導航欄。

導航欄基本上是一個鏈接列表,因此使用<ul> 和<li> 元素是非常合適的:

實例

<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
	

現在,讓我們從列表中去掉圓點和外邊距:

實例

ul
{
list-style-type:none;
margin:0;
padding:0;
}
	

例子解釋:

  • list-style-type:none - 刪除圓點。導航欄不需要列表項標記。
  • 把外邊距和內邊距設置為0 可以去除瀏覽器的默認設定。

以上例子中的代碼是用在垂直、水平導航欄中的標準代碼。


垂直導航欄

如需構建垂直導航欄,我們只需要定義<a> 元素的樣式,除了上面的代碼之外:

實例

a
{
display:block;
width:60px;
}
	

例子解釋:

  • display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊(不僅僅是文本),同時也允許我們規定寬度。
  • width:60px - 塊元素默認佔用全部可用寬度。我們需要規定60 像素的寬度。

註釋:請始終規定垂直導航欄中<a>元素的寬度。如果省略寬度,IE6會產生意想不到的結果。


水平導航欄

有兩種創建水平導航欄的方法。使用行內或浮動列表項。

兩種方法都不錯,但是如果您希望鏈接擁有相同的尺寸,就必須使用浮動方法。

行內列表項

除了上面的“標準”代碼,構建水平導航欄的方法之一是將<li> 元素規定為行內元素:

實例

li
{
display:inline;
}
	

例子解釋:

display:inline; - 默認地,<li> 元素是塊元素。在這裡,我們去除了每個列表項前後的換行,以便讓它們在一行中顯示。


對列表項進行浮動

在上面的例子中,鏈接的寬度是不同的。

為了讓所有鏈接擁有相等的寬度,浮動<li> 元素並規定<a> 元素的寬度:

實例

li
{
float:left;
}
a
{
display:block;
width:60px;
}
	

例子解釋:

  • float:left - 使用float 來把塊元素滑向彼此。
  • display:block - 把鏈接顯示為塊元素可使整個鏈接區域可點擊(不僅僅是文本),同時也允許我們規定寬度。
  • width:60px - 由於塊元素默認佔用全部可用寬度,鏈接無法滑動至彼此相鄰。我們需要規定60 像素的寬度。
arrow
arrow

    設計密碼工作室 發表在 痞客邦 留言(0) 人氣()