HTML之CSS列表&lt;二&gt;

SS列表属性作用有三类，这章介绍列表项标记为图像。

列表项标记为图像

（1）编辑代码

打开记事本，编写代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

例子解释：

ul:设置列表类型为没有列表项标记设置填充和边距0px（浏览器兼容性）
ul中所有li:设置图像的URL，并设置它只显示一次（无重复）您需要的定位图像位置（左0px和上下5px）用padding-left属性把文本置于列表中。

列表 -简写属性

在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

（1）编辑代码

打开记事本，编写代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

所有的CSS列表属性

SS列表属性作用如下：

设置不同的列表项标记为有序列表

同的列表项标记为无序列表

设置列表项标记为图像

列表

在HTML中，有两种类型的列表：

无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）

有序列表 - 列表项的标记有数字或字母

使用CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

无序列表

（1）编辑代码

打开记事本，编写代码，并保存为HTML格式文件。代码如下。

（2)在浏览器中浏览效果

在浏览器中浏览效果如图所示。

、HTML与XHTML的区别

（1）在XHTML 中标签名称必须小写，在HTML 中标签名称既可以小写也可以大写；

（2）在XHTML 中标签必须封闭，在HTML中标签可以不成对出现；

（3）在XHTML 中标签必须严格嵌套，HTML对标签嵌套没有严格规定；

（4）在XHTML 中属性名称必须小写，在HTML 中也一样；

（5）在XHTML 中标签必须用双引号引起来，HTML中可以不用；

二、特殊符号

表示空格；
"表示双引号；
&表示&符号；
>表示大于号>；
<表示小于号<；
&copy©表示版权符号©；

三、列表的使用

（1）无序列表

无序列表是一个项目列表，使用项目符号标记无序列表的项目，无序列表也就是没有顺序的列表；
无序列表的type属性取值有三种，分别是circle（圆圈）、disc（实心圆点）、square（方块）；

# 打印实心圆点的无序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

（2）有序列表

有序列表也是由一个个列表项组成，列表想既可以使用数字标记，也可以使用字母标记；
有序列表的type属性取值有5中，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）；

# 打印数字排序的有序列表

<body>
 <ol type="1">
 <li>我最爱椰奶</li>
 <li>第二爱可乐</li>
 <li>第三爱橙汁</li>
 </ol>
</body>

（3）定义列表

定义列表是当无序列表和有序列表都不适合时，通过自定义列表来完成自定义展示，所以定义列表不仅仅是一个项目列表，而是项目和注释的组合；

<body>
 <dl>
 <dt>春晓</dt>
 <dd>春眠不觉晓，处处闻啼鸟</dd>
 <dd>夜来风雨声，花落知多少</dd>
 </dl>
</body>

四、表格的使用

（1）表格的基本结构

单元格：表格的最小单位，一个或多个单元格纵横排列组成了表格；
行：一个或多个单元格横向堆叠形成了行；
列：一个或多个单元格纵向堆叠形成了列；

<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

（2）表格的对齐方式

align属性：left表示水平居左、center表示水平居中、right表示水平居右；
valign属性：top表示垂直置顶、middle表示垂直居中、bottom表示垂直靠底；

（3）表格的其他属性

th：一种特殊的单元格，加粗并居中；
caption：表格标题；
cellspacing：规定单元格之间的空间；
cellpadding：规定单元边沿与其内容之间的空白；
colspan：表格跨列；
rowspan：表格跨行；

在线咨询

上一篇：16.HTML 表单提交
下一篇：龙芯3A5000评测国产自主指令集架构实战

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML之CSS列表&amp;lt;二&amp;gt;

列表项标记为图像

列表 -简写属性

所有的CSS列表属性

不同的列表项标记

无序列表

您的项目需求

HTML之CSS列表<二>