在进行对网页的布局时，页头的存在于大部分网页而言都是必不可少的，且一般而言，都会有“设为首页”，“加入收藏”，“联系我们”等三个链接。当然，页头的链接部分并不局限于这些文字，在这里我仅仅是举个例子，作为参考。
当编写要实现这部分功能的代码时，众所周知，用HTML及CSS实现,它的一般代码形式如下:(这里只写出HTML及CSS部分)
<div class="top"> <ul> <li><a href="#">设为首页</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">联系我们</a></li> </ul> </div>
CSS部分:
*{
margin:0; padding:0; } .top{ width:100%; background:#999999; height:30px; } .top ul{ float:right; list-style:none; }
.top ul li{ float:right; margin-right:25px; }
这样写出的代码也可以实现我们所要的效果,它的效果图如下:
不难看出，它的“设为首页”和“联系我们”位置互换了，这是因为float:right,向右浮动的缘故，这时需要将它们互换位置，也就是HTML部分的代码改成以下形式：
<li><a href="#">联系我们</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">设为首页</a></li>
但是这样的方法在进行页面维护或是要进行修改的时候，并不是很方便，所以这里介绍另外的一种方法：
CSS部分改为如下：
*{
margin:0; padding:0; } .top{ width:100%; background:#999999; height:30px; } .top ul{ float:right; list-style:none; }
.top ul li{ display:inline-block; line-height:30px; margin-right:25px; }
效果图如下：
