网易云音乐网站项目问题整理

排版有些麻烦，简单的方法是设div,而我却用了直接添加图片的方法

以下是代码说明：

 1 <div class="xiazaiquyu">
 2             <!--第一列-->
 3                 <div class="first">
 4                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
 5                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
 6                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
 7                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
 8                 </div>
 9                 <div class="li1">
10                     <ul>
11                         <li>安卓版</li><span class="sp1">V4.3.2</span>
12                         <li>iPad版</li><span class="sp1">V1.6.2</span>
13                         <li>PC版</li><span class="sp1">V2.2.3</span>
14                         <li>WP版</li><span class="sp1">V1.5.0</span>
15                     </ul>
16                 </div>
17                     <!--第二列-->
18                 <div class="second">
19                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
20                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
21                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
22                         <img class="pg" src="../../image/images/lunbotubiao_01.jpg" >
23                 </div>
24                 <div class="li2">
25                     <ul>
26                         <li>iPhone版</li><span class="sp2">V4.3.2</span>
27                         <li>Mac版</li><span class="sp2">V1.6.2</span>
28                         <li>UWP版</li><span class="sp2">V2.2.3</span>
29                         <li>Linux版</li><span class="sp2">V1.5.0</span>
30                     </ul>
31                 </div>
32             </div>
33         </div>

下载区域HTML代码

 1 .xiazaiquyu{
 2     width: 720px;
 3     height: 220px;
 4     position: relative;
 5     left: 10px;
 6 }
 7 .first{
 8     width: 220px;
 9     height: 200px;
10     position: relative;
11     right: -800px;
12     top: 150px;
13     line-height: 40px;
14 }
15 .second{
16     width: 220px;
17     height: 200px;
18     position: relative;
19     right: -1020px;
20     top: -237px;
21     line-height: 40px;
22     margin-left: 10px;
23 }
24 .li1 ul li{
25     list-style-type: none;
26     color: white;
27     position: relative;
28     left: 810px;
29     line-height: 33px;
30 }
31 .sp1{
32     position: relative;
33     left:900px;
34     top: -25px;
35     color: #D9D1D1;
36     font-size: 13px;
37 }
38 .li2 ul li{
39     list-style-type: none;
40     color: white;
41     position:relative;
42     left: 1035px;
43     top: -450px;
44     line-height: 33px;
45 }
46 .sp2{
47     position: relative;
48     font-size: 13px;
49     color: #D9D1D1;
50     left: 1130px;
51     top: -478px;
52 }

下载区域css代码

注意：宽高一定要调好，其中涉及到line height行高的调整，还有浮动div的应用

opacity 透明度的应用 1是完全不透明 0是完全透明

代码演示：

 1 .duopg1{
 2     width: 260px;
 3     height: 160px;
 4     background:url(../image/musicianimage/zhaolei.jpg);
 5     background-size: 100% 100%;
 6     opacity: 0.4;
 7 }
 8 .duopg2{
 9     width: 260px;
10     height: 160px;
11     background:url( ../image/musicianimage/luodi.jpg);
12     background-size: 100% 100%;
13     opacity: 0.4;
14 }
15 .duopg3{
16     width: 260px;
17     height: 160px;
18     background:url( ../image/musicianimage/duli.jpg);
19     background-size: 100% 100%;
20     opacity: 0.4;
21 }
22 .duopg4{
23     width: 260px;
24     height: 160px;
25     background:url( ../image/musicianimage/lizhi.jpg);
26     background-size: 100% 100%;
27     opacity: 0.4;
28 }
29 .duopg5{
30     width: 260px;
31     height: 160px;
32     background:url(../image/musicianimage/zhaolei.jpg);
33     background-size: 100% 100%;
34     opacity: 0.4;
35 }
36 .duopg6{
37     width: 260px;
38     height: 160px;
39     background:url(../image/musicianimage/zhaolei.jpg);
40     background-size: 100% 100%;
41     opacity: 0.4;
42 }
43 .duopg7{
44     width: 260px;
45     height: 160px;
46     background:url(../image/musicianimage/zhaolei.jpg);
47     background-size: 100% 100%;
48     opacity: 0.4;
49 }
50 .duopg8{
51     width: 260px;
52     height: 160px;
53     background:url(../image/musicianimage/zhaolei.jpg);
54     background-size: 100% 100%;
55     opacity: 0.4;
56 }
57 .duopg9{
58     width: 260px;
59     height: 160px;
60     background:url(../image/musicianimage/zhaolei.jpg);
61     background-size: 100% 100%;
62     opacity: 0.4;
63 }
64 .duopg10{
65     width: 260px;
66     height: 160px;
67     background:url(../image/musicianimage/zhaolei.jpg);
68     background-size: 100% 100%;
69     opacity: 0.4;
70 }
71 .duopg11{
72     width: 260px;
73     height: 160px;
74     background:url(../image/musicianimage/zhaolei.jpg);
75     background-size: 100% 100%;
76     opacity: 0.4;
77 }

