在设计导航栏时因为总的content宽度设定为70%,用了

• 标签来排列导航内容

  代码如下:

  .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;

  }

  给每个,

• 设置浮动

  代码如下:

  .meun ul li{

  float:left;

  }

  再给每个

• 的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下的标签的width是100%，开始的时候也和linormal设置成16.7%，导致文字不能显示全部，

  代码如下:

  .linormal a{

  width:100%;

  height:40px;

  display:block;

  color:#fff;

  text-decoration:none;

  }

  再就是 标签的:hover属性了

  代码如下:

  .linormal a:hover{

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

  text-decoration: none;

  color: rgb(255, 255, 255);

  }

  上面的代码可以随着浏览器窗口的大小进行相应的改变大小，因为是按照百分比来定的宽度，但随着窗口的越来越小，导致导航栏的

• 中的宽度小于字体的宽度，字体

  下浮，整个页面完全乱了。

  后来便在menu下面加了个宽度的id，命名为wid，即

  代码如下:

  .wid {

  width:1000px;

  }

  在html页面内，调用方式为

  代码如下:

  ...

  这样就调整了当改变窗口大小时，部分内容会在缩小的部分里看不到（这里表述不大清楚，大致意思是缩小窗口时，不会导致页面容器相应的变小，而是只显示一部分），这样就不会出现页面布局出现混乱的现象了。