css中有关列表的一些知识点（摘录自css那些事儿）

最新推荐文章于 2023-12-23 17:52:23 发布

aa45145

最新推荐文章于 2023-12-23 17:52:23 发布

阅读量100

点赞数

原文链接：http://www.cnblogs.com/grapefruitskin/p/5265429.html

版权

1.列表比较简单，但是对于初学者来说还是有些小的错误需要注意

错误一：ul标签与li标签之间插入了其他的标签

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <div>错误的无序列表嵌套结构</div>
</ul>

需要将div标签放到ul标签的外面或者删除

错误二：多层ul标签嵌套时的错误

<ul>
   <li>错误的无序列表嵌套结构</li>
   <ul>
       <li>错误的无序列表</li>
   </ul>
</ul>

应该将ul标签放在li标签里面

<ul>
     <li>
          多层ul标签嵌套时
       <ul>
           <li>ul标签应该放在li标签之间</li>
        </ul>
      </li>
</ul>

2.列表修饰符，涉及到列表修饰符的属性有三个

list-style-image:设置列表当前修饰用的图像

<style>
      li {list-style-image: url("img/music.gif");}
</style>

<ul>
      <li>list-style-image作用的列表</li>
</ul>

效果如下：

提示：list-style-image在某些情况下对位置的控制不如background-image灵活，因此后一种使用较多

list-style-position 用于设置列表修饰的位置，其属性值只能从固定的两个关键词属性值中选择一个，分别是outside和inside。其中outside：默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。inside列表项目标记放置在文本以内，且环绕文本根据标记对齐。

<style type="text/css">
li {
    list-style-image:url("images/music.gif"); /* 设置列表的修饰符为一个ICO图标 */
}
li.li_position_in {
    list-style-position:inside; /* 将列表的修饰符定义在列表之内 */
}
li.li_position_out {
    list-style-position:outside; /* 将列表的修饰符定义在列表的外围 */
}
</style>
<title>list-style-position示例</title>
</head>

<body>
<ul>
    <li>默认的list-style-position中修饰图的位置</li>
    <li class="li_position_in">在列表内的list-style-position中修饰图的位置</li>
    <li class="li_position_out">在列表外的list-style-position中修饰图的位置</li>
</ul>
</body>

效果如下：

list-style-type属性主要用于设置列表的修饰符的类型，当list-style-image属性的属性值为none或者url地址不正确时，该属性将会对列表产生作用。常见属性值有一下几种

dis：默认值，实心圆

circle：空心圆

square：实心方块

decimal：阿拉伯数字

lower-roman:小写罗马数字

upper-roman:大写罗马数字

lower-alpha:小写英文字母

upper-alpha:大写英文字母

none:不使用项目符号

转载于:https://www.cnblogs.com/grapefruitskin/p/5265429.html

aa45145

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中有关列表的一些知识点（摘录自css那些事儿）

1.列表比较简单，但是对于初学者来说还是有些小的错误需要注意错误一：ul标签与li标签之间插入了其他的标签<ul> <li>无序列表</li> <li>无序列表</li> <div>错误的无序列表嵌套结构</div></ul>需要将...
复制链接

扫一扫