css 等寬導(dǎo)航欄設(shè)計技巧
發(fā)布時間：2009-12-28 14:35:30 作者：佚名 
我要評論
我要評論隨著寬屏顯示器的流行，越來越多的網(wǎng)站采用了動態(tài)寬度的設(shè)計，以求頁面在寬屏顯示器上保持美觀（960px的網(wǎng)頁在23寸的顯示器上只有半個屏幕的寬度）。動態(tài)寬度的框架設(shè)計比較復(fù)雜，今天只說說和屏幕等寬的導(dǎo)航欄的設(shè)計。
等寬導(dǎo)航欄(我不知道這個名稱合不合適，知道的朋友指點一下)的設(shè)計一般要遵守以下兩個要素：
1.導(dǎo)航欄的背景和頁面的最大寬度相等；
2.導(dǎo)航的內(nèi)容的位置在頁面主框架以內(nèi)（導(dǎo)航的內(nèi)容在主框架以外的話不好看，用戶體驗也不好）。
文字看不懂的話，可以看下面這幅草圖。
先看看導(dǎo)航欄的HTML代碼。
<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
從這里看出結(jié)構(gòu)和一般的導(dǎo)航欄是完全一樣的，知道的朋友應(yīng)該猜出了，真正起作用的是CSS。
CSS這樣寫。
#navigation {
width: 100%; /*寬度為100%，以填充整個屏幕的寬度*/
float: left; /*左浮動*/
margin: 0 0 1px 0; /*設(shè)置margin的關(guān)鍵是左右的值都為零*/
padding: 0;
background-color: #F7F7F7;
}
#navigation ul {
list-style: none; /*不顯示列表項前面的黑點*/
width: 800px; /*寬度必須和主框架的寬度相等*/
margin: 0 auto; /*整個列表居中*/
padding: 0;
}
#navigation li {
float: left; /*使導(dǎo)航欄編程水平導(dǎo)航欄*/
}
#navigation li a {
display: block; /*把導(dǎo)航欄里的鏈接設(shè)置為塊元素*/
padding: 8px 15px;
text-decoration: none;
}
CSS的關(guān)鍵我已經(jīng)加上了注釋。
1.導(dǎo)航欄的背景和頁面的最大寬度相等；
2.導(dǎo)航的內(nèi)容的位置在頁面主框架以內(nèi)（導(dǎo)航的內(nèi)容在主框架以外的話不好看，用戶體驗也不好）。
文字看不懂的話，可以看下面這幅草圖。
先看看導(dǎo)航欄的HTML代碼。
復(fù)制代碼
代碼如下:<div id="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>
</div>
從這里看出結(jié)構(gòu)和一般的導(dǎo)航欄是完全一樣的，知道的朋友應(yīng)該猜出了，真正起作用的是CSS。
CSS這樣寫。
復(fù)制代碼
代碼如下:#navigation {
width: 100%; /*寬度為100%，以填充整個屏幕的寬度*/
float: left; /*左浮動*/
margin: 0 0 1px 0; /*設(shè)置margin的關(guān)鍵是左右的值都為零*/
padding: 0;
background-color: #F7F7F7;
}
#navigation ul {
list-style: none; /*不顯示列表項前面的黑點*/
width: 800px; /*寬度必須和主框架的寬度相等*/
margin: 0 auto; /*整個列表居中*/
padding: 0;
}
#navigation li {
float: left; /*使導(dǎo)航欄編程水平導(dǎo)航欄*/
}
#navigation li a {
display: block; /*把導(dǎo)航欄里的鏈接設(shè)置為塊元素*/
padding: 8px 15px;
text-decoration: none;
}
CSS的關(guān)鍵我已經(jīng)加上了注釋。
相關(guān)文章
純CSS實現(xiàn)菜單、導(dǎo)航欄的3D翻轉(zhuǎn)動畫效果
隨著瀏覽器技術(shù)的進(jìn)步，CSS動畫技術(shù)已經(jīng)不是只那些簡單的淡入淡出效果或幻燈片效果，它們能做很多更強大的事情2014-04-23css控制列表與導(dǎo)航的制作(水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)
這篇文章主要介紹了css控制列表與導(dǎo)航的制作,包括水平導(dǎo)航條、垂直翻轉(zhuǎn)的列表、垂直導(dǎo)航欄、內(nèi)聯(lián)列表、列表樣式等制作方法,需要的朋友可以參考下2014-04-15純css實現(xiàn)的下拉導(dǎo)航欄附html結(jié)構(gòu)及css樣式
下拉導(dǎo)航欄想必大家并不陌生吧，在之前或許都是使用js或jquey之類的腳本來實現(xiàn)的，而如今，使用純css也可以實現(xiàn)了，下面是成功制作的示例，大家可以參考下2014-03-26
一款來自系統(tǒng)軟件管理模板的導(dǎo)航欄菜單css樣式2014-02-27css3與html5實現(xiàn)響應(yīng)式導(dǎo)航菜單(導(dǎo)航欄)效果分享
使用純CSS來實現(xiàn)的一個響應(yīng)式導(dǎo)航菜單，我們使用的是HTML5+CSS3技術(shù)，當(dāng)瀏覽器窗口變小或者使用手機瀏覽器訪問的時候，原本橫條菜單會收縮成一個下拉菜單，當(dāng)鼠標(biāo)滑向菜單2014-02-12- 個人感覺超好看的仿支付寶網(wǎng)站導(dǎo)航欄，橙色明色調(diào)，當(dāng)鼠標(biāo)移到菜單項的時候，菜單項的背景變?yōu)橄癜粹o一樣，操作體驗非常好。 用到的修飾性圖片資源比較多，因2009-05-15
這篇文章主要介紹了使用CSS制作立體導(dǎo)航欄的相關(guān)資料,需要的朋友可以參考下2017-10-16
