请选择 进入手机版 | 继续访问电脑版
网络

教育改变生活

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 4448|回复: 0

CSS基础-17 列表

[复制链接]

403

主题

404

帖子

1649

积分

版主

Rank: 7Rank: 7Rank: 7

积分
1649
发表于 2023-11-17 08:20:41 | 显示全部楼层 |阅读模式
CSS 列表
无序列表:
o Coffee
o Tea
o Coca Cola
§Coffee
§Tea
§Coca Cola
有序列表:
1.  Coffee
2.  Tea
3.  Coca Cola
       I.    Coffee
     II.    Tea
    III.    Coca Cola
HTML 列表和 CSS 列表属性
在 HTML 中,列表主要有两种类型:
·  无序列表(<ul>)- 列表项用的是项目符号标记
·  有序列表(<ol>)- 列表项用的是数字或字母标记
CSS 列表属性使您可以:
·  为有序列表设置不同的列表项标记
·  为无序列表设置不同的列表项标记
·  将图像设置为列表项标记
·  为列表和列表项添加背景色
不同的列表项目标记
list-style-type 属性指定列表项标记的类型。
下例显示了一些可用的列表项标记:
实例
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

注释:有些值用于无序列表,而有些值用于有序列表。
图像作为列表项标记
list-style-image 属性将图像指定为列表项标记:
实例
ul {
list-style-image: url('sqpurple.gif');
}

定位列表项标记
list-style-position 属性指定列表项标记(项目符号)的位置。
"list-style-position: outside;" 表示项目符号点将在列表项之外。列表项每行的开头将垂直对齐。这是默认的:
·  Coffee - 用烘焙过的咖啡豆制成的冲泡饮料

·  Tea
·  Coca-cola

"list-style-position:inside;" 表示项目符号将在列表项内。由于它是列表项的一部分,因此它将成为文本的一部分,并在开头推开文本:
·  Coffee - 用烘焙过的咖啡豆制成的冲泡饮料

·  Tea
·  Coca-cola

实例
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}

删除默认设置
list-style-type:none 属性也可以用于删除标记/项目符号。请注意,列表还拥有默认的外边距和内边距。要删除此内容,请在 <ul> 或 <ol> 中添加 margin:0 和 padding:0 :
实例
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

列表 - 简写属性
list-style 属性是一种简写属性。它用于在一条声明中设置所有列表属性:
实例
ul {
list-style: square inside url("sqpurple.gif");
}

在使用简写属性时,属性值的顺序为:
·  list-style-type(如果指定了 list-style-image,那么在由于某种原因而无法显示图像时,会显示这个属性的值)
·  list-style-position(指定列表项标记应显示在内容流的内部还是外部)
·  list-style-image(将图像指定为列表项标记)
如果缺少上述属性值之一,则将插入缺失属性的默认值(如果有)。
设置列表的颜色样式
我们还可以使用颜色设置列表样式,使它们看起来更有趣。
添加到 <ol> 或 <ul> 标记的任何样式都会影响整个列表,而添加到 <li> 标记的属性将影响各个列表项:
实例
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}

结果:
1.  Coffee
2.  Tea
3.  Coca Cola
·  Coffee
·  Tea
·  Coca Cola
所有 CSS 列表属性
  
属性
  
描述
简写属性。在一条声明中设置列表的所有属性。
指定图像作为列表项标记。
规定列表项标记(项目符号)的位置。
规定列表项标记的类型。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

WEB前端

QQ|手机版|小黑屋|金桨网|助学堂  咨询请联系站长。

GMT+8, 2024-11-7 21:01 , Processed in 0.035913 second(s), 22 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表