1. 图片的定位
<style>
*{margin: 0px;padding: 0px;}
li{list-style: none;}
a{text-decoration: none; color: #000;}
#box1{
width: 100%;
height: 170px;
background: rgba(0,0,0,0.7);
}
#box1 .content{
margin: 0 auto;
margin: 0 66px 0 66px;
}
#box1 .content p{
font-size: 16px;
font-family: Arial;
color: #fff;
}
#box1 .content .banner ul{
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 15px;
}
#box1 .content .banner ul li a .tv{
display: block;
width: 210px;
height: 117px;
border-radius: 8px;
}
#box1 .content .banner ul li{
position: relative;
}
#box1 .content .banner ul li a .vip{
position: absolute;
left: 180px;
top: 0px;
}
#box1 .content .banner ul li a span{
font-size: 12px;
color: white;
position: absolute;
left: 140px;
top: 100px;
}
</style>
<div id="box1">
<div class="content">
<p>正在热播</p>
<div class="banner">
<ul>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
<li><a href="#"><img src="rebo.jpg" alt="热播剧" class = "tv"><img src="VIP.png" alt="" class = "vip"><span>更新至30集</span></a></li>
</ul>
</div>
</div>
</div>
2. 居中
<style>
#box1{
height:100px;
width: 100px;
border: 1px black solid;
position: relative;
}
#box2{height: 25px; width: 25px; background: pink; position: absolute; left: 35%;top: 35%;}
</style>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
3. 装饰点
<style>
#box1{
height:100px;
width: 100px;
border: 1px black solid;
position: relative;
}
li{list-style: none;}
#box1 ul li{position: relative;font-size: 24px;}
#box1 ul li:before{content: " "; display: block; width: 3px; height: 3px; background-color: brown; position: absolute;top:50%; left: -8px;}
</style>
<body>
<div id="box1">
<ul>
<li>啊啊啊</li>
<li>鹅鹅鹅</li>
</ul>
</div>
</body>