前言
本文主要介绍了网易云音乐首页榜单区域的实现过程。
一、结构的布局
示例图：
结构分析——
- 首先，依旧按照从外到内，从上倒下的顺序进行布局，标题部分可复用（上一篇文章里写到的标题结构）。
- 其次就是榜单的具体布局，如下图所示：可将整个榜单分为视为一个整体的容器，并将其分为三个部分，再单独一个部分加以细节方面的结构布局，其他两个部分复用其结构然后修改其样式即可。
3.单独部分的布局，这里就拿飙升榜区域举例，如图所示：可将其分为上下两个部分，另外，部分按钮的呈现也是采用了雪碧图的方式，如标题栏的播放与收藏图标。
二、实现过程
1.HTML结构
代码如下（示例）：（这里就是飙升榜的结构布局，其他的部分结构相同可复用）
<!-- 飙升榜外部容器 -->
<div class="music-top-wrap">
<!-- 飙升榜标题 -->
<dt class="music-top">
<a href="#">
<img src="./img/飙升榜.jpg" alt="">
</a>
<div class="music-list-decrosption">
<a href="#" class="top-title">飙升榜</a>
<br>
<a href="#" class="top-play"></a>
<a href="#" class="collection"></a>
</div>
</dt>
<!-- 飙升榜具体歌曲列表 -->
<dd>
<ol>
<li>
<span class="specail">1</span>
<a href="#" class="music-name">
再见莫妮卡
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span class="specail">2</span>
<a href="#" class="music-name">
黑夜骑士
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span class="specail">3</span>
<a href="#" class="music-name">
兄妹
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>4</span>
<a href="#" class="music-name">
明天会营业
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>5</span>
<a href="#" class="music-name">
你也是个Rapper
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>6</span>
<a href="#" class="music-name">
下一个天亮
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>7</span>
<a href="#" class="music-name">
翻身仗（LIVE版）
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>8</span>
<a href="#" class="music-name">
你也是个Rapper（LIVE版）
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>9</span>
<a href="#" class="music-name">
必杀技
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li>
<span>10</span>
<a href="#" class="music-name">
镜中人（LIVE版）
<div class="tools">
<a href="#" class="right-play"></a>
<a href="#" class="right-add"></a>
<a href="#" class="right-collection"></a>
</div>
</a>
</li>
<li class="music-top-more">
<a href="#">查看更多></a>
</li>
</ol>
</dd>
</div>2.CSS样式
代码如下（示例）：
/* 榜单区域外部容器样式 */
.music-form {
width: 689px;
height: 527px;
margin-top: 40px;
}
/* 标题样式设置 */
.title-description-top {
color: #333333;
position: relative;
left: -42px;
}
.title-right-top>a {
color: #666666;
font-size: 12px;
}
.title-right-top {
float: right;
}
.music-list {
width: 687px;
height: 472px;
margin-top: 20px;
padding-left: 1px;
background-image: url(../img/榜单背景.png);
}
/* 飙升榜外部容器样式设置 */
.music-top-wrap {
width: 228px;
height: 472px;
}
/* 飙升榜表头样式设置 */
dt {
width: 209px;
height: 100px;
padding: 20px 0px 0px 19px;
}
dt img {
width: 80px;
height: 80px;
}
.music-list-decrosption {
display: inline-block;
position: relative;
top: -88px;
left: 70px;
width: 116px;
height: 70px;
padding-top: 7px;
padding-left: 10px;
margin: 6px 0px 0px 10px;
}
.top-title {
font-size: 14px;
font-weight: bold;
color: #333333;
}
.top-play {
display: inline-block;
margin: 10px 6px 0px 0px;
width: 22px;
height: 22px;
background-image: url(../img/index.png);
background-position: -267px -205px;
}
.top-play:hover {
background-image: url(../img/index.png);
background-position: -267px -235px;
}
.collection {
display: inline-block;
margin-top: 10px;
width: 22px;
height: 22px;
background-image: url(../img/index.png);
background-position: -300px -205px;
}
.collection:hover {
background-image: url(../img/index.png);
background-position: -300px -235px;
}
/* 飙升榜表格内容样式设置 */
dd li {
height: 32px;
}
dd li>span {
display: inline-block;
width: 35px;
height: 32px;
line-height: 32px;
color: #666666;
font-size: 16px;
text-align: center;
vertical-align: middle;
margin: 0px 0px 0px 25px;
}
dd li .specail {
color: #c10d0c;
}
dd li a {
display: inline-block;
width: 110px;
height: 32px;
line-height: 32px;
vertical-align: middle;
font-size: 12px;
color: #000000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
dd li a:hover {
text-decoration: underline;
}
.tools {
display: none;
position: relative;
left: 140px;
top: -39px;
width: 82px;
height: 32px;
margin-top: 7px;
background-color: #bfa;
}
.tools:hover {
display: none;
background-color: pink;
}
.tools .right-play {
display: inline-block;
position: absolute;
top: 8px;
width: 17px;
height: 17px;
margin-right: 10px;
background-image: url(../img/index.png);
background-position: -267px -268px;
}
.tools .right-play:hover {
background-image: url(../img/index.png);
background-position: -267px -288px;
}
.tools .right-add {
display: inline-block;
position: absolute;
top: 8px;
width: 17px;
height: 17px;
margin: 2px 6px 0 25px;
background-image: url(../img/play.png);
background-position: 0 -700px;
}
.tools .right-add:hover {
background-image: url(../img/play.png);
background-position: -22px -700px;
}
.tools .right-collection {
display: inline-block;
position: absolute;
top: 7px;
width: 17px;
height: 17px;
margin: 2px 6px 0 50px;
background-image: url(../img/index.png);
background-position: -297px -268px;
}
.tools .right-collection:hover {
background-image: url(../img/index.png);
background-position: -297px -288px;
}
.music-top-more {
width: 198px;
height: 32px;
margin: 0px 32px 0px 0px;
}
.music-top-more a {
display: inline-block;
height: 32px;
height: 32px;
text-align: right;
margin-left: 100px;
}
/* 新歌榜外部样式设置 */
.new-music {
width: 228px;
height: 472px;
position: relative;
top: -472px;
;
left: 230px;
}
总结
以上就是今日所要分享的内容，依旧真挚祝福看到这篇文章的你开心快乐，就这样吧，拜~
1316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
