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