07：CSS设置列表样式

最新推荐文章于 2024-08-24 17:18:32 发布

布吉

最新推荐文章于 2024-08-24 17:18:32 发布

阅读量298

点赞数

分类专栏： CSS HTML 文章标签： CSS

本文链接：https://blog.csdn.net/fighting_0808/article/details/81782385

版权

HTML 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

本文介绍了HTML中列表的基本用法及CSS样式设置，包括有序列表(ol)、无序列表(ul)及其标号样式(list-style-type)，展示了如何使用不同的属性值如circle、disc和decimal来改变列表项的外观。

摘要由CSDN通过智能技术生成

1.有序列表(ol)和无序列表（ul）
list.html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>列表样式</title>
    <link href="box.css" type="text/css" rel="stylesheet">
</head>
<body>
   <div>
		<ul>
			<li>水果
              <ol>
             	<li>苹果</li>
             	<li>香蕉</li>
             	<li>梨子</li>
              </ol>
		    </li>
		</ul>
	</div>
</body>
</html>

2.列表标号样式list-style-type
属性值：
circle;空心圆
disc; 实心圆
decimal;数字
list.css

 ul>li{
	list-style-type:circle;
}
ul>li>ol>li{
	list-style-type:disc;
}

3.标号样式的显示方式list-style-position
属性值：outside(在文本之外,默认)
inside(和文本一起)
list.css

ul{
	text-align: center;
	list-style-position:outside;
}
ul>li{
	list-style-type:circle;
}
ul>li>ol>li{
	list-style-type:disc;
}

3定义列表

<dl>
    <dt><dt>
    <dd></dd>
</dl>

19:24 2018/8/17/周五

布吉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录