html中ul和ol的用法详解

最新推荐文章于 2024-03-09 21:41:49 发布

逸然丶诺

最新推荐文章于 2024-03-09 21:41:49 发布

阅读量1.7w

点赞数 10

分类专栏： html

本文链接：https://blog.csdn.net/KevinSilent/article/details/95188685

版权

html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

ul和ol分别是无序列表和有序列表，下边是为了介绍ul和ol抓门写的一个小demo。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>测试ol和ul的区别和用法</title>
		<style>
			.ulBox{
				list-style: none;
				/*float:left;*/
			}
			.ulBox li{
				float: left;
				margin-left: 20px;
			}
			.olBOx {
				/*border: 2px solid red;*/
				float:left;
				margin-top: 60px;
				/*list-style: none;*/
			}
		</style>
	</head>
	<body>
		<!--<p style="float:left">下边是ul去掉前边的实心点的展示结果</p>-->
		<ul class="ulBox">
			<li>坚持坚持坚持</li>
			<li>坚持坚持坚持</li>
			<li>坚持坚持坚持</li>
			<li>坚持坚持坚持</li>
			<li>坚持坚持坚持</li>
			<li>坚持坚持坚持</li>
		</ul>
		<!--<p style="float:left">下边是ol的展示结果</p>-->
		<ol type="i" class="olBOx">
			<li>努力努力努力</li>
			<li>努力努力努力</li>
			<li>努力努力努力</li>
			<li>努力努力努力</li>
			<li>努力努力努力</li>
			<li>努力努力努力</li>
		</ol>
	</body>
</html>

下便是代码的运行结果：
在这里插入图片描述
注意点1：关于如何去掉ul前边的ul小圆点的问题是在style中设置的时候将它的list-style属性设置为none就可以了。
注意点2：调节ul和ol的type类型就可以设定对应的前边的序号值，ul中的序号类型有a，Ⅰ ，一，1等等，ol的前边的有实心圆，空心圆，实心方块

逸然丶诺

关注

10
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
html中ul和ol的用法详解

ul和ol分别是无序列表和有序列表，下边是为了介绍ul和ol抓门写的一个小demo。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>测试ol和ul的区别和用法</title> <style> .ulBox{ l...
复制链接

扫一扫

专栏目录