一、实现一个飙升榜网页制作
（A）代码如下图所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>飙升榜</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.bang {
width: 280px;
height: 620px;
background-color: #EEE;
border-radius: 3px;
box-shadow: 2px 2px 5px #999;
}
.bang li {
width: 280px;
height: 41px;
/* border: 1px solid red; */
line-height: 41px;
}
.bang li > span {
margin-left: 30px;
}
.bang li.active {
width: 280px;
height: 170px;
}
.bang > li > img {
width: 110px;
/* margin: 30px; */
margin-left: 25px;
padding-top: 25px;
float: left;
}
.img-left {
width: 120px;
height: 120px;
float: right;
margin-top: 25px;
}
.img-left > p {
width: 120px;
height: 50px;
margin-top: 20px;
}
.img-left > p >img {
float: left;
}
.even {
background-color: #EEE;
}
.odd {
background-color: #DDD;
}
.all {
text-align: right;
/* margin-right: 10px; */
}
.all > a{
color: #222;
}
</style>
</head>
<body>
<ul class="bang">
<li class="active even">
<img src="./image/13.png" alt="">
<div class="img-left">
<h3>飙升榜</h3>
<p>
<img src="./image/14.png" alt="">
<img src="./image/15.png" alt="">
</p>
</div>
</li>
<li class="odd">
<span>1 再度重相逢</span>
</li>
<li class="even">
<span>2 江南</span>
</li>
<li class="odd">
<span>3 海阔天空</span>
</li>
<li class="even">
<span>4 大鱼</span>
</li>
<li class="odd">
<span>5 大海</span>
</li>
<li class="even">
<span>6 光辉岁月</span>
</li>
<li class="odd">
<span>7 突然的自我</span>
</li>
<li class="even">
<span>8 天使的翅膀</span>
</li>
<li class="odd">
<span>9 世界第一等</span>
</li>
<li class="even">
<span>10 Hymn for the weekend</span>
</li>
<li class="odd all">
<a href="#">查看全部></a>
</li>
</ul>
</body>
</html>
（B）效果图如下图所示：
二、京东页面制作
（A）代码如下图所示
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
