                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

使用ol li,如何给序号添加样式

比如，当当网图书排行，如何给序号添加样式，例如背景色等

慕粉3141093

2016-04-27

源自：初识HTML(5)+CSS(3)-升级版 5-8

关注问题我要回答

12913

操作

收起

11 回答

weibo_不一样的烟火luck_0 回答被采纳 +3 积分
2016-04-27

<html>
<head>
<title>给有序列表序号添加样式</title>
<style type="text/css">
/* list 1 style */
#list1 {
	font: italic 1em Georgia, Times, serif;
	color: #999999;
}
/* list 2 styles */
#list2 {
	font: normal 1.1em Arial, Helvetica, sans-serif;
	color: #666;
}
#list2 p {
	font: normal .7em Arial, Helvetica, sans-serif;
	color: #000;
}
</style>
</head>
<body>
<ol id="list1">
	<li>书</li>
	<li>书书</li>
	<li>书书书</li>
</ol>
<ol id="list2">
	<li>
	    <p>书</p>
	</li>
	<li>
	    <p>书书</p>
	</li>
	<li>
	    <p>书书书</p>
	</li>
</ol>
</body>
</html>

0 回复有任何疑惑可以回复我~

收起回答

慕粉3141093 提问者

非常感谢！

2016-07-03 回复有任何疑惑可以回复我~

_____Roddy
2017-10-25

这是要用雪碧图的制作方法或者用PS裁剪

0 回复有任何疑惑可以回复我~

收起回答

有鱼不卖
2017-09-13

请问老师们这样的怎么设置，就是数字的橙色的背景颜色且没有黑圆实点。哪位大神可以给解决一下，要交作业，谢谢！！

0 回复有任何疑惑可以回复我~

收起回答

小芳芳芳

同求？请问解决了吗？

2018-06-04 回复有任何疑惑可以回复我~

for__what
2017-09-09

怎么实现

蔬菜
水果
肉类
3.1猪肉
3.2牛肉
3.3羊肉
这种形式

0 回复有任何疑惑可以回复我~

收起回答

qq_马琪雅朵_03228231
2016-04-27

list-style-type:decimal;
list-style-position:inside;

给ol，下面的li添加上上面的两个样式，就可以解决您的问题了！

0 回复有任何疑惑可以回复我~

收起回答

吉er
2016-04-27

不好意思，背景颜色应该是li{

background-color:red;

}

0 回复有任何疑惑可以回复我~

收起回答

吉er
2016-04-27

想要哪个部分有效果，就对那个标签设置CSS样式，具体设置样式的代码参数见楼上，但是针对你说的给序号添加样式背景颜色的样式，有两种方式：1、给li标签里的内容加一个<span></span>的标签，然后对span标签进行样式设置，好处是可以对不同的序号进行不同的设置；2、直接对li进行样式设置，如li{color:red;}，这样的话所有的li的标签序号颜色都会变成红色。上述两种方法供参考。

0 回复有任何疑惑可以回复我~

收起回答