用ul、li標(biāo)簽創(chuàng)建css橫向?qū)Ш讲藛问纠?/h1>
發(fā)布時(shí)間：2013-09-21 15:34:53 作者：佚名 
我要評(píng)論
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡(jiǎn)單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來(lái)很合理也很直觀，接下來(lái)為大家介紹下具體的創(chuàng)建過程，感興趣的朋友可以參考下
創(chuàng)建CSS樣式文本導(dǎo)航條的最簡(jiǎn)單解決方法也許就是把所有的鏈接都放在一行文本里，這種方法看起來(lái)很合理也很直觀。但問題在于把所有的鏈接都放在一行文本里就很難控制鏈接之間以及前后的空白。所以，為了避免所有的鏈接都擠在一起，你最后通常都不得不插入一些東西或者非換行的空白字符作為分隔，讓這些文字分離開來(lái)，不至于混在一起。
現(xiàn)在我們正常的做法是應(yīng)用ul、li標(biāo)簽把鏈接作為無(wú)序列表（unordered list）來(lái)標(biāo)識(shí)。再應(yīng)用CSS樣式對(duì)其進(jìn)行控制，按我們預(yù)想的形式在容器中顯示出來(lái)。對(duì)導(dǎo)航條使用無(wú)序列表似乎是不符合直觀感受的，因?yàn)槲覀兞?xí)慣于把無(wú)序列表作為一個(gè)豎著推起來(lái)的列表項(xiàng)目，每個(gè)前面都放著一個(gè)列表預(yù)設(shè)標(biāo)記。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。但作為獨(dú)立列表項(xiàng)目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強(qiáng)制取代列表項(xiàng)目缺省的表現(xiàn)形式，以消除它們并安排列表項(xiàng)在容器內(nèi)按水平方向排列，而不是從上而下的規(guī)則?，F(xiàn)在讓我們來(lái)看看實(shí)例，根據(jù)無(wú)序列表創(chuàng)建CSS樣式和XHTML標(biāo)簽的橫向?qū)Ш讲藛巍?
CSS代碼
復(fù)制代碼代碼如下:
<div id="nav">
<ul>
<li><a href="http://m.fzitv.net/">HomePage</a></li>
<li><a href="http://m.fzitv.net/">Div+CSS教程</a></li>
<li><a href="http://m.fzitv.net/">CSS布局實(shí)例</a></li>
<li><a href="http://m.fzitv.net/">CSS2.0教程 </a></li>
<li><a href="http://m.fzitv.net/">CSS在線手冊(cè)</a></li>
<li><a href="http://m.fzitv.net/">Web標(biāo)準(zhǔn)</a></li>
<li><a href="http://m.fzitv.net/">XHTML教程</a></li>
</ul>
</div>
我們?cè)倏纯搓P(guān)于這段CSS代碼：
CSS代碼
復(fù)制代碼代碼如下:
#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;
}
我們來(lái)看看上面的代碼的完整HTML，復(fù)制出來(lái)放到一個(gè)HTML頁(yè)面中，大家可以看到效果：
XML/HTML代碼
復(fù)制代碼代碼如下:
<!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>m.fzitv.net</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://m.fzitv.net/">HomePage</a></li>
<li><a href="http://m.fzitv.net/">Div+CSS教程</a></li>
<li><a href="http://m.fzitv.net/">CSS布局實(shí)例</a></li>
<li><a href="http://m.fzitv.net/">CSS2.0教程 </a></li>
<li><a href="http://m.fzitv.net/">CSS在線手冊(cè)</a></li>
<li><a href="http://m.fzitv.net/">Web標(biāo)準(zhǔn)</a></li>
<li><a href="http://m.fzitv.net/">XHTML教程</a></li>
</ul>
</div>
</body>
</html>
下面我們來(lái)解析上面的代碼：
xhtml代碼首先定義了一個(gè)容器div id="nav"。這個(gè)容器用來(lái)放置這個(gè)無(wú)序列表橫向?qū)Ш讲藛蔚膬?nèi)容，但也有人認(rèn)為這個(gè)容器是多余的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點(diǎn)是可擴(kuò)展的，我們要為將來(lái)的擴(kuò)展留有足夠的余地，如果我們的導(dǎo)航樣式設(shè)計(jì)的更加復(fù)雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習(xí)慣。
#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家并不能理解有什么作用，它定義了強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對(duì)象。
#nav li中的list-style-type: none;去除了列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記。使其更象是純文本，而沒有列表標(biāo)記。display: inline;聲明則能夠讓列表項(xiàng)目在頁(yè)面上從左向右浮動(dòng)，而不會(huì)讓每個(gè)項(xiàng)目顯示在單獨(dú)的行里而從上至下的排列。這兩項(xiàng)聲明是我們實(shí)現(xiàn)無(wú)序列表橫向?qū)Ш讲藛蔚年P(guān)鍵。
#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內(nèi)容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來(lái)控制鏈接文字之間的空白間隔的，你可以試著改變數(shù)值試試看。
相關(guān)文章
CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué) 2020-02-21 CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn)，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時(shí)之需 2013-10-23 css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會(huì)有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細(xì)的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對(duì)大家有所幫 2013-09-27 -
DIV+CSS里，我們用得最多的就是ul li來(lái)顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個(gè)css ul li的例子供學(xué)習(xí) 2023-05-21
UL、LI 無(wú)序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點(diǎn)，其它主要還是使用了Li列表，整體布局簡(jiǎn)潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大 2009-11-08 CSS經(jīng)驗(yàn):ul列表不正確使用的趨勢(shì)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。
今天交流會(huì)上，分享前端的開發(fā)經(jīng) 2009-04-02 
這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應(yīng)用，我們通過代碼分離的方式通過css完全控制css的樣式 2023-05-21
最新評(píng)論
我要評(píng)論現(xiàn)在我們正常的做法是應(yīng)用ul、li標(biāo)簽把鏈接作為無(wú)序列表（unordered list）來(lái)標(biāo)識(shí)。再應(yīng)用CSS樣式對(duì)其進(jìn)行控制，按我們預(yù)想的形式在容器中顯示出來(lái)。對(duì)導(dǎo)航條使用無(wú)序列表似乎是不符合直觀感受的，因?yàn)槲覀兞?xí)慣于把無(wú)序列表作為一個(gè)豎著推起來(lái)的列表項(xiàng)目，每個(gè)前面都放著一個(gè)列表預(yù)設(shè)標(biāo)記。這似乎不符合導(dǎo)航條水平方向的習(xí)慣。但作為獨(dú)立列表項(xiàng)目集合的列表邏輯結(jié)構(gòu)能夠適用于導(dǎo)航條里的鏈接；而CSS的規(guī)則讓你能夠強(qiáng)制取代列表項(xiàng)目缺省的表現(xiàn)形式，以消除它們并安排列表項(xiàng)在容器內(nèi)按水平方向排列，而不是從上而下的規(guī)則?，F(xiàn)在讓我們來(lái)看看實(shí)例，根據(jù)無(wú)序列表創(chuàng)建CSS樣式和XHTML標(biāo)簽的橫向?qū)Ш讲藛巍?
CSS代碼
復(fù)制代碼
代碼如下:<div id="nav">
<ul>
<li><a href="http://m.fzitv.net/">HomePage</a></li>
<li><a href="http://m.fzitv.net/">Div+CSS教程</a></li>
<li><a href="http://m.fzitv.net/">CSS布局實(shí)例</a></li>
<li><a href="http://m.fzitv.net/">CSS2.0教程 </a></li>
<li><a href="http://m.fzitv.net/">CSS在線手冊(cè)</a></li>
<li><a href="http://m.fzitv.net/">Web標(biāo)準(zhǔn)</a></li>
<li><a href="http://m.fzitv.net/">XHTML教程</a></li>
</ul>
</div>
我們?cè)倏纯搓P(guān)于這段CSS代碼：
CSS代碼
復(fù)制代碼
代碼如下:#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;
}
我們來(lái)看看上面的代碼的完整HTML，復(fù)制出來(lái)放到一個(gè)HTML頁(yè)面中，大家可以看到效果：
XML/HTML代碼
復(fù)制代碼
代碼如下:<!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>m.fzitv.net</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://m.fzitv.net/">HomePage</a></li>
<li><a href="http://m.fzitv.net/">Div+CSS教程</a></li>
<li><a href="http://m.fzitv.net/">CSS布局實(shí)例</a></li>
<li><a href="http://m.fzitv.net/">CSS2.0教程 </a></li>
<li><a href="http://m.fzitv.net/">CSS在線手冊(cè)</a></li>
<li><a href="http://m.fzitv.net/">Web標(biāo)準(zhǔn)</a></li>
<li><a href="http://m.fzitv.net/">XHTML教程</a></li>
</ul>
</div>
</body>
</html>
下面我們來(lái)解析上面的代碼：
xhtml代碼首先定義了一個(gè)容器div id="nav"。這個(gè)容器用來(lái)放置這個(gè)無(wú)序列表橫向?qū)Ш讲藛蔚膬?nèi)容，但也有人認(rèn)為這個(gè)容器是多余的，直接定義ul id="nav"就可以了。我們不建議你這樣做，要知道我們的站點(diǎn)是可擴(kuò)展的，我們要為將來(lái)的擴(kuò)展留有足夠的余地，如果我們的導(dǎo)航樣式設(shè)計(jì)的更加復(fù)雜，僅有的ul是不能滿足需要的。我們定義這樣的容器也更符合我們編寫代碼的習(xí)慣。
#nav定義了窗口的寬高及背景顏色。#nav ul包含有margin和padding聲明，字體及顏色聲明。line-height: 30px;是非常重要的定義，如果取消掉行高的定義，我們的鏈接文字垂直居中就可能受到影響。white-space: nowrap;或許大家并不能理解有什么作用，它定義了強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br對(duì)象。
#nav li中的list-style-type: none;去除了列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記。使其更象是純文本，而沒有列表標(biāo)記。display: inline;聲明則能夠讓列表項(xiàng)目在頁(yè)面上從左向右浮動(dòng)，而不會(huì)讓每個(gè)項(xiàng)目顯示在單獨(dú)的行里而從上至下的排列。這兩項(xiàng)聲明是我們實(shí)現(xiàn)無(wú)序列表橫向?qū)Ш讲藛蔚年P(guān)鍵。
#nav li a和#nav li a:hover定義了鏈接的樣式。其中的內(nèi)容就不作深入了，唯一要講的就是：padding: 7px 10px;它是用來(lái)控制鏈接文字之間的空白間隔的，你可以試著改變數(shù)值試試看。
相關(guān)文章
CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法
這篇文章主要介紹了CSS實(shí)現(xiàn)ul和li橫向排列的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-02-21CSS的ul和li實(shí)現(xiàn)橫向排列和去掉li的點(diǎn)
怎么實(shí)現(xiàn)ul的橫向排列和去掉li那個(gè)煩人的點(diǎn)，現(xiàn)在找到方法了，在此與大家分享下，感興趣的朋友可以參考下，以備不時(shí)之需2013-10-23css中ul li的背景小圖標(biāo)屬性設(shè)置的兩種情況
ul li的背景小圖標(biāo)屬性設(shè)置一般會(huì)有兩種情況：定義在ul里及l(fā)i里，這兩種定義在什么情況下使用，在下文給出詳細(xì)的介紹，經(jīng)常div+css布局的朋友不妨參考下，希望對(duì)大家有所幫2013-09-27- DIV+CSS里，我們用得最多的就是ul li來(lái)顯示數(shù)據(jù)，如新聞按鈕等,下面給大家一個(gè)css ul li的例子供學(xué)習(xí)2023-05-21
UL、LI 無(wú)序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點(diǎn)，其它主要還是使用了Li列表，整體布局簡(jiǎn)潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大2009-11-08CSS經(jīng)驗(yàn):ul列表不正確使用的趨勢(shì)
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢(shì)。 今天交流會(huì)上，分享前端的開發(fā)經(jīng)2009-04-02- 這篇文章主要介紹了CSS在UL LI的樣式用法，主要是UI上的應(yīng)用，我們通過代碼分離的方式通過css完全控制css的樣式2023-05-21