演示

display：none 适用于轮播图多张的情况下，将后面多的隐藏

代码演示：

1 .duopg5,.duopg6,.duopg7,.duopg8,.duopg9,.duopg10,.duopg11{
2     display:none;
3 }

代码演示

text indent：2em 首行缩进多用于段落的调整

演示

/*鼠标放置上面时显示小手*/

1 .joinnow:hover{
2 cursor: pointer;
3 }

鼠标放置显示小手

网站图标添加

示例：

<title>网易云音乐</title>
<link rel="shortcut icon" href="../../image/images/music_看图王.ico">

用得最多的是图片定位：

代码如下：

 1                                 <div class="starpg1"></div>
 2                 <div class="starpg2"></div>
 3                 <div class="starpg3"></div>
 4
 5 .starpg1{
 6     width: 270px;
 7     height: 315px;
 8     background: url( ../image/musicianimage/star1.gif)no-repeat 0px 0px;
 9     position: relative;
10     top: 30px;
11     left: 180px;
12 }
13 .starpg1:hover{
14     width: 270px;
15     height: 315px;
16     background: url( ../image/musicianimage/star1.gif)no-repeat -270px 0px;
17 }
18 .starpg2{
19     width: 270px;
20     height: 315px;
21     background: url( ../image/musicianimage/star2.gif)no-repeat 0px 0px;
22     position: relative;
23     top: -284px;
24     left: 520px;
25 }
26 .starpg2:hover{
27     width: 270px;
28     height: 315px;
29     background: url( ../image/musicianimage/star2.gif)no-repeat -270px 0px;
30 }
31 .starpg3{
32     width: 270px;
33     height: 315px;
34     background: url( ../image/musicianimage/star3.gif)no-repeat 0px 0px;
35     position: relative;
36     top: -598px;
37     left: 860px;
38 }
39 .starpg3:hover{
40     width: 270px;
41     height: 315px;
42     background: url( ../image/musicianimage/star3.gif)no-repeat -270px 0px;
43 }

图片定位

截图展示：

hover后的：

css中将图片放置在图形框中的代码：

-webkit-mask:url( ../image/musicianimage/hotpg1.png);

代码案例：

 1                                 <div class="hotpg1"></div>
 2                 <div class="hotpg2"></div>
 3                 <div class="hotpg3"></div>
 4                 <div class="hotpg4"></div>
 5                 <div class="hotpg5"></div>
 6                 <div class="hotpg6"></div>
 7
 8
 9 .hotpg1{
10     width: 160px;
11     height: 184px;
12     background-image:url( ../image/musicianimage/hotpg1-1.jpg);
13     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
14 }
15 .hotpg2{
16     width: 160px;
17     height: 184px;
18     background-image:url(  ../image/musicianimage/hotpg1-2.jpg);
19     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
20 }
21 .hotpg3{
22     width: 160px;
23     height: 184px;
24     background-image:url( ../image/musicianimage/hotpg1-3.jpg);
25     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
26 }
27 .hotpg4{
28     width: 160px;
29     height: 184px;
30     background-image:url(  ../image/musicianimage/hotpg1-4.jpg);
31     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
32 }
33 .hotpg5{
34     width: 160px;
35     height: 184px;
36     background-image:url( ../image/musicianimage/hotpg1-5.jpg);
37     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
38 }
39 .hotpg6{
40     width: 160px;
41     height: 184px;
42     background-image:url( ../image/musicianimage/hotpg1-6.jpg);
43     -webkit-mask:url( ../image/musicianimage/hotpg1.png);
44 }
45
46
47

案例

截图展示：

css中将彩色图片变成灰白照片的代码：

filter:grayscale(100%);

案例截图展示：

原文地址：https://www.cnblogs.com/sc1314-1218/p/8286614.html

时间： 2024-10-13 15:17:46

网易云音乐网站项目问题整理的相关文章

【第二版】高仿Android网易云音乐企业级项目实战课程介绍

