CSS網頁版面入門教學10：帶有目前標識的標籤式橫向導航_基礎教學課程
目前識別指使用者點選該頻道或欄目，該欄目的標籤呈現與其他標籤不同的顏色用以提示使用者所處的位置。
這種設計是網站設計中相當簡單且是相當經典的一種增進網站可用性的方式。網站讓使用者使用時是應該考慮到使用者瀏覽的思考過程，糟糕的網頁設計只顧及頁面本身而不去考慮使用者感受，優秀的設計應當是以使用者為中心出發的，這樣一種簡單的當前頻道的標識往往是許多設計師所忽略的內容，用戶需要知道自已的位置，以及知道自已還能去哪裡，透過對當前位置的標識，有助於讓用戶認清自己在網站中的方位，並引導用戶訪問其它頻道。
從上一篇的程式碼繼續寫，為了讓某一個頻道成為一個目前所屬的頻道，這個頻道必須有一個和其它頻道不一樣的背景顏色或文字，但目前我們是針對所有的a標籤統一設定的背景，因此首要任務是設計一個例外情況，即當前頻道，這樣一個特殊的頻道，我們對html中的標籤做一些修改：
<ul id="nav"> <li id="current"><a href="/index.asp">主页</a></li> <li><a href="/sort/list_4.html">div+css教程</a></li> <li><a href="/sort/list_5.html">常用代码</a></li> <li><a href="/sort/list_6.html">水晶图标</a></li> <li><a href="/sort/list_7.html">幻灯图片</a></li> <li><a href="/sort/list_10.html">软件下载</a></li> <li><a href="/css2/">css2.0实用手册</a></li> </ul>
我們在第一個a標籤中加入了一個新的id，名為current，繼續看css部分的編寫，先為current這個id做個顏色設計：
#nav li a#current { background-color:#2788da; color:#fff;}預覽效果，首頁的背景色已經變成藍色了
<style>
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center;
background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
<ul id="nav">
<li>主页</li>
<li>div+css教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>css2.0实用手册</li>
</ul>繼續來完善我們的導航，頁選單下方加一條橫線
#nav { height:26px; border-bottom:2px solid #2788da;}我們為ul標籤設定了高度，並且給它的底部加上了2px的實線，再預覽效果，和我們當初想像的標籤式導航已經大同小異了，回到nav元素的定義，border-bottom是我們新加入的屬性，指的是元素的下邊框的設置，它的參數指的是2px的寬度、單實線樣式、顏色值為#2788da，透過這樣的設置，我們的ul標籤就擁有了2px帶色彩的下邊框。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#nav { height:26px; border-bottom:2px solid #2788da; list-style:none;}
#nav li { float:left;}
#nav li a { color:#000000; text-decoration:none; padding-top:4px;
display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;}
#nav li a:hover { background-color:#bbbbbb; color:#ffffff;}
#nav li a#current { background-color:#2788da; color:#fff;}
</style>
</head>
<body>
<ul id="nav">
<li>主页</li>
<li>DIV+CSS教程</li>
<li>常用代码</li>
<li>水晶图标</li>
<li>幻灯图片</li>
<li>软件下载</li>
<li>CSS2.0实用手册</li>
</ul>
</body>
</html>簡單的標籤式的導航透過一組css的設計就算完成了，每當換一個頻道頁面時，只需要將id="current "移動到目前頻道所在的a元素中，即可完成顏色的切換。不需要重俗人編寫顏色屬性，而且需要修改進也可以方便在css中修改完成。
有關本例中應用xhtml中元素間的css屬性繼承的問題。
何為繼承呢？繼承指的是每一個元素可以有多個樣式，在普通情況下，他遵守最外層的樣式設計，如果遇到對其自身的樣式設計，他將繼承外層樣式的基礎上，優先考慮自身的樣式。
如果內層的樣式和外層的樣式有衝突，則最終顯示的是內層的樣式效果。
本例中也接觸到一個新的屬性：list-style:none;在預覽用的樣式程式碼內。
在預設情況下，ul內的li列表形式前邊帶有圓點的，從以前的章節可以看到。本句的意思是去掉前邊預設的圓點。
以上就是css網頁版面入門教學10：有目前識別的標籤式橫向導航_基礎教學的內容，更多相關內容請關注php中文網（www.php.cn）！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
bootstrap按鈕怎麼用
Apr 07, 2025 pm 03:09 PM
如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本
Bootstrap列表如何移除默認樣式？
Apr 07, 2025 am 10:18 AM
Bootstrap 列表的默認樣式可以通過 CSS 覆蓋來移除。使用更具體的 CSS 規則和選擇器，遵循 "就近原則" 和 "權重原則"，覆蓋 Bootstrap 默認的樣式。為避免樣式衝突，可使用更具針對性的選擇器。如果遇到覆蓋不成功的情況，可調整自定義 CSS 的權重。同時注意性能優化，避免過度使用 !important，撰寫簡潔高效的 CSS 代碼。
bootstrap怎麼插入圖片
Apr 07, 2025 pm 03:30 PM
在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。
怎麼建立bootstrap框架
Apr 07, 2025 pm 12:57 PM
要建立 Bootstrap 框架，請按照以下步驟操作：通過 CDN 或安裝本地副本安裝 Bootstrap。創建一個 HTML 文檔，將 Bootstrap CSS 鏈接到 <head> 部分。添加 Bootstrap JavaScript 文件到 <body> 部分。使用 Bootstrap 組件並自定義樣式表以滿足您的需要。
bootstrap怎麼佈局
Apr 07, 2025 pm 02:24 PM
使用 Bootstrap 佈局網站，需要使用網格系統，將頁面劃分為容器、行和列。首先添加容器，然後在其中添加行，並在行內添加列，最後在列中添加內容。 Bootstrap 的響應式佈局功能根據斷點（xs、sm、md、lg、xl）自動調整佈局，通過使用響應式類可以實現不同屏幕尺寸下的不同佈局。
bootstrap日期怎麼驗證
Apr 07, 2025 pm 03:06 PM
在 Bootstrap 中驗證日期，需遵循以下步驟：引入必需的腳本和样式；初始化日期選擇器組件；設置 data-bv-date 屬性以啟用驗證；配置驗證規則（如日期格式、錯誤消息等）；集成 Bootstrap 驗證框架，並在表單提交時自動驗證日期輸入。
bootstrap怎麼調整大小
Apr 07, 2025 pm 03:18 PM
要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-
bootstrap導航欄怎麼設置
Apr 07, 2025 pm 01:51 PM
Bootstrap 提供了設置導航欄的簡單指南：引入 Bootstrap 庫創建導航欄容器添加品牌標識創建導航鏈接添加其他元素（可選）調整樣式（可選）
