在設(shè)計(jì)導(dǎo)航欄時因?yàn)榭偟腸ontent寬度設(shè)定為70%,用了<ul><li>標(biāo)簽來排列導(dǎo)航內(nèi)容

代碼如下:

.meun ul{

width: 100%;

height: 40px;

font: bolder 18px/40px "微軟雅黑","微軟雅黑",Microsoft YaHei;

border: 1px solid rgb(206, 24, 0);

background: url(../images/menu_bg.png) repeat-x scroll 0px 0px transparent;

margin: 0px auto;

list-style:none outside none;

}

給每個,<li>設(shè)置浮動

代碼如下:

.meun ul li{

float:left;

}

再給每個<li>的class設(shè)置屬性

代碼如下:

.linormal{

width:16.7%;

height:40px;

text-align: center;

border-left:1px solid rgb(255, 164, 123);

border-right:1px solid rgb(221, 47, 0);

float: left;

}

linormal下的<a>標(biāo)簽的width是100%，開始的時候也和linormal設(shè)置成16.7%，導(dǎo)致文字不能顯示全部，

復(fù)制代碼代碼如下:

.linormal a{

width:100%;

height:40px;

display:block;

color:#fff;

text-decoration:none;

}

再就是<a> 標(biāo)簽的:hover屬性了

代碼如下:

.linormal a:hover{

background: url("../images/menu_bg.png") repeat-x scroll 0px -40px transparent;

text-decoration: none;

color: rgb(255, 255, 255);

}

上面的代碼可以隨著瀏覽器窗口的大小進(jìn)行相應(yīng)的改變大小，因?yàn)槭前凑瞻俜直葋矶ǖ膶挾?，但隨著窗口的越來越小，導(dǎo)致導(dǎo)航欄的<li>中的寬度小于字體的寬度，字體

下浮，整個頁面完全亂了。

后來便在menu下面加了個寬度的id，命名為wid，即

代碼如下:

.wid {

width:1000px;

}

在HTML頁面內(nèi)，調(diào)用方式為

復(fù)制代碼代碼如下:

<div id="menu">

<div class="wid" >

...

</div>

</div>

這樣就調(diào)整了當(dāng)改變窗口大小時，部分內(nèi)容會在縮小的部分里看不到（這里表述不大清楚，大致意思是縮小窗口時，不會導(dǎo)致頁面容器相應(yīng)的變小，而是只顯示一部分），這樣就不會出現(xiàn)頁面布局出現(xiàn)混亂的現(xiàn)象了。

更多信息請查看IT技術(shù)專欄