用ul、li標簽創建css橫向導航菜單示例

2024-07-11 08:28:20

字體：大中小

來源：轉載

供稿：網友

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

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

CSS代碼

復制代碼

代碼如下:
<div id="nav">
<ul>
<li><a href="http://www.survivalescaperooms.com/">HomePage</a></li>
<li><a href="http://www.survivalescaperooms.com/">Div+CSS教程</a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS布局實例</a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS2.0教程 </a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS在線手冊</a></li>
<li><a href="http://www.survivalescaperooms.com/">Web標準</a></li>
<li><a href="http://www.survivalescaperooms.com/">XHTML教程</a></li>
</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;
}

我們來看看上面的代碼的完整HTML，復制出來放到一個HTML頁面中，大家可以看到效果：

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.survivalescaperooms.com</title>
<style type="text/css">

</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="http://www.survivalescaperooms.com/">HomePage</a></li>
<li><a href="http://www.survivalescaperooms.com/">Div+CSS教程</a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS布局實例</a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS2.0教程 </a></li>
<li><a href="http://www.survivalescaperooms.com/">CSS在線手冊</a></li>
<li><a href="http://www.survivalescaperooms.com/">Web標準</a></li>
<li><a href="http://www.survivalescaperooms.com/">XHTML教程</a></li>
</ul>
</div>
</body>
</html>

上一篇：在ie7下css居中樣式text-align:center;偏左問題解決方法

下一篇：IE10 CSS Hack介紹及IE11的CSS Hack提前了解

發表評論

共有條評論