在进行对网页的布局时,页头的存在于大部分网页而言都是必不可少的,且一般而言,都会有“设为首页”,“加入收藏”,“联系我们”等三个链接。当然,页头的链接部分并不局限于这些文字,在这里我仅仅是举个例子,作为参考。
当编写要实现这部分功能的代码时,众所周知,用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;
}
效果图如下: