html垂直线条导航条样式,css-常用导航条样式设置_html/css_WEB-ITnose

5268f80b9b1e01f982625ef6fac83ca1.png

html代码:

竖直导航

多肉植物

观花植物

观叶植物

草本植物

木本植物

水生植物

水平导航

形态特征

主要品种

生理特点

科属介绍

分布情况

生活习性

分页内容

上页

1

2

3

4

5

6

下页

css代码及注释:

/*参考精通css~*/

/*竖直导航*/

ul.sort

{

margin: 1px; /*外边距*/

padding: 1px; /*内边距*/

list-style-type: none; /*去掉默认的项目符号(项前面那个很丑的点点)*/

width: 8em;

background-color: #8BD400;

border: 1px solid #486B02;

}

ul.sort li

{

margin: 1px; /*外边距*/

background: url(img/arrow_state_blue_right.png) no-repeat 0% 50%;/*图片不重复;图片位置*/

padding-left:15px;/*文字左留白*/

border-top: 1px solid #E4FFD3;

border-bottom: 1px solid #486B02;

}

ul.sort a

{

display: block;/*这样对a的样式才会应用于整个li内容(包括后面的空白部分)*/

color: #2B3F00;

text-decoration: none; /*下划线*/

}

ul.sort a:hover,

ul.sort a:focus,

ul.sort .selected a

{

color: #E4FFD3;

background-color: #6DA203;

}

/*水平导航*/

ul.des

{

margin: 1px;

padding: 1px;

overflow: hidden;/*float时,不占用文档流中的任何空间,父列表实际没有内容会收缩*/

}

ul.des li

{

float: left;

padding-right: 0.5em; /*文字前后留白*/

padding-left: 0.5em;

background-color: #8BD400;

border: 1px solid #486B02;

}

ul.des a

{

display: block;

color: #2B3F00;

text-decoration: none; /*下划线*/

}

ul.des a:hover,

ul.des a:focus,

ul.des .selected a

{

color: #E4FFD3;

background-color: #6DA203;

}

/*水平导航(分页)*/

ol.pagination

{

margin: 1px; /*外边距*/

padding: 1px; /*内边距*/

}

ol.pagination li

{

float: left;

margin-right: 0.6em;

}

ol.pagination a

{

display: block;

padding: 0.2em 0.5em;

border: 1px solid #ccc;

text-decoration: none; /*下划线*/

}

ol.pagination a:hover,

ol.pagination a:focus

{

background-color: blue;

color: white;

}

/*去掉上页下页的边框 并添加格式*/

ol.pagination a[rel="prev"],

ol.pagination a[rel="next"]

{

border: none;

}

ol.pagination a[rel="prev"]:before

{

content: "\00AB";

padding-right: 0.5em;

}

ol.pagination a[rel="next"]:after

{

content: "\00BB";

padding-right: 0.5em;

}

1428d0e076c3959ab11d28a39bc84fab.png

5268f80b9b1e01f982625ef6fac83ca1.png

本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源:php中文网

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值