在設計導航欄時因為總的content寬度設定為70%,用了<ul><li>標簽來排列導航內容

.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>設置浮動

.meun ul li{
float:left;
}

再給每個<li>的class設置屬性

.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>標簽的width是100%，開始的時候也和linormal設置成16.7%，導致文字不能顯示全部，

.linormal a{
width:100%;
height:40px;
display:block;
color:#fff;
text-decoration:none;
}

再就是<a> 標簽的:hover屬性了

.linormal a:hover{
background: url(“../images/menu_bg.png”) repeat-x scroll 0px -40px transparent;
text-decoration: none;
color: rgb(255, 255, 255);
}

上面的代碼可以隨著瀏覽器窗口的大小進行相應的改變大小，因為是按照百分比來定的寬度，但隨著窗口的越來越小，導致導航欄的<li>中的寬度小于字體的寬度，字體

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

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

.wid {
width:1000px;
}

在HTML頁面內，調用方式為

<div id=”menu”>
<div class=”wid” >
…
</div>
</div>

這樣就調整了當改變窗口大小時，部分內容會在縮小的部分里看不到（這里表述不大清楚，大致意思是縮小窗口時，不會導致頁面容器相應的變小，而是只顯示一部分），這樣就不會出現頁面布局出現混亂的現象了。