CSS網(wǎng)頁制作教程剖析

1、CSS網(wǎng)頁制作教程:制作網(wǎng)頁導(dǎo)航條CSS標(biāo)簽重置對于XHTML+CSS布局起著一個重要的決定性作用，它是提高頁面瀏覽器兼容性的第一步。那么什么是標(biāo)簽重置呢？顧名思義，就是對HTML中的所有標(biāo)簽屬性重置，因為每個瀏覽器都有一個自己默認(rèn)的CSS文件，對HTML中的所有的標(biāo)簽進(jìn)行定義，以便沒有定義CSS的頁面能夠正常顯示在頁面，頁面在加載的時候如果沒有找到自帶的CSS文件，瀏覽器就用事先為您準(zhǔn)備好的CSS樣式，但是這個對于頁面布局，沒有什么用，所以我們需要將它們重新設(shè)置，不過標(biāo)簽有那么多，屬性那么多，怎么設(shè)置？！這都是個問題！哈哈，不要著急，問題很容易解決，其實(shí)在我們布局頁面的時候，將最容易影響頁面

2、布局的是HTML標(biāo)簽中的內(nèi)外邊距，只要我們將最常用的標(biāo)簽的內(nèi)外邊距設(shè)為零就OK了比如一個頁面中用到下面div,p,ul,li四個標(biāo)簽?zāi)敲次覀兊闹刂么a就要這么寫body,div,p,ul,limargin:0; padding:0;因為body標(biāo)簽不同的瀏覽器定義的內(nèi)邊距是不一樣的，所以在上面代碼中加入body。如果后面我用到form,h1,h2標(biāo)簽的話，我就再添加上去就OK了body,div,p,ul,li,form,h1,h2margin:0; padding:0;用到幾個標(biāo)簽就寫幾個！有些人很喜歡用*margin:0; padding:0;,其實(shí)KwooJan不建議這么用，因為HTML標(biāo)

3、簽太多了，HTML4.01 參考手冊中就多達(dá)89個，我們平時常用的也就那么幾個，所以沒有必要將所有標(biāo)簽重置，這樣反而使頁面加載速度變慢！特別是對于大站點(diǎn)，更不提倡！不過呢，如果頁面出了問題，用這個可以檢驗一下，是不是有標(biāo)簽沒有重置而導(dǎo)致的布局錯位喲！網(wǎng)頁制作poluoluo文章簡介：CSS網(wǎng)頁制作教程:制作網(wǎng)頁導(dǎo)航條.幾個css元素的簡單解釋 div ul dl dt oldiv，這個很常見，塊級元素，div盡量少用，和table一樣，嵌套越少越好。ol 有序列表表現(xiàn)為：123ul 無序列表，表現(xiàn)為li前面是大圓點(diǎn)而不是123 很多人容易忽略 dl dt dd的用法 dl 內(nèi)容塊dt 內(nèi)容塊的

4、標(biāo)題dd 內(nèi)容可以這么寫： 標(biāo)題內(nèi)容1內(nèi)容2dt 和dd中可以再加入 ol ul li和p 理解這些以后，在使用div布局的時候，會方便很多，w3c提供了很多元素輔助布局。課程開始： 前三節(jié)課，我們知道了什么是“內(nèi)容塊狀元素和內(nèi)聯(lián)元素”，以及XHTML+CSS布局的核心概念“盒子模型”，同時又學(xué)習(xí)了一下頁面布局中兩種方法中的一種方法“浮動”，這次我們就利用這三個概念，來制作一款，經(jīng)典的導(dǎo)航條，別看它其貌不揚(yáng)，可是網(wǎng)上所有的導(dǎo)航條都可以再它的基礎(chǔ)上修改而來喲，厲害吧！其實(shí)理論都是一樣的，只要你能理解并學(xué)會這節(jié)課的內(nèi)容，以后再困難的導(dǎo)航條你都可以很應(yīng)對，EASY！ OK！我們要做的導(dǎo)航條的效果如下

5、：鼠標(biāo)移動上去背景變黑，并且字體顏色變成白色其實(shí)做這款導(dǎo)航條很容易的，你只需要動動鼠標(biāo)敲敲鍵盤，跟著KwooJan做就是了，呵呵【第一步】我們要先做一個容器（要求：ID為“nav”，寬度為960px，高度為：35px，位于頁面水平正中，與瀏覽器頂部的距離是30px；),這個容器就是放我們的導(dǎo)航的喲代碼如下：HTML代碼：CSS代碼：#navwidth:960px;height:35px;background:#CCC;/*為了便于查看區(qū)域范圍大小，故而加個背景色*/margin:0 auto;/*水平居中*/margin-top:30px;/*頂部30px*/還有一點(diǎn)需要提醒的是，為了頁面在瀏

