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>
文章评论