案例分析
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>练习</title>
<link rel="stylesheet" href="src\web.css">
<style>
*{
padding:0;
margin:0;
}
a{
text-decoration:none;
color:#fff;
}
.tb-promo{
position:relative;
margin:80px 43%;
}
.tb-promo img{
width:140px;
height:125px;
}
.promo-nav{
position:absolute;
bottom:10px;
left:50%;
bottom:15px;
margin-left:-35px;
width:70px;
height:13px;
background:rgba(255,255,255,.3);
border-radius:7px;
}
li{
list-style:none;
}
.promo-nav li{
float:left;
width:8px;
height:8px;
background-color:#fff;
border-radius:50%;
margin:3px;
}
.promo-nav .selected{
background-color:#ff5000;
}
</style>
</head>
<body>
<div class="tb-promo">
<img src="921/1.jpg">
<ul class="promo-nav">
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4a3b27fe14fb3fb7aa55dfe5cf6b3834.png)