您的位置：首页 > Web前端 > HTML

HTML练习--制作宣传视频

2016-10-19 14:54 232 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航