04-07、列表标签 ul+ol/li
概述
列表标签：无序列表ul+li、有序列表ol+li和定义列表 dl dt dd 三种，在网页制作中应用非常广泛，列表就是信息资源的一种展示形式。
特点：
- 它们都是块元素，可以受到宽度，高度，内外间距的影响，独占文档流
- 列表标签元素可以嵌套：块元素（div,p,h1~h6,自身ul li ），也可以嵌套行内元素(strong,a，span,em ,i) ，图片，表单等等。
无序列表 ul+li：
- ul - 英文全称是：un + ordered list 意思是：不排序的列表
- li - 英文全称是：list item 意思是：列表项
- 无序默认情况下是：一个圆点
- 如果要更改ul的显示规则，可以考虑使用list-style修改即可。
<ul><li>列表</li><li>列表</li><li>列表</li>
</ul
有序列表 ol+li：
- ol英文全称是：ordered list 意思是：排序的列表
- li - 英文全称是：list item 意思是：列表项
- 有序默认情况下是：一个数字
- 如果要更改ol的显示规则，可以考虑使用list-style修改即可。
<ol><li>列表</li><li>列表</li><li>列表</li>
</ol>
代码
demo13.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签学习-ul/ol/li</title><style>ul{list-style: disc;}</style>
</head>
<body><!--无序的列表--><ul><li>IT·互联网前端开发·Java开发<ul><li>IT·互联网前端开发·Java开发<ul><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li></ul> </li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li></ul></li><li>设计·创作平面设计·室内设计</li><li>考试·考证公务员·教师考试</li></ul><!--有序的列表--><ol><li>IT·互联网前端开发·Java开发<ul><li>IT·互联网前端开发·Java开发<ul><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li></ul> </li><li>IT·互联网前端开发·Java开发</li><li>IT·互联网前端开发·Java开发</li></ul></li><li>设计·创作平面设计·室内设计</li><li>考试·考证公务员·教师考试</li></ol></body>
</html>
注意
- li 不能脱离ul和ol单独使用
场景
- 网站的菜单https://www.kuangstudy.com/course?cid=4
- 小米商城：https://www.mi.com/shop
- 当然我们的MD中也是使用ul/li来实现的
布置作业：去了解：dd / dt / dl
demo1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0; margin: 0;}/* 可视区域 div盒子设置宽度 */.container{width: 2960px;margin: 0 auto;background:#eee;padding: 30px; margin-bottom: 20px;}/* .mark{border: 2px solid #000;background: red; color: #fff;} *//* 去掉小圆点 */ul{list-style: none;}</style>
</head>
<body><div class="header"><div class="container"> 头部</div></div><!-- 可以统一样式 整体影响局部--><div class="mainbox"><div class="container"><div class="bannerbox"><ul class="banner-items"><!-- a连接是行内元素 img是行内块元素 --><li class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></li><li class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></li><li class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></li><li class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></li><li class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></li></ul><!-- a连接是行内元素 img是行内块元素 --><!-- <div class="banner-items"><div class="banner-item"><a href="" title="UI中国" target="_blank"><img src="img/1717124335_677.webp" alt=""></a></div><div class="banner-item"><a href="" title="UI中国" target="_blank"><img style="display: none;" src="img/1717124335_677.webp" alt=""></a></div><div class="banner-item"><a href="" title="UI中国" target="_blank"><img style="display: none;" src="img/1717124335_677.webp" alt=""></a></div></div> --></div><div class="content-nav">内容导航</div><div class="section">内容块</div><div class="pagaination">分页块</div><div class="hot-box">热门板块</div><div class="content-nav">内容导航</div><div class="article">文章板块</div><div class="brand">品牌合作</div></div></div><div class="footer"><div class="container">底部</div></div>
</body>
</html>
demo2—无序列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding:0;margin:0;}/* 可视区域 div盒子设置宽度 */.container{width: 2960px;margin: 0 auto;background:#eee;padding: 30px; margin-bottom: 20px;}/* .mark{border: 2px solid #000;background: red; color: #fff;} */ul>li>ul{margin-left: 20px;}</style>
</head>
<body><div class="container"><h4>Tree树</h4><ul><li><h3>Level One</h3><ul><li><h3>Level One</h3><ul><li><h3>Level One</h3></li><li><h3>Level One</h3></li> </ul></li><li><h3>Level One</h3></li><li><h3>Level One</h3></li></ul></li><li><h3>Level Two</h3><ul><li><h3>Level One</h3></li><li><h3>Level One</h3></li></ul></li><li><h3>Level Three</h3><ul><li>Level Three</li><li>Level Three</li><li>Level Three</li></ul></li></ul></div>
</body>
</html>
