标签：web style 序列表 list 列表 毛猫 所示
web 列表
前言
想了解列表的属性可点击这里
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>
效果如下所示：
结束语
若这篇文章有帮到你，给个赞，收个藏，欢迎大家留言评论；
若文章有错误，欢迎大家指教。
标签：web,style,序列表,list,列表,毛猫,所示 来源： https://blog.csdn.net/weixin_43960383/article/details/120408229
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。