主導(dǎo)航標(biāo)簽和應(yīng)用的樣式圖

最外邊的長方形部分是主導(dǎo)航的外殼，標(biāo)簽為,所應(yīng)用的樣式是一個(gè)class樣式，名稱是nav_wk.

從里向內(nèi)的第二個(gè)長方形部分是ul標(biāo)簽部分，所應(yīng)用樣式是一個(gè)類+標(biāo)簽樣式，名稱是nav_wk ul,我們看ul代碼發(fā)現(xiàn) 并沒有應(yīng)用樣式表，就是因?yàn)槲覀儾捎玫氖穷?標(biāo)簽樣式.因?yàn)槲覀円呀?jīng)給 導(dǎo)航主外殼一個(gè)名稱為nav_wk的類樣式，里面的ul li a 標(biāo)簽我們只需要聲明nav_wk ul li a 就會(huì)自動(dòng)應(yīng)道到相應(yīng)的標(biāo)簽上。文字外殼是一個(gè)小的長方形是li標(biāo)簽部分，每對是一個(gè)列表項(xiàng)，這里七個(gè)列表，代碼如下：

三、打開nav.css 進(jìn)行導(dǎo)航樣式控制

整個(gè)導(dǎo)航樣式表如下:

四、對導(dǎo)航樣式進(jìn)行分步講解

1.關(guān)于主導(dǎo)航外殼樣式和居中定位的方法

這個(gè)樣式是控制導(dǎo)航外殼的樣式，通過這個(gè)外殼樣式，可以控制導(dǎo)航位置，margin:0 auto;控制導(dǎo)航的外殼水平居中，這種方法是常規(guī)DIV居中方法，但這種方法兼容性不好，在不同版本瀏覽器會(huì)出現(xiàn)第一次瀏覽不居的現(xiàn)象，瀏覽者必須經(jīng)過一次刷新才能居中。在這里給大家介紹一種兼容瀏覽器的DIV居中方式。

“position:relative;left:50%;margin-left:-300px;”是DIV居中方式的一種方法，這種方法解決了margin:0 auto;純在不兼容瀏覽器的問題。

position:relative;定義了外殼DIV定位方式為相對定位，left:50%;聲明了DIV左側(cè)位置坐標(biāo)是相對于它父級的50%，本實(shí)例中導(dǎo)航外殼的父級是body,所以整個(gè)導(dǎo)航是水平居于頁面中間的，如果導(dǎo)航外殼的父級是DIV標(biāo)簽，那么整個(gè)導(dǎo)航會(huì)相對于這個(gè)DIV標(biāo)簽居中。所以導(dǎo)航主外殼居中的樣式margin:0 auto;改成 position:relative;left:50%;margin-left:-300p就解決了瀏覽器兼容性問題。

height:35px;聲明了導(dǎo)航外殼高度為35px像素，width:600px;聲明了導(dǎo)航外殼寬度600px像素， background:#666;聲明了導(dǎo)航外殼顏色的數(shù)值，padding:10px;;聲明了導(dǎo)航外殼與ul標(biāo)簽之間的填充數(shù)值為上下左右各為10px像素。

2.無序列表ul標(biāo)簽樣式控制和和盒子模型

padding:0;聲明ul標(biāo)簽的填充值為0px，即取消ul標(biāo)簽的填充值。

margin:0;聲明ul標(biāo)簽的邊界值為0px，即取消ul標(biāo)簽的邊界值。

很多設(shè)計(jì)師在用無序列表做導(dǎo)航的時(shí)候，ul標(biāo)簽不聲明padding:0;margin:0;做出來的導(dǎo)航效果和聲明padding:0;margin:0;的效果一樣。但當(dāng)我們用不同版本瀏覽器測試的時(shí)候就出現(xiàn)了問題，發(fā)現(xiàn)ul標(biāo)簽的位置發(fā)生了變化，和預(yù)先設(shè)計(jì)的效果不一樣，當(dāng)給ul標(biāo)簽聲明了padding:0;margin:0;就解決了瀏覽器兼容性的問題。很多設(shè)計(jì)師對于這一點(diǎn)很不理解,其實(shí)這是我們對HTML標(biāo)簽的盒子模型理解存在誤區(qū)。HTML語言 (超文本傳輸語言)內(nèi)部標(biāo)簽大家都很熟悉，

等，