一、HTML实现有序排列
有序序列标签都是成组出现的
<ol>
<li>这是一号</li>
<li>这是2号</li>
<li>可以有很多li标签</li>
</ol>
在<ol>标签中,可以定义有序序列的样式。有序序列默认排列方式是数字序列,顺序排列。如下图所示:
如果想要修改这个有序序列的排序方式,可以直接在HTML中修改ol标签的样式。
在ol标签的头标签里,可以通过一下几个属性来更改样式:
1、type属性:
ol的属性type有五中值可以选择,默认为数字1(按数字排),还可以是a(按小写字母排),A(按大写字母排),i(大写I)表示罗马数字排
<ol type="a">
<li>这是一号</li>
<li>这是2号</li>
<li>可以有很多li标签</li>
</ol>
<ol type="A">
<li>这是一号</li>
<li>这是2号</li>
<li>可以有很多li标签</li>
</ol>
<ol type="i">
<li>这是一号</li>
<li>这是2号</li>
<li>可以有很多li标签</li>
</ol>
<ol type="I">
<li>这是一号</li>
<li>这是2号</li>
<li>可以有很多li标签</li>
</ol>
修改之后的样式变为:
以用字母排序为例,当<li>标签很多,超过26个时,他的排序序号会变成一下这样:
这样就可以无限的排下去了。
2、reversed属性
<ol>的默认排序是顺序排序,如果有特殊需求的话,可以将reversed属性的值改成:reversed,这个值表示倒序排序。
3、start属性
start属性表示排序序号从第几个开始,无论选用的是数字、字母还是罗马数字排序,想要从第几个开始排,就使用start属性,将其值设为你想要的的元素的位置即可。
例如想要从C开始排序,C在字母中排第三个,那么就设置start="3"
<ol type="a" reversed="reversed" start="7">
<li>
有序列表,li标签里面的东西有序展示
</li>
<li>
一号,自动出现序号
</li>
<li>
二号
</li>
</ol>
其他更多的样式,参考HTML手册,就不在这里说了。对于这些改变也可以用CSS来实现.
二、HTML的无序排列
无序排列也是通过一组标签来实现的
<ul>
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul>
与有序排序的区别就在于,无序排序前面没有排序序号,采用了小圆点或者其他图形来代替,如图所示:
而无序排列的可以更改的属性,主要就是type,用来更改前面的图标样式
type属性可以选用的值:disc表示实心圆(默认),square表示方块,circle表示圆圈,更多的值请参考HTML手册
一般而言,无序排序标签组相较于有序排序标签组使用的更多一些,并且通常的用处都是用来实现导航栏。通过在CSS中对其进行进一步修饰加工,就能变成我们日常在网页中看见的导航栏了。
无序排序实现导航栏
以实现淘宝的导航栏为例:
<!-- 淘宝的导航栏 -->
<div>
<ul class="nav">
<li class="content1">
<a href="https://www.tmall.com?spm=a21bo.2017.201859.1.5af911d9HiTKpW" target="_blank" >天猫</a>
</li>
<li class="content1">
<a href="https://ju.taobao.com/" target="_blank">聚划算</a>
</li>
<li class="content1">
<a href="https://chaoshi.tmall.com" target="_blank">天猫超市</a>
</li>
</ul>
</div>
CSS代码如下:
.nav{
list-style: none;
}
.content1{
height: 30px;
float: left;
margin:0 10px;
line-height: 30px;
}
通过在<ul>中设置list-style:none,将排序前面的图标去掉,在<li>中,设置浮动元素float:left,使所有的<li>标签都到同一行靠左排序。效果如图