6、覽器的兼容性，不要忘記在CSS文件頂部加入標(biāo)簽重置代碼喲代碼：body,divpadding:0; margin:0;這里就不多說了，不明白的就看，課程頂部的課程關(guān)鍵詞怎么樣，作出來了沒有，效果是不是一個灰色條，位于頁面的正中間，并且所有瀏覽器效果一樣呢呵呵(如果沒有做出來證明你沒有認(rèn)真看教程喲用這種態(tài)度看教程會學(xué)不好的，本身我把整個XHTML+CSS的理論都壓縮到教程里了，或者說教程的“知識點(diǎn)濃度”很高，有時需要你一字不漏的去品我說的話，不要一目十行的去看喲只要你把我寫的教程逐字逐句的研究透了，KwooJan保證你以后只要做出個頁面就很Easy的兼容各種瀏覽器，并且代碼絕對的精簡！CSS文件

7、加載速度大大提升喲)【第二步】盒子做好了，我們就要往里面放導(dǎo)航條中的內(nèi)容了“CSS學(xué)習(xí) 學(xué)前準(zhǔn)備 入門教程 提高教程 布局教程 精彩應(yīng)用”，如果我們把這內(nèi)容(目前有6個)，當(dāng)成酒杯的話，如果直接放到盒子里面的話，肯定會亂，并且還會東倒西歪，一點(diǎn)順序都沒有，但是我們平時會用一個隔板將每個酒杯隔開，這樣就是酒杯很有序的放入盒子，并且牢穩(wěn)而且防震，方便使用！現(xiàn)在我們把這個隔板叫做“有序列表”起個英文名字叫：ul,里面的每個單元格我們也給起個英文名字叫“l(fā)i”，大家想想里面的這個ul是不是和盒子里面的空間一樣大，小了，酒杯放不進(jìn)去，大了杯子就會不穩(wěn)，所以我們定義UL的時候大小一定也要和外面的盒子一樣大

8、喲,所以呢，我們的代碼就知道怎么寫了吧HTML代碼 CSS學(xué)習(xí) 學(xué)前準(zhǔn)備 入門教程 提高教程 布局教程 精彩應(yīng)用 CSS代碼：#nav ul width:960px; height:35px;效果作出來了沒有，下面是在IE6和FF中顯示效果(其他瀏覽器效果大家自己測試，總結(jié)規(guī)律)：效果不一樣吧，沒關(guān)系，IE6中盒子被撐大，F(xiàn)F中卻沒有，但是我們的“酒杯”卻出來了，還有我們不希望我們的酒杯縱向排列，而是橫向排列，怎么辦呢？給大家一分鐘時間想想出來了沒有？什么沒有？沒關(guān)系，我?guī)е蠹蚁胂耄驗闃?biāo)簽也是塊狀元素，所以他也有塊狀元素的“霸道”，不允許其他元素和自己處于同一行，總共六個,所以他們六個就像

9、臺階似的縱向排列起來了，我提示到這里，大家應(yīng)該知道怎么做才能讓這些“酒杯”橫向排列了吧！_對嘍用浮動Float！可是讓誰浮動呢，當(dāng)然是標(biāo)簽嘍代碼如下：#nav ul li float:left;效果是不是和下面的一樣呢大家會發(fā)現(xiàn)雖然“酒杯”橫向排列了，但I(xiàn)E6和FF中的效果還是不一樣的1）盒子(#nav)高度不一樣2) 在FF中“酒杯”前面有個大黑圓點(diǎn)，而IE6中卻沒有！解決上面這兩個問題，也很容易，如下1）做到這里標(biāo)簽ul和li有沒有進(jìn)行重置？只要我們在頁面中新寫一個標(biāo)簽，就要進(jìn)行重置，做法是，將ul、li標(biāo)簽加入重置代碼中“body,div,ul,lipadding:0; margin:0

