HTML练习--制作宣传视频

最新推荐文章于 2023-12-14 10:55:50 发布

可爱的黄油手

最新推荐文章于 2023-12-14 10:55:50 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/gengzhi1293443962/article/details/52859394

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.a {
	width: 500px;
	height: 30px;
	background-image: url(icon-03.jpg);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	font-size: 14px;
	font-weight: bolder;
	color: #FFF;
	text-indent: 2em;

}
.b {
	width:500px;
	height:610px;
	background-color: #CCC;

}
.aa {
	height: 300px;
	width: 200px;
	float: left;


}


	.c{
	list-style-position: outside;
	list-style-type: none;
}
.c li a img{border:2px #FFFFFF solid;}
.c li a:hover img{border:2px #F60 solid;}
.c span{
	background-image: url(icon-02.jpg);
	background-repeat: no-repeat;
	background-position: 10px 5px;
	padding-left:30px;
	height:25px;
	line-height:25px;
	display:block;	
	}
	.c p{
	line-height: 25px;
	background-image: url(icon-01.jpg);
	background-repeat: no-repeat;
	background-position: 10px 5px;
	height: 25px;
	line-height:25px;
	display:block;
	padding-left:30px;
}
.c li{ float:left width:142px; height:160px;}
.c{padding:0px 0px;margin:0px 0px;}
</style>
</head>
<body>
<div class="a">精彩视频</div>
<div class="b">
<ul class="c">

<div class="aa"><li><a href="#"/><img src="video-01.jpg"/></a>
<h3>携手共同进步</h3>
<p>时长:80秒</p>
<span>点击:541563</span>
</li></div>

<div class="aa"><li><a href="#"/><img src="video-02.jpg"/></a>
<h3>美丽的起点</h3>
<p>时长:120秒</p>
<span>点击:657842</span>
</li></div>

<div class="aa"><li><a href="#"/><img src="video-03.jpg"/></a>
<h3>努力的过程</h3>
<p>时长:50秒</p>
<span>点击:912380</span>
</li></div>

<div class="aa"><li><a href="#"/><img src="video-04.jpg"/></a>
<h3>享受丰硕的果实</h3>
<p>时长:60秒</p>
<span>点击:47651280</span>
</li></div>

</ul>
</div>




</body>
</html>

可爱的黄油手

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML练习--制作宣传视频

无标题文档.a { width: 500px; height: 30px; background-image: url(icon-03.jpg); background-repeat: repeat-x; background-position: 0px 0px; font-size: 14px; font-weight: bolder; color: #FFF; text-
复制链接

扫一扫