css教程
首页 html教程 css教程 关于
和链接一样,列表也是文本,也可以进行和文本一样的设置
但是,列表标记有不同的类型

系统默认的标记

我们可以通过属性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