您的位置：首页 > Web前端 > CSS

第6章 对列表应用样式和创建导航条

2015-11-17 00:13 871 查看
1 垂直列表





<style type="text/css">
ul.nav {
margin: 0;
padding: 0;
width: 8em;
list-style-type: none;
background-color: #8BD400;
border: 1px solid #486B02;
}

ul.nav a {display: block;
color: #2B3f00;
text-decoration: none;
border-top:1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
background: url(/img/arrow.gif) no-repeat 5% 50%;
padding:0.3em 1em;
}
ul.nav li {
display: inline: /*ie6 为列表上下添加了额外空间 :KLUDGE: Removes large gaps in IE/Win */
}

ul.nav .last a{
border-bottom: 0;}/*底边与外边框重合会形成双边*/

ul.nav a:hover,
ul.nav a:focus,
ul.nav .selected a {
color: #E4FFD3;
background-color: #6DA203;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href = "">列表1</a></li>
<li><a href = "">列表2</a></li>
<li><a href = "">列表3</a></li>
<li><a href = "">列表4</a></li>
<li class = "last"><a href = "">列表5</a></li>
</ul>
</body>


2 简单的水平导航条



<style type="text/css">
ol.nav {
margin: 0;
padding: 0;
list-style-type: none;
}
ol.nav li{
float:left;
margin-right: 0.6em;
}
ol.nav a,
ol.nav li.selected {
display:block;
text-decoration: none;
border :1px solid black;
padding:0.2em 0.5em;
}

ol.nav a:hover,
ol.nav a:focus,
ol.nav li.selected {
color: white;
background-color: blue;
}

/*通过属性选择器寻找rel属性，先清除两端的边框，然后通过：before和:after伪类选择器以及content属性添加两端样式，也可以直接在HTML中添加*/
ol.nav a[rel="prev"],
ol.nav a[rel="next"]{
border:none;}

ol.nav a[rel="prev"]:before {
content: "\00AB";
padding-right: 0.5em;
}
ol.nav a[rel="next"]:after{
margin-left:o.5em;
content:"\00BB"
}

</style>
</head>

<body>
<ol class="nav">
<li><a href = "" rel = "prev">上一页</a></li>
<li><a href = "">1</a></li>
<li class = "selected">2</li>
<li><a href = "">3</a></li>
<li><a href = "">4</a></li>
<li><a href = ""  rel="next">下一页</a></li>
</ol>
</body>


3 图形化导航条



<style type="text/css">
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width:72em;
background: #FAA819 url(img/mainNavBg.gif) repeat-x;/*使用重复的桔红色渐变作为背景*/
overflow:hidden;/*元素浮动，脱离文档流，父列表由于没有内容而收缩导致看不到背景，第3章中三种方法清除浮动*/

}
ul.nav li{
float:left;
}
ul.nav a{
display:block;/*经常忘写*/
padding: 0 3em;/*直接设置宽高可能导致可维护性问题，因此通过设置内边距，让按钮宽度由锚文本的宽度决定*/
line-height: 2.1em;/*使链接文本垂直居中*/
text-decoration:none;
color:#fff;
background: url(img/divider.gif) repeat-y left top;/*创建分割线，也可以通过设置水平边框实现*/
}
ul.nav .first a{
background-image:none;}/*删除第一个链接上多余的分割线*/

ul.nav a:hover,
ul.nav a:focus {
culor: #333;
}

</style>
</head>

<body>
<ul class="nav">
<li class="first"><a href = "">HOME</a></li>
<li><a href = "">ABOUT</a></li>
<li><a href = "">NEWS</a></li>
<li><a href = "">SERVICES</a></li>
<li ><a href = "">CLIENTS</a></li>
</ul>
</body>


4 简化的“滑动门”标签页导航



<style type="text/css">
ul.nav {
margin: 0;
padding: 0;
list-style-type: none;
width:72em;
overflow:hidden;/*元素浮动，脱离文档流，父列表由于没有内容而收缩导致看不到背景，第3章中三种方法清除浮动*/

}
ul.nav li{
float:left;
background: url(img/tab-right.gif) no-repeat top right;/*将组成标签页的两个图像中较大的作为背景图像应用于
列表项，形成右边缘，所以定位在右边.*/
}
ul.nav a{
display:block;/*经常忘写*/
padding: 0 2em;/*直接设置宽高可能导致可维护性问题，因此通过设置内边距，让按钮宽度由锚文本的宽度决定*/
line-height: 2.1em;/*使链接文本垂直居中*/
text-decoration:none;
color:#fff;
background: url(img/tab-left.gif) no-repeat left top;/*标签页的宽度有内容决定，这个图像总是覆盖在大图像的左边硬边缘上*/
float:left;/*为了在mac 上ie5.2中有效，让锚浮动*/
}

ul.nav a:hover,
ul.nav a:focus {
culor: #333;
}

</style>
</head>

<body>
<ul class="nav">
<li class="first"><a href = "">HOME</a></li>
<li><a href = "">ABOUT</a></li>
<li><a href = "">NEWS</a></li>
<li><a href = "">SERVICES</a></li>
<li ><a href = "">CLIENTS</a></li>
</ul>
</body>


5 Suckerfish 下拉菜单

　　


<style type="text/css">
ul.nav,ul.nav ul{
margin: 0;
padding: 0;
list-style-type: none;
float:left;/*清除浮动?????*/
border: 1px solid #486B02;
background-color: #8BD400;
}
ul.nav li{
float:left;
width:8em;/*为确保下拉菜单中的菜单项垂直对齐，需要把列表的宽度设置为与列表项相同*/
}

ul.nav li ul{
width:8em;
position:absolute;/*为了在激活前隐藏下拉菜单，需要将其绝对定位并隐藏到屏幕左边之外*/
left:-999em;
margin-left: -1px;/*???*/
}
.nav li:hover ul{
left:auto;
}/*在父列表项添加鼠标悬停伪选择器，将下拉 菜单改为正确位置。但是，因为IE老版本不支
持在非锚元素上使用:hover伪类，所以需要使用js或.htc启用此功能*/

ul.nav a{
display:block;/*经常忘写*/
padding: 0.3em 1em;
text-decoration:none;
color:#fff;
border-right: 1px solid #486B02;
border-left: 1px solid #E4FFD3;
}
ul.nav li li a {
border-top: 1px solid #E4FFD3;
border-bottom: 1px solid #486B02;
border-left: 0;
border-right: 0;
}
/*移除多余边*/
ul.nav li:last-child a {
border-right: 0;
border-bottom: 0;}

ul a:hover,
ul a:focus {
culor: #333;
background-color: #6DA203;
}

</style>
</head>

<body>
<ul class="nav">
<li><a href = "">HOME</a></li>
<li><a href = "">NEWS</a>
<ul>
<li><a href="">Design</a></li>
<li><a href="">Development</a></li>
<li><a href="">Consultancy</a></li>
</ul>
</li>
<li><a href = "">SERVICES</a>
<ul>
<li><a href="">Design</a></li>
<li><a href="">Development</a></li>
<li><a href="">Consultancy</a></li>
</ul>
</li>
<li ><a href = "">CLIENTS</a></li>
</ul>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航