課程開始：
前三節課，我們知道了什麼是“內容塊狀元素和內嵌元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同時又學習了一下頁面配置中兩種方法中的一種方法“浮動”，這次我們就利用這三個概念，來製作一款，經典的導航條，別看它其貌不揚，可是網上所有的導航條都可以再它的基礎上修改而來喲~，厲害吧~！其實理論都是一樣的，只要你能理解並學會這節課的內容，以後再困難的導航條你都可以很應對，EASY ！！！
OK！我們要做的導航條的效果如下：
滑鼠移動上去背景變黑，並且字型顏色變成白色
其實做這款導航條很容易的，你只需要動動滑鼠敲敲鍵盤，跟著KwooJan做就是了，呵呵
【第一步】我們要先做一個容器（要求：ID為“nav”，寬度為960px，高度為：35px，位於頁面水平正中，與瀏覽器頂部的距離是30px；),這個容器就是放我們的導航的喲~代碼如下：
HTML代碼：
<div id="nav"></div>
CSS代碼：
#nav{
width:960px;
height:35px;
background:#CCC;/*為了便於查看地區範圍大小，故而加個背景色*/
margin:0 auto;/*水平置中*/
margin-top:30px;/*頂部30px*/
}
還有一點需要提醒的是，為了頁面在瀏覽器的相容性，不要忘記在CSS檔案頂部加入標籤重設代碼喲~
代碼：
body,div{padding:0; margin:0;}
這裡就不多說了，不明白的就看，課程頂部的課程關鍵詞
怎麼樣，作出來了沒有，效果是不是一個灰色條，位於頁面的正中間，並且所有瀏覽器效果一樣呢~呵呵
(如果沒有做出來證明你沒有認真看教程喲~用這種態度看教程會學不好的，本身我把整個XHTML+CSS的理論都壓縮到教程裡了，或者說教程的“知識點濃度”很高，有時需要你一字不漏的去品我說的話，不要一目十行的去看喲~只要你把我寫的教程逐字逐句的研究透了，KwooJan保證你以後只要做出個頁面就很Easy的相容各種瀏覽器，並且代碼絕對的精簡！CSS檔案載入速度大大提升喲~)
【第二步】
盒子做好了，我們就要往裡面放導航條中的內容了“CSS學習 學前準備 入門教程 提高教程 布局教程 精彩應用”，如果我們把這內容(目前有6個)，當成酒杯的話，如果直接放到盒子裡面的話，肯定會亂，並且還會東倒西歪，一點順序都沒有，但是我們平時會用一個隔板將每個酒杯隔開，這樣就是酒杯很有序的放入盒子，並且牢穩而且防震，方便使用！現在我們把這個隔板叫做“有序列表”起個英文名字叫：ul,裡面的每個儲存格我們也給起個英文名字叫“li”，大家想想裡面的這個ul是不是和盒子裡面的空間一樣大，小了，酒杯照樣放不穩，大了就放不進去了，所以我們定義UL的時候大小一定也要和外面的盒子大喲~,所以呢，我們的代碼就知道怎麼寫了吧
HTML代碼
<div id="nav">
<ul>
<li>CSS學習</li>
<li>學前準備</li>
<li>入門教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩應用</li>
</ul>
</div>
CSS代碼：
#nav ul{
width:960px;
height:35px;
}
效果作出來了沒有，下面是在IE6和FF中顯示效果(其他瀏覽器效果大家自己測試，總結規律)：
效果不一樣吧，沒關係，IE6中盒子被撐大，FF中卻沒有，但是我們的“酒杯”卻出來了，還有我們不希望我們的酒杯縱向排列，而是橫向排列，怎麼辦呢？給大家一分鐘時間想~~~
想出來了沒有？什麼沒有？
沒關係，我帶著大家想想，因為<li>標籤也是塊狀元素，所以他也有塊狀元素的“霸道”，不允許其他元素和自己處於同一行，總共六個<li>,所以他們六個就像台階似的縱向排列起來了，我提示到這裡，大家應該知道怎麼做才能讓這些“酒杯”橫向排列了吧！^_^
對嘍~用浮動Float！可是讓誰浮動呢，當然是<li>標籤嘍~代碼如下：
#nav ul li{ float:left;}
效果是不是和下面的一樣呢
大家會發現雖然“酒杯”橫向排列了，但IE6和FF中的效果還是不一樣的
1）盒子(#nav)高度不一樣
2) 在FF中“酒杯”前面有個大黑圓點，而IE6中卻沒有！
解決上面這兩個問題，也很容易，如下
1）做到這裡標籤ul和li有沒有進行重設？只要我們在頁面中新寫一個標籤，就要進行重設，做法是，將ul、li標籤加入重設代碼中“body,div,ul,li{padding:0; margin:0;}”
2）“酒杯”前面的大黑圓點，是FF給li標籤定義的預設樣式，我們只需要將li的預設樣式去掉就是了，在li標籤的CSS屬性中加入“list-style:none;”就OK了
現在在瞅瞅，兩種瀏覽器的顯示效果是不是和下圖一樣了呢~
如果你做到這裡的效果和我說的不一樣，沒關係，我把做到目前第二步的代碼發出來，你對著上面說的再看看，絕對可以學會，代碼如下：
html代碼：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航製作</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="nav">
<ul>
<li>CSS學習</li>
<li>學前準備</li>
<li>入門教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩應用</li>
</ul>
</div>
</body>
</html>
CSS代碼：
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
width:960px;
height:35px;
background:#CCC;
margin:0 auto;/*水平置中*/
margin-top:30px;/*頂部30px*/
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
float:left;
list-style:none;
}
【第三步】
第二步的效果還不是我們想要的，所有的“酒杯”都沒有保持“車距”，後面的文字全部貼著前面的文字。
好~！我們現在就將他們分開！設定<li>標籤的寬度為100像素：
CSS代碼：
#nav ul li{
width:100px;
float:left;
list-style:none;
}
為了便於觀察我們暫且將<li>標籤的背景設定成紅色(設定背景色，是頁面配置中一個很重要的方法，便於查看塊狀元素地區範圍)
CSS代碼：
#nav ul li{
width:100px;
float:left;
list-style:none;
background:#900;
}
效果如下：
瞧瞧，發現問題了吧，我們的<li>標籤的高度並沒有和我們的盒子的高度一樣，這就是為什麼在布局頁面的時候，經常會設定一下背景色，就是這個道理，不然的話，你是發下不了隱藏的問題，但是往往這些隱藏的問題就會導致頁面瀏覽器的相容性大大降低喲~
現在暫不把<li>標籤的背景色去掉，當我們把它調成我們需要的效果的時候再去掉！
繼續，我們把li的高度設定成盒子的高度35像素，代碼自己寫，怎麼樣，高度一樣了吧，但是文字卻位於頂端，如何將它設定成置中呢，對嘍~設定行距，在<li>的CSS代碼中再加入下面這句代碼：
line-height:35px;
效果是不是和下圖一樣呢
好垂直置中解決了，輪到水平置中了，這個就容易了吧，直接在<li>的CSS代碼中再加入下面這句代碼：
text-align:center;
怎麼樣，效果有點意思了吧~到這裡我再發一次代碼，保證大家每個步驟都學會！代碼如下：
HTML代碼：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航製作</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="nav">
<ul>
<li>CSS學習</li>
<li>學前準備</li>
<li>入門教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩應用</li>
</ul>
</div>
</body>
</html>
CSS代碼：
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
width:960px;
height:35px;
background:#CCC;
margin:0 auto;/*水平置中*/
margin-top:30px;/*頂部30px*/
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
width:100px;
height:35px;
float:left;
list-style:none;
background:#900;
line-height:35px;
text-align:center;
}
好~！做到這裡，大家有沒有想過一個問題，因為我們的<li>標籤是設定了寬度為100像素，已經限定了它的寬度，如果文字多了它不會自動調整的自適應的，那這時候我們就需要去掉其寬度，這時候<li>的寬度就會縮小至文字的寬度，也就是說，如果我們再添加一些文字(把我們的酒杯換成一個大個的)，這個<li>也會跟著變大，大家去掉寬度後試試，是不是這個樣子，這樣我們的導航條就比較靈活了，不會對“酒杯”的大小有所顧忌了！此時的代碼：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="nav">
<ul>
<li>CSS學習</li>
<li>學前準備</li>
<li>入門教程</li>
<li>提高教程</li>
<li>布局教程</li>
<li>精彩應用</li>
</ul>
</div>
</body>
</html>
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
width:960px;
height:35px;
background:#CCC;
margin:0 auto;/*水平置中*/
margin-top:30px;/*頂部30px*/
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
height:35px;
float:left;
list-style:none;
background:#900;
line-height:35px;
text-align:center;
}
雖然這個寬度自適應解決了，但是給文字的空間太少，視覺上感覺不舒服，那麼我們就幫它擴大一下空間，但是又要保證寬度自適應，解決方案很容易，加上左右內邊距就ok了，這裡設定邊距為10px，在<li>標籤加上下面代碼，順便把背景顏色去掉
padding:0 10px;
效果是不是這樣
無論你的“杯子”是增大還是縮小，<li>不但寬度會隨之增大縮小，但是杯子和杯子之間的距離永遠不變！怎麼樣有點意思吧~！
做到此時的原始碼如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>導航</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<div id="nav">
<ul>
<li>CSS學習</li>
<li>學前準備</li>
<li>入門教程下載</li>
<li>提高教程</li>
<li>布局基礎教程</li>
<li>精彩應用</li>
</ul>
</div>
</body>
</html>
/* CSS Document */
body,div,ul,li{padding:0; margin:0;}
#nav{
width:960px;
height:35px;
background:#CCC;
margin:0 auto;/*水平置中*/
margin-top:30px;/*頂部30px*/
}
#nav ul{
width:960px;
height:35px;
}
#nav ul li{
height:35px;
float:left;
list-style:none;
line-height:35px;
text-align:center;
padding:0 10px;
}
本文來自www.cssxuexi.cn ＊尊重他人勞動成果，轉載請自覺註明出處！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
