列表
1.列表是由具有一定顺序,排列而成的数据项的集合;
2.列表常见应用
a.列表呈现的信息整齐直观,适合于有规律的区域或栏目板块
如:资讯列表;图片展示(产品/商品);导航;
结构:外围的列表区+内部的列表项
列表的类型
a.无序列表<ul><li></li><ul>
b.有序列表 <ol><li></li></ol>
1.因为序列是带由顺序的,有设置排序的顺序和起始顺序的需求
start 数值(number)规定有序列表中的首个列表项的起始值;
reversed reversed 降序(反序)HTML5的新属性部分浏览器不支持(IE)
c.自定义列表<dl><dt></dt><dd></dd></dl>
列表的特点:
a.列表是具有固定的嵌套关系的标签组合;
b.有序和无序的区别在于“语义”上的不同,项目符合的呈现方式也不同;
c.有序和无序列表都只有一种列表项,自定义列表有两种;
d.所有的列表标签都是双标签,块状元素,是装载内容元素的"盒子";
e.列表可以多重嵌套,通过多种嵌套可以实现复杂的排版;
列表的css样式
列表的专属属性:
list-style是针对列表项目符号进行的专有的属性
list-style:复合属性
a.值的声明顺序 类型>定位>图像
list-type list-style-position>list-type
b.声明的时候可以忽略其中的某个值的设定;
c.如果同时定义了类型和图像,则图像优先;
list-type:设置列表符号类型
常见的值:disc:实心小圆点(无序列表的默认值)
decimal:数字(有序列表的默认值)
none:无(去除默认存在的项目符号)
可以实现有序和无序列表之间的视觉转换;
list-style-image:设置列表符合的自定义图像;
当项目符号类型不能满足设计需求时,可以通过该属性自定义引入图片作为项目符号表现;
值:url(图片路径)
弊端:无法精确的定义图片的位置
在实际的应用种并不常见;
list-style-position:设置列表符合的放置符合的位置;
项目符号隶属于每个列表项,所有list-style-position只能定义项目符号的位置时放置于列表项里面还是外面,无法精确的控制定位的距离;
inside:项目符号位于列表内部
outside:项目符号位于列表的外部(默认值)
实际应用中:
使用盒子模型属性来精确的控制列表
使用列表项的背景属性来模拟项目符号;
由于list-style 主要设置项目符号且无法精确控制,所有实际应用中并部建议使用list-style去实现样式效果;
实际应用技巧:
a.消除默认列表区域中的边距
ul,ol{padding:0}dd{margin:0}
ul和ol默认存在padding,dd默认存在margin;
b.消除默认列表项目符号
ul,ol{list-style:none;}
项目符号设置基于列表区和列表项,<ul>和 <ol>默认存在项目符号,<dl>没有;
使用背景属性模拟项目符号效果
项目符号隶属越列表项,背景属性需要附和给<li>,<dt>,<dd>
html 列表(ol,ul,dl)
最新推荐文章于 2023-03-03 19:25:57 发布