无序列表和有序列表

一 把无序列表的修饰符改成任意的样子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>把无序列表的修饰符改成任意的样子</title>
		<style type="text/css">
			ul,li{
				list-style-image:url(img/sun.png) ;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>晴</li>
			<li>少云</li>
			<li>多云</li>
			<li>下雨</li>
		</ul>
	</body>
</html>

二 把有序列表换成带括号的样子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>把有序列表换成带括号的样子</title>
		<style type="text/css">
			.custom-list {
				list-style: none;
				/* 移除默认的列表样式 */
				counter-reset: my-counter;
				/* 初始化计数器 */
			}
			
			.custom-list li {
				counter-increment: my-counter;
				/* 每次出现li时增加计数器 */
			}
			
			.custom-list li:before {
				content: "(" counter(my-counter) ")";
				/* 设置内容为计数器，并加上括号 */
				margin-right: 5px;
				/* 可选：在编号和文本之间添加一些空间 */
			}
		</style>
	</head>

	<body>
		<ol class='custom-list'>
			<li>了解表单元素的定义</li>
			<li>掌握语义化表单的制作</li>
			<li>了解HTML5属性初步验证表单的功能</li>
		</ol>
	</body>

</html>
posted @ 2026-07-07 08:55  碰一下猫猫头  阅读(12)  评论(0)    收藏  举报