<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration:none ;
}
/*视频样式开始*/
.video-iteams{
width: 296px;
height: 285px;
background-color: #fff;
float: left;
margin-bottom: 14px;
margin-right: 14px;
transition: all .2s linear;/*给video设置匀速*/
}
.video-iteams:last-child{
margin-right: 0;/*目的是为了让最后一个子元素的右边距变为0时*/
}
.video-img{
width: 100%;
height: 180px;
background-color: pink;
position: relative;/*定位的参照元素*/
}
.video-iteams p{
width: 268px;
height: 21px;
margin: 28px auto 6px;
font-size: 14px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.play{
width: 32px;
height: 20px;
border: 1px solid black;
position: absolute;
bottom: 10px;
left: 20px;
border-radius: 12px;/*垂直方向圆角的设置给高的一半 水平方向给宽的一半*/
}
.play>span{/*绘制三角形*/
width: 0;
height: 0;
border-left: 8px solid #fff;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
display: block;
margin: 0 auto;
margin: 4px auto;
}
.video-img:hover>.play{/*鼠标移动到图片盒子上时 play也发生变化*/
background-color: #ff6700;
border-color: #ff6700;
transition: all .4s ;
}
/*视频样式结束*/
</style>
</head>
<body>
<!--家电部分开始-->
<!--视频部分开始-->
<div class="video">
<div class="home-banner-box">
<a href="#">
<img data-lazy-src="img/小米巨能写.webp" />
</a>
</div>
<h2 class="title">
日用百货<a href="#" class="more">儿童用品</a>
</h2>
<div class="video-box">
<ul>
<li class="video-iteams">
<a href="#">
<div class="video-img">
<img data-lazy-src="img/发布会.webp" style="width: 296px;height: 180px;" />
<div class="play">
<span>
</span>
</div>
</div>
<p>2021春季新品发布会第一场</p>
</a>
</li>
<li class="video-iteams">
<a href="#">
<a href="#">
<div class="video-img">
<img data-lazy-src="img/小米10青春版发布会.webp" style="width: 296px;height: 180px;" />
<div class="play">
<span>
</span>
</div>
</div>
<p>小米10 青春版 发布会</p>
</a>
</a>
</li>
<li class="video-iteams">
<a href="#">
<a href="#">
<div class="video-img">
<img data-lazy-src="img/红米10X系列发布会.webp" style="width: 296px;height: 180px;" />
<div class="play">
<span>
</span>
</div>
</div>
<p>Redmi 10X系列发布会</p>
</a>
</a>
</li>
<li class="video-iteams">
<a href="#">
<a href="#">
<div class="video-img">
<img data-lazy-src="img/小米10 8K手机拍大片.webp" style="width: 296px;height: 180px;" />
<div class="play">
<span>
</span>
</div>
</div>
<p>小米10 8K手机拍大片</p>
</a>
</a>
</li>
</ul>
</div>
</div>
<!--视频部分结束-->
<!--家电部分结束-->
</body>
</html>
2867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
