我们平时做导航栏,在两个超链接中有一条小竖线,该怎么实现呢,讲三种方法:
html样式
<div>
<a href="#">首页</a>
<a href="#">网站导航</a>
<a href="#">教育网</a>
<a href="#" class="last">English</a>
</div>
第一种:边框实现法
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 40px;
background: #999;
}
a {
text-decoration: none;
color: #000;
float: left;
padding: 0 10px;
font-size: 12px;
border-right: 1px solid #000;
margin-top: 10px;
}
.last {
border-right: none;
}
</style>
第二种:背景图片实现法
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 40px;
background: #999;
font-size: 12px;
line-height: 40px;
}
a {
text-decoration: none;
color: #000;
float: left;
padding: 0 10px;
background: url(line.jpg) no-repeat right center;
}
.last {
background: none;
}
</style>
这种方法就没有那么多margin,padding 了
第三种:手写实现法
html样式
<div>
<a href="#">首页</a>
<span>|</span>
<a href="#">网站导航</a>
<span>|</span>
<a href="#">教育网</a>
<span>|</span>
<a href="#" class="last">English</a>
</div>
CSS样式
<style>
* {
margin: 0;
padding: 0;
}
div {
height: 40px;
background: #999;
font-size: 12px;
line-height: 40px;
}
a {
text-decoration: none;
color: #000;
float: left;
padding: 0 10px;
}
span {
float: left;
}
</style>