前言

本文主要介绍了网易云音乐首页榜单区域的实现过程。

一、结构的布局

示例图：

结构分析——

首先，依旧按照从外到内，从上倒下的顺序进行布局，标题部分可复用（上一篇文章里写到的标题结构）。
其次就是榜单的具体布局，如下图所示：可将整个榜单分为视为一个整体的容器，并将其分为三个部分，再单独一个部分加以细节方面的结构布局，其他两个部分复用其结构然后修改其样式即可。

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;
}

总结

以上就是今日所要分享的内容，依旧真挚祝福看到这篇文章的你开心快乐，就这样吧，拜~

CSS——网易云音乐首页之榜单区域的实现相关推荐

CSS——网易云音乐首页之热门推荐歌单的制作
文章目录前言一.结构的布局二.实现过程 1.HTML结构 2.CSS样式总结前言本文主要讲述了网易云音乐首页的热门推荐歌单部分的实现过程,我将从先分析大致结构与布局,其次书写样式的顺序进行 ...
python爬取网易云音乐飙升榜音乐_python爬取网易云音乐热歌榜单（获取iframe中数据，src为空）...
一.分析思路网易云音乐热歌榜的页面采用嵌入内联框架的方式,若爬虫直接从官网入口进入访问热歌榜 http://music.163.com/#/discover/toplist?id=3778678,是 ...
CSS——网易云音乐首页之轮播图的实现（完整版）
文章目录前言一.结构的分析二.使用步骤 1.HTML结构 2.CSS样式总结前言本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...
爬取网易云音乐歌曲特色榜单信息
网易云音乐(iframe内的歌单) 刚开始学习做下记录需要先下载好所需浏览器内核我时谷歌,下载地址 http://chromedriver.storage.googleapis.com/index ...
Python疫起学习·万丈高楼平地起Day09（精简版|浓缩就是精华）爬虫知识附上案例爬取北京地区短租房信息、爬取酷狗TOP500的数据以及爬取网易云音乐热歌榜单
爬虫知识 Requests库部分运行结果如下: 有时爬虫需要加入请求头来伪装成浏览器,以便更好地抓取数据.在Chrome浏览器中按F12键打开Chrome开发者工具,刷新网页后找到User-Agen ...
python爬取网易云音乐百强榜单
#引用第三方库,re,requests库 import requests #用来提取 import re #用来正则 #对网页进行提取,把里面的信息提取出来 def html(url):try:#看到 ...
HTML+CSS实现网易云音乐首页的主播电台页面
HTML+CSS实现网易云音乐首页的主播电台页面这个页面首先使用了css的定位(postion)属性.弹性盒子(display)属性以及VM与REM,图标使用了阿里巴巴矢量图标库的矢量图标.下面让我 ...
20230410----重返学习-网易云音乐首页案例-audio音频标签
day-046-forty-six-20230410-网易云音乐首页案例-audio音频标签网易云音乐首页案例单例设计模式 const theModule = (function(){let th ...
python爬取网易云音乐飙升榜音乐_python爬取网易云音乐热歌榜 python爬取网易云音乐热歌榜实例代码...
想了解python爬取网易云音乐热歌榜实例代码的相关内容吗,FXL在本文为您仔细讲解python爬取网易云音乐热歌榜的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:python,网易热歌榜 ...

CSS——网易云音乐首页之榜单区域的实现

文章目录

前言

一、结构的布局

示例图：

结构分析——

二、实现过程

1.HTML结构

2.CSS样式

总结

CSS——网易云音乐首页之榜单区域的实现相关推荐

最新文章

热门文章