码迷,mamicode.com
首页 > 其他好文 > 详细

简单的水平导航条

时间:2014-11-25 08:12:31      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   使用   sp   for   

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

这个时候,一个简单的水平导航条大功告成,来看看效果:bubuko.com,布布扣

(声明:示例出自于《精通CSS》一书)

简单的水平导航条

标签:style   blog   http   io   ar   color   使用   sp   for   

原文地址:http://www.cnblogs.com/fanyj/p/4120103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!