赞
踩
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的前边的有实心圆,空心圆,实心方块
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。