HTML列表总结 xiuno建站日记

已认证 八彩五月 2021-4-22 1938

1.无序列表

名称 无序列表
标签
<ul><li>内容</li><li>内容</li><li>内容</li>...</ul>
属性 Type 设置列表项目符号样式 circle - 空心圆 square - 正方形 disc - 实心圆(默认)
描述 注意: 1. 列表项里面至少有一个li标签(至少1一个,可以写N个) 2. 写无序列表必须写ul 3. 内容必须写在li标签内 说明: 列表项目结构中没有先后顺序的列表,称之为:无序列表

注:

ul:代表标签的模块,范围

li:代表列表的每一项

ul标签的直接子元素必须是li标签,li标签是放置列表的容器,可以放任何东西

2.有序列表

名称 有序列表
标签
<ol><li>内容</li><li>内容</li><li>内容</li>...</ol>
属性 Type 设置列表项目编号样式: A,a - 设置项目编号为大小写英文字母 I,i - 设置项目编号为大小写罗马数字 1 - 设置项目编号为阿拉伯数字(默认)
描述 注意: 1. 至少有一个li标签 2. 内容必须写在li标签里 3. 写有序列表必须写ol标签 4. 设置项目编号样式为英文字母,超过26个字母,会以aa,ab,ac这样的规律递增 说明: 列表结构中有先后顺序并且可以设置项目编号为(1,2,3或者a、b、c)的列表,称之为:有序列表

 

3.自定义列表

名称 自定义列表
标签
<dl>
   <dt>标题</dt> 
   <dd>描述</dd>       
     .......  
</dl>
属性  
描述 注意: 1. 必须写一个dt但是可以不写dd;dt也可以写多个 2. Dd是针对于前面最近的一个dt的表述 3. 内容必须写在dt或者dd里面 说明: 不仅仅是一列项目,还是项目标题和项目描述/注释的组合

例子:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<dl>
		<dt>特色服务</dt>
		<dd>F 码通道</dd>
		<dd>礼物码</dd>
		<dd>防伪查询</dd>
	</dl>
</body>
</html>

效果:

4.列表属性

1.list-style-type

设置列表前缀样式,通常设置为none,去掉前缀  
语法:
list-style-type:none  ​

2.list-style-image

将列表前缀设置为自定义图片  
语法:
list-style-image:url(图片路径)  ​

应用场景:通常在网页中,使用的列表都是要去除前面的符号,并且去除左边和上边的空间,如下:
ul{
    list-style:none;
    padding:0;
    margin:0;
}
 
 
 

 xiuno建站一站式服务QQ:312215120
最新回复 (2)
  • 老爹 2021-4-27
    2

    我爱导航网xiuno建的站,问一下贴主 换链吗

    0
  • Ty66 2021-9-28
    3
    0
返回
首页
插件
搜索