用ul、li標籤建立css橫向導航選單-css教學-PHP中文網

首頁

web前端

css教學

用ul、li標籤建立css橫向導航選單

高洛峰

Nov 24, 2016 am 11:45 AM

css

　創建CSS樣式文字導航條的最簡單解決方法也許就是把所有的連結都放在一行文字裡，這種方法看起來很合理也很直觀。但問題在於把所有的連結都放在一行文字裡就很難控制連結之間以及前後的空白。所以，為了避免所有的連結都擠在一起，你最後通常都必須插入一些東西或非換行的空白字元作為分隔，讓這些文字分開離開來，不至於混在一起。

　　現在我們正常的做法是應用ul、li標籤把連結當作無序列表（unordered list）來識別。再套用CSS樣式控制，並以我們預想的形式在容器中顯示出來。對導航條使用無序列表似乎是不符合直觀感受的，因為我們習慣於把無序列表作為一個豎著推起來的列表項目，每個前面都放著一個列表預設標記。這似乎不符合導航條水平方向的習慣。但作為獨立列表項目集合的列表邏輯結構能夠適用於導航條裡的連結；而CSS的規則讓你能夠強制取代列表項目缺省的表現形式，以消除它們並安排列表項在容器內按水平方向排列，而不是從上而下的規則。現在讓我們來看看實例，根據無序列表建立CSS樣式和XHTML標籤的橫向導航選單。

CSS程式碼

 <div id="nav">   
  <ul>   
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>   
</div>

我們再看看關於這段CSS程式碼：

CSS程式碼

#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    whitewhite-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}

我們來看看上面的程式碼的完整頁面中的完整頁面中1可以看到效果：

XML/HTML程式碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>www.52css.com</title>  
<style type="text/css">  
<!--    
#nav {   
    height: 30px;   
    width: 100%;   
    background-color: #c00;   
}   
#nav ul {   
    margin: 0 0 0 30px;   
    padding: 0px;   
    font-size: 12px;   
    color: #FFF;   
    line-height: 30px;   
    white-space: nowrap;   
}   
#nav li {   
    list-style-type: none;   
    display: inline;   
}   
#nav li a {   
    text-decoration: none;   
    font-family: Arial, Helvetica, sans-serif;   
    padding: 7px 10px;   
    color: #FFF;   
}   
#nav li a:hover {   
    color: #ff0;   
    background-color: #f00;   
}   
-->  
</style>  
</head>  
<body>  
<div id="nav">  
  <ul>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">CSS教程</a></li>  
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">   </ul>  
</div>  
</body>  
</html>

　　下面我們來解析上面的程式碼：

　　xhtml程式碼首先定義了一個容器div id="nav"。這個容器用來放置這個無序列表橫向導航選單的內容，但也有人認為這個容器是多餘的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的網站是可擴展的，我們要為將來的擴展留有足夠的餘地，如果我們的導航樣式設計的更加複雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們寫程式的習慣。

　　#nav定義了視窗的寬高及背景顏色。 #nav ul包含有margin和padding聲明，字體及顏色聲明。 line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的連結文字垂直居中就可能受到影響。 white-space: nowrap;或許大家並不能理解有什麼作用，它定義了強制在同一行內顯示所有文本，直到文本結束或遭遇br物件。

　　#nav li中的list-style-type: none;移除了清單項目所使用的預設標記。使其更像是純文本，而沒有列表標記。 display: inline;聲明則能夠讓清單項目在頁面上從左向右浮動，而不會讓每個項目顯示在單獨的行里而從上至下的排列。這兩項聲明是我們實現無序列表橫向導航選單的關鍵。
　　#nav li a和#nav li a:hover定義了連結的樣式。其中的內容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來控制連結文字之間的空白間隔的，你可以試著改變數值試試看。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

CSS旋轉木馬內的捲軸驅動動畫May 16, 2025 am 09:50 AM

嘿，不是與滾動區域一起使用的相當新的CSS功能嗎？哦，是的，那是捲軸驅動的動畫。是否應該在滾動瀏覽CSS旋轉木馬中的項目時觸發動畫嗎？

CSS包含：為您的項目選擇正確的方法May 16, 2025 am 12:02 AM

ThebestmethodforincludingCSSdependsonprojectsizeandcomplexity:1)Forlargerprojects,useexternalCSSforbettermaintainabilityandperformance.2)Forsmallerprojects,internalCSSissuitabletoavoidextraHTTPrequests.Alwaysconsidermaintainabilityandperformancewhenc

這不應該發生：對不可能進行故障排除May 15, 2025 am 10:32 AM

解決這些不可能的問題之一，這是您從未想過的其他問題的問題。

@KeyFrames vs CSS過渡：有什麼區別？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用頁面CMS進行靜態站點內容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的內容管理系統選項可用，而我進行了幾個測試，但實際上沒有一個是一個，y＆＃039;知道嗎？怪異的定價模型，艱難的自定義，有些甚至最終成為整個＆

鏈接HTML中CSS文件的最終指南May 13, 2025 am 12:02 AM

鏈接CSS文件到HTML可以通過在HTML的部分使用元素實現。 1)使用標籤鏈接本地CSS文件。 2)多個CSS文件可通過添加多個標籤實現。 3)外部CSS文件使用絕對URL鏈接，如。 4)確保正確使用文件路徑和CSS文件加載順序，優化性能可使用CSS預處理器合併文件。

CSS Flexbox與網格：全面評論May 12, 2025 am 12:01 AM

選擇Flexbox還是Grid取決於佈局需求：1)Flexbox適用於一維佈局，如導航欄；2)Grid適合二維佈局，如雜誌式佈局。兩者在項目中可結合使用，提升佈局效果。

如何包括CSS文件：方法和最佳實踐May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用標籤在HTML的部分引入外部CSS文件。 1.使用標籤引入外部CSS文件，如。 2.對於小型調整，可以使用內聯CSS，但應謹慎使用。 3.大型項目可使用CSS預處理器如Sass或Less，通過@import導入其他CSS文件。 4.為了性能，應合併CSS文件並使用CDN，同時使用工具如CSSNano進行壓縮。

See all articles