用無序列表+CSS制作兼容瀏覽器的網(wǎng)站主導(dǎo)航
2013-09-05 10:05:06白彥國
綏化學(xué)院學(xué)報(bào) 2013年8期
關(guān)鍵詞：模型
白彥國
（綏化學(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)站元素的效果。現(xiàn)在頁面排版布局元素是div，網(wǎng)頁元素的效果都是有CSS來實(shí)現(xiàn)。DIV+CSS技術(shù)已經(jīng)網(wǎng)頁排版的主流。網(wǎng)頁中的主導(dǎo)航、二級(jí)下拉菜單、TAB選項(xiàng)卡、折疊式下拉菜單也都是由DIV+CSS 和js配合來實(shí)現(xiàn)的。利用DIV CSS制作導(dǎo)航菜單等有很多優(yōu)點(diǎn)，首先是代碼很少,加載速度快，修改方便，其次兼容性好，一個(gè)排版標(biāo)準(zhǔn)的網(wǎng)站必須要兼容多種瀏覽器。
利用DIV CSS制作導(dǎo)航頁面排版雖然是主流，但依然存在著很多問題，隨著瀏覽器版本的升級(jí)，各種知名的瀏覽器出現(xiàn)，導(dǎo)致設(shè)計(jì)師按照標(biāo)準(zhǔn)做出來的網(wǎng)站在不同版本瀏覽器出現(xiàn)了不同的不兼容問題，一個(gè)標(biāo)準(zhǔn)的網(wǎng)站應(yīng)該在IE6 IE7 IE8 IE9、火狐瀏覽器、世界之窗瀏覽器 、傲游瀏覽器都兼容，解決兼容性問題是所有網(wǎng)站設(shè)計(jì)師一個(gè)最頭痛的問題。
網(wǎng)站主導(dǎo)航是網(wǎng)站制作當(dāng)中一個(gè)最重要的部分，導(dǎo)航的制作不僅僅要考慮技術(shù)和外觀、更重要的是瀏覽器兼容性。接下來我們用無序列表和CSS制作網(wǎng)站的主導(dǎo)航，輕松解決瀏覽器兼容性問題。
一、打開網(wǎng)站編輯軟件Dream veaver建立一個(gè)名稱為“導(dǎo)航制作”的站點(diǎn)
分別創(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)用的樣式是一個(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)簽部分，每對(duì)是一個(gè)列表項(xiàng)，這里七個(gè)列表，代碼如下：
三、打開nav.css 進(jìn)行導(dǎo)航樣式控制
整個(gè)導(dǎo)航樣式表如下:
四、對(duì)導(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;純?cè)诓患嫒轂g覽器的問題。
position:relative;定義了外殼DIV定位方式為相對(duì)定位，left:50%;聲明了DIV左側(cè)位置坐標(biāo)是相對(duì)于它父級(jí)的50%，本實(shí)例中導(dǎo)航外殼的父級(jí)是body,所以整個(gè)導(dǎo)航是水平居于頁面中間的，如果導(dǎo)航外殼的父級(jí)是DIV標(biāo)簽，那么整個(gè)導(dǎo)航會(huì)相對(duì)于這個(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ì)師對(duì)于這一點(diǎn)很不理解,其實(shí)這是我們對(duì)HTML標(biāo)簽的盒子模型理解存在誤區(qū)。HTML語言 (超文本傳輸語言)內(nèi)部標(biāo)簽大家都很熟悉，
