<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱奇艺视频播放列表</title>
<style>
*{margin: 0;padding: 0;}
div{
width: 1000px;
height: 500px;
/* border: 3px solid red; */
margin: 0px auto;
margin-top: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.one{
height: 40px;
}
.two{
margin: 0px;
width: 200px;
margin-right: 5px;
padding: 10px;
}
ul{
list-style-type: none;
}
img{
border-radius: 10px;
}
.tu:hover{
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);
}
.title{
font-size: 16px;
height: 30px;
color: #4d4d4d;
vertical-align: middle;
}
.shu{
font-size: 14px;
height: 20px;
color: #640000;
vertical-align: middle;
}
.dian{
font-size: 12px;
height: 20px;
color: blue;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<div class="one">
<h3>热搜</h3>
</div>
<div class="two">
<ul>
<li class="tu">
<img src="./image/img1.png" alt="" width="200px" height="250px">
</li>
<li class="title">越狱</li>
<li class="shu">迈克尔反转越狱</li>
<li class="dian">点击次数：242445次</li>
</ul>
</div>
<div class="two">
<ul>
<li class="tu">
<img src="./image/img2.png" alt="" width="200px" height="250px">
</li>
<li class="title">唐人街探案</li>
<li class="shu">开创“喜剧+推理”类型片
</li>
<li class="dian">点击次数：242445次
</li>
</ul>
</div>
<div class="two">
<ul>
<li class="tu">
<img src="./image/img3.png" alt="" width="200px" height="250px">
</li>
<li class="title">开端</li>
<li class="shu">公交车爆炸后“死而复生”
</li>
<li class="dian">点击次数：242445次
</li>
</ul>
</div>
<div class="two">
<ul>
<li class="tu">
<img src="./image/img4.png" alt="" width="200px" height="250px">
</li>
<li class="title">江照黎明
</li>
<li class="shu">现实主义女性悬疑剧
</li>
<li class="dian">点击次数：242445次</li>
</ul>
</div>
</div>
</body>
</html>
04-30
1397
1397
03-29
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
