Web开发基础-CSS-22

原创于 2018-07-07 18:30:57 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文通过一个简单的HTML示例展示了如何使用CSS来定制列表项的样式，包括使用罗马数字作为列表编号，并通过图片来定义列表项前的符号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS中列表样式

通过简单案例演示如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表样式</title>
		<style type="text/css">
			ol {
				list-style-type:upper-roman;
			}
			
			ul {
				list-style-type: square;
			}
			
			#sx {
				list-style-image:url("../images/add.png"); 
			/* 	list-style-image:url(../images/add.png); */

			}
		</style>
	</head>
	<body>
		<ol>
			<li>河北省</li>
			<li>河南省</li>
			<li>山东省</li>
			<li id="sx">山西省</li>
			<li>广东省</li>
			<li>广西省</li>
		</ol>
		<ul>
			<li>北京</li>
			<li>上海</li>
			<li>广州</li>
		</ul>
	</body>

</html>

最终页面效果：