<!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">
.div1 {
font-size: 18px;
color: #FFF;
width:320px;
height:30px;
background-repeat: repeat;
background-image: url(../%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-03.jpg);
}
.div2{
background-color:#CCC;
width:320px;
height:450px;
}
li{list-style-type:none;
float:left;
margin:10px;
}
li a img {border:2px #FFFFFF solid}
li a:hover img{border:2px #F08609 solid}
p{
display: block;
text-align: left;
background-image: url(../%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-01.jpg);
background-repeat: no-repeat;
background-position: left center;
background-attachment: scroll;
padding-left:30px;
line-height:25px;
}
span{
display: block;
text-align: left;
background-image: url(../%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/icon-02.jpg);
background-repeat: no-repeat;
background-position: left center;
background-attachment: scroll;
padding-left:30px;
line-height:25px;
}
ul{
padding:0px 0px;
margin:0px 0px;
}
</style>
</head>
<body>
<div class="div1">精彩视频</div>
<div class="div2">
<ul>
<li><a href="#"><img src="../图片素材/video-01.jpg"></a>
<h3>携手共同进步</h3>
<p>时长:80秒</p>
<span>点击:541563 </span>
</li>
<li><a href="#"><img src="../图片素材/video-02.jpg"></a>
<h3>美丽的起点</h3>
<p>时长:120秒</p>
<span>点击:657842</span>
</li>
<li><a href="#"><img src="../图片素材/video-03.jpg" /></a><h3>努力的过程</h3>
<p>时长:50秒</p>
<span>点击:912380 </span>
</li>
<li><a href="#"><img src="../图片素材/video-04.jpg" /></a><h3>享受丰硕的成果</h3>
<p>时长:60秒</p>
<span>点击:47651280 </span>
</li>
</ul>
</div>
</body>
</html>
第七章上机练习2
最新推荐文章于 2021-02-27 11:02:52 发布