欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css 等寬導航欄設計技巧

  發(fā)布時間：2009-12-28 14:35:30   作者：佚名   我要評論
隨著寬屏顯示器的流行，越來越多的網(wǎng)站采用了動態(tài)寬度的設計，以求頁面在寬屏顯示器上保持美觀（960px的網(wǎng)頁在23寸的顯示器上只有半個屏幕的寬度）。動態(tài)寬度的框架設計比較復雜，今天只說說和屏幕等寬的導航欄的設計。
等寬導航欄(我不知道這個名稱合不合適，知道的朋友指點一下)的設計一般要遵守以下兩個要素：
1.導航欄的背景和頁面的最大寬度相等；
2.導航的內(nèi)容的位置在頁面主框架以內(nèi)（導航的內(nèi)容在主框架以外的話不好看，用戶體驗也不好）。
文字看不懂的話，可以看下面這幅草圖。
等寬導航欄
先看看導航欄的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)和一般的導航欄是完全一樣的，知道的朋友應該猜出了，真正起作用的是CSS。
CSS這樣寫。

復制代碼
代碼如下:

#navigation {
width: 100%; /*寬度為100%，以填充整個屏幕的寬度*/
float: left; /*左浮動*/
margin: 0 0 1px 0; /*設置margin的關鍵是左右的值都為零*/
padding: 0;
background-color: #F7F7F7;
}
#navigation ul {
list-style: none; /*不顯示列表項前面的黑點*/
width: 800px; /*寬度必須和主框架的寬度相等*/
margin: 0 auto; /*整個列表居中*/
padding: 0;
}
#navigation li {
float: left; /*使導航欄編程水平導航欄*/
}
#navigation li a {
display: block; /*把導航欄里的鏈接設置為塊元素*/
padding: 8px 15px;
text-decoration: none;
}

CSS的關鍵我已經(jīng)加上了注釋。

相關文章

最新評論