简单的水平导航条
要创建一个简单的水平导航条,首先需要借助<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》一书)