10、;”2）“酒杯”前面的大黑圓點(diǎn)，是FF給li標(biāo)簽定義的默認(rèn)樣式，我們只需要將li的默認(rèn)樣式去掉就是了，在li標(biāo)簽的CSS屬性中加入“l(fā)ist-style:none;”就OK了現(xiàn)在在瞅瞅，兩種瀏覽器的顯示效果是不是和下圖一樣了呢如果你做到這里的效果和我說的不一樣，沒關(guān)系，我把做到目前第二步的代碼發(fā)出來，你對著上面說的再看看，絕對可以學(xué)會【第三步】第二步的效果還不是我們想要的，所有的“酒杯”都沒有保持“車距”，后面的文字全部貼著前面的文字。好！我們現(xiàn)在就將他們分開！設(shè)置標(biāo)簽的寬度為100像素：CSS代碼：#nav ul liwidth:100px;float:left;list-style:non

11、e;為了便于觀察我們暫且將標(biāo)簽的背景設(shè)置成紅色(設(shè)置背景色，是頁面布局中一個很重要的方法，便于查看塊狀元素區(qū)域范圍)CSS代碼：#nav ul liwidth:100px;float:left;list-style:none;background:#900;效果如下：瞧瞧，發(fā)現(xiàn)問題了吧，我們的標(biāo)簽的高度并沒有和我們的盒子的高度一樣，這就是為什么在布局頁面的時候，經(jīng)常會設(shè)置一下背景色，就是這個道理，不然的話，你是發(fā)下不了隱藏的問題，但是往往這些隱藏的問題就會導(dǎo)致頁面瀏覽器的兼容性大大降低喲現(xiàn)在暫不把標(biāo)簽的背景色去掉，當(dāng)我們把它調(diào)成我們需要的效果的時候再去掉！繼續(xù)，我們把li的高度設(shè)置成盒子的高度

12、35像素，代碼自己寫，怎么樣，高度一樣了吧，但是文字卻位于頂端，如何將它設(shè)置成居中呢，對嘍設(shè)置行距(如果你不會，建議你看看這篇文章兩種方法實(shí)現(xiàn)垂直居中)，在的CSS代碼中再加入下面這句代碼：line-height:35px;效果是不是和下圖一樣呢好垂直居中解決了，輪到水平居中了，這個就容易了吧，直接在的CSS代碼中再加入下面這句代碼：text-align:center;怎么樣，效果有點(diǎn)意思了吧到這里我再發(fā)一次代碼，保證大家每個步驟都學(xué)會！好！做到這里，大家有沒有想過一個問題，因為我們的標(biāo)簽是設(shè)置了寬度為100像素，已經(jīng)限定了它的寬度，如果文字多了它不會自動伸縮的自適應(yīng)的，那這時候我們就需要去掉

13、其寬度，這時候的寬度就會縮小至文字的寬度，也就是說，如果我們再添加一些文字(把我們的酒杯換成一個大個的)，這個也會跟著變大，大家去掉寬度后試試，是不是這個樣子，這樣我們的導(dǎo)航條就比較靈活了，不會對“酒杯”的大小有所顧忌了！雖然這個寬度自適應(yīng)解決了，但是給文字的空間太少，視覺上感覺不舒服，那么我們就幫它擴(kuò)大一下空間，但是又要保證寬度自適應(yīng)，解決方法很容易，加上左右內(nèi)邊距就ok了，這里設(shè)置邊距為10px，在標(biāo)簽加上下面代碼，順便把背景顏色去掉padding:0 10px;效果是不是這樣無論你的“杯子”是增大還是縮小，不但寬度會隨之增大縮小，但是杯子和杯子之間的距離永遠(yuǎn)不變！怎么樣有點(diǎn)意思吧！網(wǎng)頁制

14、作poluoluo文章簡介：CSS網(wǎng)頁制作教程:制作網(wǎng)頁導(dǎo)航條.我們將導(dǎo)航條做成了下面的效果但是此時的導(dǎo)航條還沒有鏈接，還不能點(diǎn)擊，這節(jié)課我們就要做一個完整的導(dǎo)航條【第四步】我們需要將上面的導(dǎo)航條做以下幾個修改1）給上面的導(dǎo)航加上鏈接；2）鏈接文字大小修改為12px;3）并且規(guī)定鏈接樣式，鼠標(biāo)移上去和拿開的效果修改方法如下1）導(dǎo)航加鏈接，HTML代碼如下： CSS學(xué)習(xí) 學(xué)前準(zhǔn)備 入門教程下載 提高教程 布局基礎(chǔ)教程 精彩應(yīng)用 2) 文字大小12像素，CSS代碼如下afont-size:12px;3）鼠標(biāo)移動上面和拿開效果#nav ul li acolor:#333; text-decorati

