亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css 等寬導(dǎo)航欄設(shè)計(jì)技巧

  發(fā)布時(shí)間：2009-12-28 14:35:30   作者：佚名   我要評(píng)論
隨著寬屏顯示器的流行，越來越多的網(wǎng)站采用了動(dòng)態(tài)寬度的設(shè)計(jì)，以求頁(yè)面在寬屏顯示器上保持美觀（960px的網(wǎng)頁(yè)在23寸的顯示器上只有半個(gè)屏幕的寬度）。動(dòng)態(tài)寬度的框架設(shè)計(jì)比較復(fù)雜，今天只說說和屏幕等寬的導(dǎo)航欄的設(shè)計(jì)。
等寬導(dǎo)航欄(我不知道這個(gè)名稱合不合適，知道的朋友指點(diǎn)一下)的設(shè)計(jì)一般要遵守以下兩個(gè)要素：
1.導(dǎo)航欄的背景和頁(yè)面的最大寬度相等；
2.導(dǎo)航的內(nèi)容的位置在頁(yè)面主框架以內(nèi)（導(dǎo)航的內(nèi)容在主框架以外的話不好看，用戶體驗(yàn)也不好）。
文字看不懂的話，可以看下面這幅草圖。
等寬導(dǎo)航欄
先看看導(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%，以填充整個(gè)屏幕的寬度*/
float: left; /*左浮動(dòng)*/
margin: 0 0 1px 0; /*設(shè)置margin的關(guān)鍵是左右的值都為零*/
padding: 0;
background-color: #F7F7F7;
}
#navigation ul {
list-style: none; /*不顯示列表項(xiàng)前面的黑點(diǎn)*/
width: 800px; /*寬度必須和主框架的寬度相等*/
margin: 0 auto; /*整個(gè)列表居中*/
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)文章

最新評(píng)論