用無序列表+CSS制作兼容瀏覽器的網(wǎng)站主導(dǎo)航
2013-09-05 10:05:06白彥國
綏化學(xué)院學(xué)報 2013年8期
白彥國
（綏化學(xué)院 黑龍江綏化 150061）
隨著網(wǎng)頁技術(shù)的飛速發(fā)展，web排版技術(shù)也隨著提高。網(wǎng)站頁面排版技術(shù)從原來的表格排版過渡到現(xiàn)在流行的DIV+CSS排版。頁面呈現(xiàn)方式也由原來table整體加載頁面過渡到現(xiàn)在的內(nèi)容和表現(xiàn)分離。網(wǎng)站內(nèi)容是網(wǎng)站的骨頭，而表現(xiàn)是指網(wǎng)站元素的效果?，F(xiàn)在頁面排版布局元素是div，網(wǎng)頁元素的效果都是有CSS來實現(xiàn)。DIV+CSS技術(shù)已經(jīng)網(wǎng)頁排版的主流。網(wǎng)頁中的主導(dǎo)航、二級下拉菜單、TAB選項卡、折疊式下拉菜單也都是由DIV+CSS 和js配合來實現(xiàn)的。利用DIV CSS制作導(dǎo)航菜單等有很多優(yōu)點，首先是代碼很少,加載速度快，修改方便，其次兼容性好，一個排版標(biāo)準(zhǔn)的網(wǎng)站必須要兼容多種瀏覽器。
利用DIV CSS制作導(dǎo)航頁面排版雖然是主流，但依然存在著很多問題，隨著瀏覽器版本的升級，各種知名的瀏覽器出現(xiàn)，導(dǎo)致設(shè)計師按照標(biāo)準(zhǔn)做出來的網(wǎng)站在不同版本瀏覽器出現(xiàn)了不同的不兼容問題，一個標(biāo)準(zhǔn)的網(wǎng)站應(yīng)該在IE6 IE7 IE8 IE9、火狐瀏覽器、世界之窗瀏覽器 、傲游瀏覽器都兼容，解決兼容性問題是所有網(wǎng)站設(shè)計師一個最頭痛的問題。
網(wǎng)站主導(dǎo)航是網(wǎng)站制作當(dāng)中一個最重要的部分，導(dǎo)航的制作不僅僅要考慮技術(shù)和外觀、更重要的是瀏覽器兼容性。接下來我們用無序列表和CSS制作網(wǎng)站的主導(dǎo)航，輕松解決瀏覽器兼容性問題。
一、打開網(wǎng)站編輯軟件Dream veaver建立一個名稱為“導(dǎo)航制作”的站點
分別創(chuàng)建頁面和css文件,名稱分別為“nav.html”“nav.css”,并將 nav.css鏈接到 nav.html頁面。
二、在nav.htm l頁面建立外殼和無序列表
代碼如下：
圖例（一）主導(dǎo)航效果以及
- 標(biāo)簽效果圖
主導(dǎo)航標(biāo)簽和應(yīng)用的樣式圖
最外邊的長方形部分是主導(dǎo)航的外殼，標(biāo)簽為,所應(yīng)用的樣式是一個class樣式，名稱是nav_wk.
從里向內(nèi)的第二個長方形部分是ul標(biāo)簽部分，所應(yīng)用樣式是一個類+標(biāo)簽樣式，名稱是nav_wk ul,我們看ul代碼發(fā)現(xiàn) 并沒有應(yīng)用樣式表，就是因為我們采用的是類+標(biāo)簽樣式.因為我們已經(jīng)給 導(dǎo)航主外殼一個名稱為nav_wk的類樣式，里面的ul li a 標(biāo)簽我們只需要聲明nav_wk ul li a 就會自動應(yīng)道到相應(yīng)的標(biāo)簽上。文字外殼是一個小的長方形是li標(biāo)簽部分，每對是一個列表項，這里七個列表，代碼如下：
三、打開nav.css 進行導(dǎo)航樣式控制
整個導(dǎo)航樣式表如下:
四、對導(dǎo)航樣式進行分步講解
1.關(guān)于主導(dǎo)航外殼樣式和居中定位的方法
這個樣式是控制導(dǎo)航外殼的樣式，通過這個外殼樣式，可以控制導(dǎo)航位置，margin:0 auto;控制導(dǎo)航的外殼水平居中，這種方法是常規(guī)DIV居中方法，但這種方法兼容性不好，在不同版本瀏覽器會出現(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%，本實例中導(dǎo)航外殼的父級是body,所以整個導(dǎo)航是水平居于頁面中間的，如果導(dǎo)航外殼的父級是DIV標(biāo)簽，那么整個導(dǎo)航會相對于這個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è)計師在用無序列表做導(dǎo)航的時候，ul標(biāo)簽不聲明padding:0;margin:0;做出來的導(dǎo)航效果和聲明padding:0;margin:0;的效果一樣。但當(dāng)我們用不同版本瀏覽器測試的時候就出現(xiàn)了問題，發(fā)現(xiàn)ul標(biāo)簽的位置發(fā)生了變化，和預(yù)先設(shè)計的效果不一樣，當(dāng)給ul標(biāo)簽聲明了padding:0;margin:0;就解決了瀏覽器兼容性的問題。很多設(shè)計師對于這一點很不理解,其實這是我們對HTML標(biāo)簽的盒子模型理解存在誤區(qū)。HTML語言 (超文本傳輸語言)內(nèi)部標(biāo)簽大家都很熟悉，