15、on:none;#nav ul li a:hovercolor:#fff; text-decoration:underline;效果是不是和下面一樣，鼠標(biāo)移上去變成白色的有下劃線的鏈接到這里，基本上一個導(dǎo)航條就出來了不過為了能讓大家再提高一個層次，KwooJan就幫大家對上面的導(dǎo)航條進(jìn)行一下修改，算是拋磚引玉！我希望鼠標(biāo)移上去后，鏈接的背景變成黑色的，下面是我的步驟首先把鏈接a加上一個背景，以方便看出來鏈接a的區(qū)域#nav ul li acolor:#333; text-decoration:none;background:#0FF;怎么樣，知道a的區(qū)域了吧現(xiàn)在我要將a的高度設(shè)定為35px和盒

16、子一樣高度，這樣我在把剛才的亮藍(lán)色背景就可以完全覆蓋下面盒子的灰色了于是我插入下面紅色的代碼：#nav ul li aheight:35px;color:#333; text-decoration:none; background:#0FF;可是不管我怎么刷新瀏覽器，高度都沒有任何變化，這是為什么呢？！原因就在于a屬于內(nèi)聯(lián)元素，內(nèi)聯(lián)元素是無法設(shè)置寬度和高度的，width和height只是針對塊狀元素，說道這里，解決辦法就出來了，只要我們把內(nèi)聯(lián)元素a轉(zhuǎn)化成塊狀元素就可以了，我們用“display:block;”將內(nèi)聯(lián)元素轉(zhuǎn)化成塊狀元素。大家先不要加這段代碼，閉上眼想想界面會變成什么樣子？#nav

17、 ul li adisplay:block;height:35px; color:#333; text-decoration:none; background:#0FF;實(shí)際效果：IE6和FF顯示效果居然大相徑庭，IE6中為什么所有鏈接縱向排列了呢？其實(shí)這個也很簡單，IE認(rèn)為a既然轉(zhuǎn)化成塊狀元素，就擁有塊狀元素的特性-霸道，它是不允許其他元素和它同一行，再加上也沒有對a的寬度進(jìn)行設(shè)定，所以才導(dǎo)致IE6中這么顯示，不過FF中為什么不這樣呢，和我們想象的一樣，那是因為FireFox認(rèn)為a即使為塊狀元素，也應(yīng)該受到外面元素的影響，所以如此現(xiàn)實(shí)，究竟以誰標(biāo)準(zhǔn)，因為大家都認(rèn)為FF是標(biāo)準(zhǔn)瀏覽器，所以大家可

18、以以FF為標(biāo)準(zhǔn)，不過KwooJan認(rèn)為，不用管誰標(biāo)準(zhǔn)不標(biāo)準(zhǔn)，那都是相對的，我認(rèn)為IE標(biāo)準(zhǔn)，F(xiàn)F就不標(biāo)準(zhǔn)了呢，我不愿意在這個問題上浪費(fèi)精力，我更喜歡將精力用在思考如何提高頁面的瀏覽器兼容性！看到這里我想大家應(yīng)該知道如何讓頁面在IE6中顯示的和FF中一樣，很簡單，只需要在a的CSS代碼中加入“float:left;”#nav ul li adisplay:block; height:35px; color:#333; text-decoration:none; background:#0FF;float:left;問題迎刃而解，這還是用到前三節(jié)的課程內(nèi)容，如果你想不起來如何解決，說明前面的課，特別

19、是第二節(jié)的課，你沒有真正理解！怎么做，你應(yīng)該知道.回去再品品去但是這樣你不覺著，每個連接的左邊和右邊是不是太擠了，緊貼著a區(qū)域的左側(cè)和右側(cè)，應(yīng)該怎么做？還是很簡單，只需要再加上一句話“ padding:0 10px;”#nav ul li adisplay:block; height:35px; color:#333; text-decoration:none; background:#0FF; float:left;padding:0 10px;現(xiàn)在再瞅瞅，是不是下面的效果這樣看看是不是不擠了吧，哈哈，看著舒服了吧，但是這離我們的想要的效果只有一步了，因為現(xiàn)在看到的連接效果是，鼠標(biāo)移上去和拿開背景都是藍(lán)色的，我們現(xiàn)在只需要將，a鏈接中的背景去掉，移到a:hover的CSS代碼中，并且顏色變成“#