在設(shè)計(jì)導(dǎo)航欄時(shí)因?yàn)榭偟腸ontent寬度設(shè)定為70%,用了<ul><li>標(biāo)簽來(lái)排列導(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;
}
給每個(gè),<li>設(shè)置浮動(dòng)
代碼如下:
.meun ul li{
float:left;
}
再給每個(gè)<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%，開始的時(shí)候也和linormal設(shè)置成16.7%，導(dǎo)致文字不能顯示全部，
代碼如下:
.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)槭前凑瞻俜直葋?lái)定的寬度，但隨著窗口的越來(lái)越小，導(dǎo)致導(dǎo)航欄的<li>中的寬度小于字體的寬度，字體
下浮，整個(gè)頁(yè)面完全亂了。
后來(lái)便在menu下面加了個(gè)寬度的id，命名為wid，即
代碼如下:
.wid {
width:1000px;
}
在html頁(yè)面內(nèi)，調(diào)用方式為
代碼如下:
<div id=menu>
<div class=wid >
...
</div>
</div>
這樣就調(diào)整了當(dāng)改變窗口大小時(shí)，部分內(nèi)容會(huì)在縮小的部分里看不到（這里表述不大清楚，大致意思是縮小窗口時(shí)，不會(huì)導(dǎo)致頁(yè)面容器相應(yīng)的變小，而是只顯示一部分），這樣就不會(huì)出現(xiàn)頁(yè)面布局出現(xiàn)混亂的現(xiàn)象了。