本文介绍了一个具体的HTML和CSS实现方案，用于展示优酷网站上的视频列表。通过精心设计的样式，实现了视频封面、播放时长、标题和播放次数等元素的合理布局。该设计包括两个主要部分：列表1和列表2，每个列表包含6个小列表，展示了不同的视频内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
/*列表1*/
.list_1{
width:1212px;
height:180px;
margin:0 auto;
margin-top:60px;
}
/*列表2*/
.list_2{
width:1212px;
height:180px;
margin:0 auto;
margin-top:30px;
}
/*将列表1平均分为六个小列表，每个小列表一个推送内容*/
.yk_1{
height:180px;
width:192px;
float:left;
margin-left: 10px;
position:relative;
}
/*将列表2平均分为六个小列表，每个小列表一个推送内容*/
.yk_2{
height:180px;
width:192px;
float:left;
margin-left: 10px;
position:relative;
}
/*小列表中的图片*/
.pic{
width:192px;
height:108px;
}
/*视频时长显示*/
.time{
position:absolute;
margin-top: -30px;
margin-left:145px;
color: #fff;
font-size: 12px;
}
/*列表1超链接字体样式*/
.yk_1 a{
font-size: 14px;
color: #333;
text-decoration: none;
}
/*列表2超链接字体样式*/
.yk_2 a{
font-size: 14px;
color: #333;
text-decoration: none;
}
/*小列表标题*/
.title{
height: 36px;
line-height: 18px;
}
/*视频播放次数*/
span{
font-size: 12px;
color: #999;
}
/*两个列表中间字体样式*/
h2{
font-weight:normal;
color:#999;
}
/*两个列表中间板块*/
.min{
width:1212px;
height: 26px;
line-height: 26px;
margin-left: 75px;
font-size:19px;
font-weight:normal;
}
</style>
</head>
<body>
<div class="list_1">
<!--列表1-1-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-1（2）.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">01:30</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">健康小王子上线，唱跳俱佳身体棒棒，血压表之歌让你康康</a>
</div>
<!--播放次数-->
<span>2057次播放</span>
</div>
<!--列表1-2-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-2.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">01:11</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a>
十年追寻，吴昕带你穿过迷雾，认识不一般的自己
</a>
</div>
<!--播放次数-->
<span>8683次播放</span>
</div>
<!--列表1-3-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-3.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">04:08</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a>
杨迪C位出道引领超级导购员出战，萌妹子化身“胖熊”一秒
</a>
</div>
<!--播放次数-->
<span>9394次播放</span>
</div>
<!--列表1-4-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-4.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">01:37</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a>
小姐姐金嗓子镇全场，竹板打起来，小词儿说起来，张绍刚
</a>
</div>
<!--播放次数-->
<span>7847次播放</span>
</div>
<!--列表1-5-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-5.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">01:42</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a>
乐华七子双十一购物车大揭秘，暖心为妈妈买围巾，好想
</a>
</div>
<!--播放次数-->
<span>3038次播放</span>
</div>
<!--列表1-6-->
<div class="yk_1"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/1-6.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">03:20</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a>
帅哭燃炸的潮流现场，乐华七子NEXT《Wait a Minute》劲
</a>
</div>
<!--播放次数-->
<span>5.3万次播放</span>
</div>
</div>
<!--两个列表中间-->
<div class="min">
<h2>优酷/pp足球</h2>
</div>
<div class="list_2">
<!--列表2-1-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-1.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">01:30</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
莫拉塔双响 佩刀传射 切尔西3-1水晶宫
</a>
</div>
<!--播放次数-->
<span>1.5万次播放</span>
</div>
<!--列表2-2-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-2.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">06:33</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
阿圭罗第150球斯特林造4球 曼城6-1大胜
</a>
</div>
<!--播放次数-->
<span>7.9万次播放</span>
</div>
<!--列表2-3-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-3.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">09:18</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
夺冠在望！上港5-4客胜恒大 5分优势领跑
</a>
</div>
<!--播放次数-->
<span>50.2万次播放</span>
</div>
<!--列表2-4-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-4.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">05:56</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
拉卡泽特救主 阿森纳1-1利物浦
</a>
</div>
<!--播放次数-->
<span>13.4万次播放</span>
</div>
<!--列表2-5-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-5.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">05:42</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
拉什福德替补献绝杀 曼联2-1逆转伯恩茅斯
</a>
</div>
<!--播放次数-->
<span>12.2万次播放</span>
</div>
<!--列表2-6-->
<div class="yk_2"><a href="#" target="_blank">
<!--图片-->
<div class="pic">
<img src="image/2-6.jpg" height="108" width="192">
<!--视频时长-->
<div class="time">04:40</div>
</div>
</a>
<div class="title">
<!--视频标题-->
<a href="#" target="_blank">
铁腰双响纳因格兰破门 国米5-0豪取联赛七连胜
</a>
</div>
<!--播放次数-->
<span>5.2万次播放</span>
</div>
</div>
</body>
</html>
效果图如下：
扫一扫
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
