<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div,ul,li,h1,p{
padding: 0px;
margin: 0px;
}
.videoSame{
background-color: darkgray;
width: 320px;
overflow: hidden;
}
.videoTitle{
background-color: rgb(37, 68, 116);
color: white;
text-indent: 1em;
font-family: '宋体';
line-height: 35px;
font-weight: 600;
}
li{
float: left;
list-style-type: none;
margin: 3px 10px;
}
h1{
font-size: 20px;
}
p{
background: url(icon-01.jpg) left center no-repeat;
text-indent: 20px;
}
span{
background: url(icon-02.jpg) left center no-repeat;
padding-left: 20px;
}
a:hover img{
border: 2px solid orange;
}
a:link img{
border: 2px solid white;
}
</style>
</head>
<body>
<div class="videoSame">
<div class="videoTitle">精彩视频</div>
<ul class="videoSList">
<li><a href="#"><img src="video-01.jpg"/></a>
<h1>携手共同进步</h1>
<p>时长:80秒</p>
<span>点击:541563</span> </li>
<li><a href="#"><img src="video-02.jpg"/></a>
<h1>美丽的起点</h1>
<p>时长:120秒</p>
<span>点击:657842</span> </li>
<li><a href="#"><img src="video-03.jpg"/></a>
<h1>努力的过程</h1>
<p>时长:50秒</p>
<span>点击:912380</span> </li>
<li><a href="#"><img src="video-04.jpg"/></a>
<h1>享受丰硕的成果</h1>
<p>时长:60秒</p>
<span>点击:47651280</span> </li>
</ul>
</div>
</body>
</html>
1123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
