首页 > 代码库 > 简单的水平导航条

简单的水平导航条

2024-08-04 05:47:32   216人阅读

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

简单的水平导航条


联系
我们