和链接一样,列表也是文本,也可以进行和文本一样的设置
但是,列表标记有不同的类型
系统默认的标记
我们可以通过属性
list-style-type来修改
常用的值有:
- 无序列表:disc(实心圆)/circle(空心圆)/square(实心方块)
- 有序列表:decimal(阿拉伯数字)/upper-roman(大写罗马数字)/lower-roman(小写罗马数字)/upper-alpha(大写英文字母)/lower-alpha(小写英文字母)/lower-greek(小写希腊字母,没有大写,我也不知道为啥)
我列举的只是常用的,还有一些奇奇怪怪的,比如日文片假名,传统的希伯来编号,传统的亚美尼亚……
另外,关于字母多说一嘴,如果列表长度超过了所有字母的个数,就会像Excle那样,两个字母组合,再三个字母组合……
自定义标记图像
如果你不想用系统的标记,就可以使用自己的图片
格式是:list-style-image:url('...');
在单引号中输入图片的文件名即可
列表标记的位置
分里面和外面,属性设置是:
list-style-position:inside/outside
如果你自己尝试,会发现好像除了距离左端的位置变了以外,好像没啥区别
是的,这样看确实没啥差别,所以我们需要加一些css设置:
li.a{
border-style:solid;
border-width:3px;
}
这两句话是设置边框的意思,我们稍后会提到,你可以先不理解
接下来,在html中写上:
<
ul class="inside">
<
li class="a">apple<
/li>
<
li class="a">banana<
/li>
<
li class="a">orange<
/li>
<
/ul>
<
ul class="outside">
<
li class="a">apple<
/li>
<
li class="a">banana<
/li>
<
li class="a">orange<
/li>
<
/ul>
然后运行结果就是:
例子连接
看出来了吗?
是的,inside和outside的区别就是是否在后面的“文本框”内
列表设置的简写
列表的特殊设置就只有这三个了,一样可以简写:list-style:list-style-type list-style-position list-style-image