制作 web 页面列表

编程入门行业动态更新时间:2024-10-06 12:27:26

制作 web <a href=https://www.elefans.com/category/jswz/34/1771336.html style= 页面列表"/>

制作 web 页面列表

前言
1. 先定义好两个列表的属性
2. 无序列表（ul）
3. 有序列表（ol）
4. 自定义列表（dl）
完整代码如下所示
结束语

前言

想了解列表的属性可点击这里

1. 先定义好两个列表的属性

<style type="text/css">ul {/* 正方形 *//* list-style: square; *//* 数字 */list-style: decimal;}ol {/* 空心圆 *//* list-style: circle; *//* 小圆点 */list-style: disc;}</style>

2. 无序列表（ul）

<!-- 无序列表 （使用的频率高） --><p>有序列表</p><ul><li>比熊</li><li>柯基</li><li>迷你雪纳瑞</li><li>边牧</li><li>哈士奇</li><li>柴犬</li><li>金毛</li><li>阿拉斯加</li><li>苏格兰牧羊犬</li></ul>

效果如下所示：

3. 有序列表（ol）

<p>有序列表</p><!-- 有序列表 --><ol><li>苏格兰折耳猫</li><li>英国短毛猫</li><li>美国短毛猫</li><li>波斯猫</li><li>加菲猫</li><li>斯芬克斯猫</li><li>布偶猫</li><li>暹(xian)罗猫</li><li>狸花猫</li></ol>

效果如下所示：

4. 自定义列表（dl）

<p>自定义列表</p><!-- 自定义列表 --><dl><!-- 项目 --><dt>周杰伦</dt><!-- 项目描述 --><dd>东风破</dd><dd>霍元甲</dd><dd>七里香</dd><dd>明明就</dd><dt>林俊杰</dt><dd>江南</dd><dd>一千年以后</dd><dd>醉赤壁</dd><dd>交换余生</dd><dt>邓紫棋</dt><dd>画</dd><dd>泡沫</dd><dd>喜欢你</dd><dd>光年之外</dd></dl>

效果如下所示：

完整代码如下所示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul {/*正方形*//*list-style:sqware;*//*数字*/list-style: decimal;}ol {/*空心圆*//*list-style:circle;*//*小圆点*/list-style: disc;}</style></head><body><p>无序列表</p><!-- 有序列表 （使用的频率高） --><ul><li>比熊</li><li>柯基</li><li>迷你雪纳瑞</li><li>边牧</li><li>哈士奇</li><li>柴犬</li><li>金毛</li><li>阿拉斯加</li><li>苏格兰牧羊犬</li></ul><p>有序列表</p><!-- 有序列表 --><ol><li>苏格兰折耳猫</li><li>英国短毛猫</li><li>美国短毛猫</li><li>波斯猫</li><li>加菲猫</li><li>斯芬克斯猫</li><li>布偶猫</li><li>暹(xian)罗猫</li><li>狸花猫</li></ol><p>自定义列表</p><!-- 自定义列表 --><dl><!-- 项目 --><dt>周杰伦</dt><!-- 项目描述 --><dd>东风破</dd><dd>霍元甲</dd><dd>七里香</dd><dd>明明就</dd><dt>林俊杰</dt><dd>江南</dd><dd>一千年以后</dd><dd>醉赤壁</dd><dd>交换余生</dd><dt>邓紫棋</dt><dd>画</dd><dd>泡沫</dd><dd>喜欢你</dd><dd>光年之外</dd></dl></body>
</html>

效果如下所示：