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