制作北大青鸟视频宣传片列表页面

<!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">
.e{
	
	background-color:#03C;
	width:500px;
	height:30px;
	font-weight: bold;
	text-align: left;
	padding-top: 10px;
	padding-left: 30px;
	color:#FFF;
	font-size: 14px;
	
}


.a {
	height: 550px;
	width: 530px;
	background-color: #CCC;
}

.b li{
	float: left;
	width:180px;
	height:260px;
}
.c span{
	background-image: url(../icon-02.jpg);
	line-height:25px;
	display:block;
	height: 25px;
	padding-left: 30px;
	background-repeat: no-repeat;
	background-position: 10px 5px;
	}
.c p{
	background-image: url(../icon-01.jpg);
	line-height:25px;
	display:block;
	height: 25px;
	padding-left: 30px;
	background-repeat: no-repeat;
	background-position: 10px 5px;
}
.c li a img{ border:#FFF 2px solid;}
.c li a:hover img{ border:#F63 2px solid;}

.c{padding:0px 50px;list-style-type:none;
margin:0px 0px;}

</style>
</head>

<body>
<div class="e">精彩视频</div>
<div class="a">

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



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

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


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



</ul>
</div>
</body>
</html>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值