当前位置:   article > 正文

html中ul和ol的用法详解_html ul ol

html ul ol

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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/328727
推荐阅读
相关标签
  

闽ICP备14008679号