这是一门付费Android项目课程,我们只做付费课程:同时也感谢大家的支持. 这一节,对本课程做一个简单介绍,以及放一些项目效果图,如果想直接查看项目视频演示,可以直接在腾讯课堂查看[高仿Android网易云音乐企业级项目实战]课程第三节,让大家对该项目有一个整体的认识. 1 前言我们课程学完都不能让你,年薪百万,出任CEO,走上人生巅峰. 2 课程简介这是一门使用Java语言,从0开发一个Android平台,接近企业级的项目(我的云音乐). 课程包含了基础内容,高级内容,项目封装,项目重构

网易云音乐Java版爬虫

网易云音乐Java版爬虫在编写爬虫之前,我们需要对网易云音乐网站网页类型进行分析,确认哪些页面是我们需要的,哪些页面是我们可以忽略的. 进入网易云音乐首页,浏览后发现其大概有这么几种类型的URL: 推荐页面排行榜列表以及排行榜页面歌单列表以及歌单页面主播电台列表以及主播电台页面歌手列表以及歌手页面专辑列表(新碟上架)以及专辑页面歌曲页面最终需要爬取的数据在歌曲页面中,该页面里包含了歌曲的名称以及歌曲的评论数量. 另外,我们还需要尽可能多的获取歌曲页面,这些信息我们可以从前面6种类

如何用Python网络爬虫爬取网易云音乐歌词

前几天小编给大家分享了数据可视化分析,在文尾提及了网易云音乐歌词爬取,今天小编给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下: 找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌曲ID: 调用网易云歌曲API,获取歌词: 将歌词写入文件,并存入本地. 本文的目的是获取网易云音乐的歌词,并将歌词存入到本地文件.整体的效果图如下所示: 基于Python网易云音乐歌词爬取赵雷的歌曲本文以民谣歌神赵雷为数据采集对象,专门采集他的歌曲歌词,其他歌手的歌词采集方式可以类推,下图展示

《云阅》一个仿网易云音乐UI，使用Gank.Io及豆瓣Api开发的开源项目

CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + MVVM-DataBinding架构开发.开发中所遇到的各种问题已归纳在这里. github地址:CloudReader What can be learned about this project 那么,从本项目中你能学到哪些知识呢? 1.干货集中营内容与豆瓣电影书籍内容. 2.高仿网易云音乐歌单

在自己网站中插入网易云音乐的外链，播放音乐

今天在网易云音乐听歌发现一个有趣的东西,音乐外链,于是尝试了一下,挺不错的效果如下图只要把代码放到你的网站代码里就行了插件使用教程

仿照网易云音乐项目（自制音乐网页播放器）

最近准备把上一周做的一个仿网易云音乐的自制音乐网页播放器项目做一个总结. 相关功能如下: 1.通过后台页面上传歌曲.编辑歌曲功能. 2.前端页面自动更新播放热度高的歌曲 3.在线听歌.查看歌词.且配有相应的播放动画. 原文地址:https://www.cnblogs.com/gitnull/p/10041183.html

网易云音乐如何从0到亿级用户整理笔记

为什么要做网易云音乐? l 老板是发烧友 l 市面音乐不喜欢,市面上音乐质量比较匮乏 l 做这件事对音乐行业有啥帮助,对公司有啥帮助,对用户有啥帮助它是如何做出来的? 好口碑是如何打造的? 主要从互联网音乐市场的现状分析.如何做产品定位.如何跨越鸿沟.探索过程中用到哪些手段.需求挖掘与用户引导五个方面来解析互联网音乐市场的现状分析: 主流:当时主流市场是酷狗,QQ,酷我: 第二市场是百度,天天动听,虾米,豆瓣fm, 多米,jinfm等缺乏创新的大市场:主流市场是曲库型产品, 播放器型

Android实战之酷云-->仿网易云音乐开发

我的个人网站 Xuejianxin's Blog Google Blog Xuejianxin's Blog Android自定义View学习 Android自定义View之常用工具源码分析 Android自定义View之onMeasure()源码分析 Android自定义View之onLayout()源码分析 Android自定义View之对TouchEvent的处理 Android自定义View之draw原理分析如果觉得我的文章还行的话,也可以关注我的公众号,里面也会第一时间更新,并且会有

网易云音乐的歌单推荐算法

[转载]原文地址:https://www.zhihu.com/question/26743347 原文: 不是广告党,但我却成为网易云音乐的的重度患者,不管是黑红的用户界面,还是高质量音乐质量都用起来很舒服.我喜欢听歌,几乎每周不低于15小时,但其实听得不是特别多,并没有经常刻意地去搜歌名,所以曲目数量我并不是很在乎.但是比起其它,网音给我推荐的歌单几乎次次惊艳,而且大多都没听过,或者好久以前听过早就忘记了名字,或者之前不知道在哪听过只是知道其中一部分旋律,根本不知道名字,等等,听起来整个人大