要创建一个简单的水平导航条，首先需要借助<ol><li>标签创建有序列表。主题内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平到航条</title>
</head>
<body>
<ol>
<li><a href="#" rel="prev">Prev</a></li>
<li><a href="#"></a>1</li>
<li><a href="#" class="selected"></a>2</li>
<li><a href="#"></a>3</li>
<li><a href="#"></a>4</li>
<li><a href="#"></a>5</li>
<li><a href="#" rel="next">Next</a></li>
</ol>
</body>
</html>
然后对其使用样式，先进行页面初始化： *{margin: 0;padding: 0;list-style: none;}
然后对其浮动使其水平显示，并用外边距控制距离：
ol li{
float: left;
margin-left: 50px;
}
现在，开始设置图形样式，对其设置使其在未被选中时灰底黑字，被选中状态时蓝底白字：
ol a,
ol li.selected{
display: block;
padding:10px 15px;
border: 1px solid #CCC;
text-decoration: none;
}
ol a:hover,
ol a:focus,
ol li.selected{
background-color: blue;
color: white;
}
我希望prev和next的样式和页码的不一样，所以使用属性选择器寻找他们的rel属性，去掉其边框：
ol a[rel = "prev"],
ol a[rel = "next"]{
border:none;
}
为了使prev和next更具有指向性，我们决定用：before和：after伪选择器以及content属性：
ol a[rel = "prev"]:before{
content: "\00AB";
padding-right: 20px;
}
ol a[rel = "next"]:after{
content: "\00BB";
padding-left: 20px;
}
这个时候，一个简单的水平导航条大功告成，来看看效果：
（声明：示例出自于《精通CSS》一书）
时间： 2024-12-21 20:02:37