这是用HTML和CSS模仿的网易云静态页面

文章目录

  • 具体的效果图如下:
  • 补充:
  • 具体代码如下s：
    • HTML：
    • CSS-1(base.css):
    • CSS-2(commen.css):
    • CSS-3(main-css):

具体的效果图如下:


补充:

  • 因为时间关系所以好多地方时重复的,大家可以自行修改就可以

  • 关于代码方法个人认为还是有很多不足的，代码冗长，不够精简，还是需要多多简练

  • 同时希望大家指出不足之处，让我与各位共勉之

  • 一年三百六十日，多是横戈马上行。 ——戚继光《马上作》

具体代码如下s：

HTML：

<!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/common.css"><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/main.css"><link rel="stylesheet" href="css/main-common.css">
</head>
<body><!-- 头部 --><div id="g-topbar"><div class="m-top"><div class="wrap"><h1 class="logo"></h1><ul class="m-nav"><li class="first"><span><a href="javascript:;" ><em>发现音乐</em><span class="cor">&nbsp;</span></a></span></li><li><span><a href="javascript:;"><em>我的音乐</em></a></span></li><li><span><a href="javascript:;"><em>朋友</em></a></span></li><li><span><a href="javascript:;"><em>商城</em></a></span></li><li><span><a href="javascript:;"><em>音乐人</em></a></span></li><li class="last"><span><a href="javascript:;"><em>下载客户端</em></a></span><sup class="hot">&nbsp;</sup></li></ul ><div class="m-tophead"><a hidefocus="true" href="javascript:;" class="link">登录</a></div><a hidefocus="true" href="javascript:;" class="m-create-center">创作者中心</a><div class="m-search"><div class="searchbg"><span class="parent"><input type="text" class="txt" placeholder="音乐/视频/电台/用户"><!-- <label class="ph" @click="change" v-if="show1">{{message}}</label> --></span></div>                  </div></div>            </div><div class="m-subtop"><div class="ms-set"><div class="navitems"><ul><li><a href="javascript:;"><em>推荐</em></a></li><li><a href="javascript:;"><em>排行榜</em></a></li><li><a href="javascript:;"><em>歌单<span class="f-icon">&nbsp;</span></em></a></li><li><a href="javascript:;"><em>主播电台</em></a></li><li><a href="javascript:;"><em>歌手</em></a></li><li><a href="javascript:;"><em>新碟上架</em></a></li></ul></div></div></div>        </div><!-- 主页模块 --><div class="w"><div class="subw"><a class="arrow-l arrow ft-u" hidefocus="true" href="javascript:;" ></a><a class="arrow-r arrow ft-u" hidefocus="true" href="javascript:;" ></a><div class="l-pr"><img class="imgs" src="./images/pr-1.jpg" alt="pr1" ></div><div class="r-download"><!-- <img class="download-p" src="./images/download.png" alt="download"> --><a class="download-p" href="javascript:;"></a><p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>               </div><div class="dots"><a class="a-red" hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a><a hidefocus="true" href="javascript:;" ></a></div></div>   </div><!-- 主体模块 --><div class="main"><div class="main-l"><div class="m-l-top"><div class="top-nav"><span class="top-nav-logo"></span><a class="top-nav-l" href="javascript:;">热门推荐</a> <div class="top-nav-m"><a class="ft-u" hidefocus="true" href="javascript:;" >话语</a><span>|</span><a class="ft-u" hidefocus="true" href="javascript:;" >流行</a><span>|</span><a class="ft-u" hidefocus="true" href="javascript:;" >摇滚</a><span>|</span><a class="ft-u" hidefocus="true" href="javascript:;" >民谣</a><span>|</span><a class="ft-u" hidefocus="true" href="javascript:;" >电子</a></div><div class="top-nav-r ft-u"><a hidefocus="true" href="javascript:;" >更多</a><i class="more-logo">&nbsp;</i></div></div><div class="top-main"><ul class="top-main-news"><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li><li><div class="news-a"><img src="./images/news-a.jpg" alt="news"><div class="img-buttom"><span class="img-buttom-l"></span><span class="img-buttom-m">618万</span><a class="img-buttom-r" hidefous="true" href="javascript:;"></a></div></div><p><a class="ft-u" hidefocus="true" href="javascript:;" >按自己的方式，过自己的生活</a></p></li></ul>              </div></div><div class="m-l-middle"><div class="top-nav"><span class="top-nav-logo"></span><a class="top-nav-l" href="javascript:;">新碟上架</a> <div class="top-nav-r"><a hidefocus="true" href="javascript:;" >更多</a><i class="more-logo">&nbsp;</i></div></div><div class="middle-main"><div class="m-inner">                    <a class="click-flag-l" hidefocus="true" href="javascript:;" >&nbsp;</a><div class="roll-imgs"><ul><li><div class="cover-record"><img src="./images/record_1.jpg" alt="img"><a class="record" hidefocus="true" href="javascript:;" ></a><a class="play-record" hidefocus="true" href="javascript:;" ></a></div><p class="song-title"><a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a></p><p class="songer"><a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a></p></li>                               <li><div class="cover-record"><img src="./images/record_1.jpg" alt="img"><a class="record" hidefocus="true" href="javascript:;" ></a><a class="play-record" hidefocus="true" href="javascript:;" ></a></div><p class="song-title"><a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a></p><p class="songer"><a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a></p></li>                               <li><div class="cover-record"><img src="./images/record_1.jpg" alt="img"><a class="record" hidefocus="true" href="javascript:;" ></a><a class="play-record" hidefocus="true" href="javascript:;" ></a></div><p class="song-title"><a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a></p><p class="songer"><a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a></p></li>                               <li><div class="cover-record"><img src="./images/record_1.jpg" alt="img"><a class="record" hidefocus="true" href="javascript:;" ></a><a class="play-record" hidefocus="true" href="javascript:;" ></a></div><p class="song-title"><a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a></p><p class="songer"><a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a></p></li>                               <li><div class="cover-record"><img src="./images/record_1.jpg" alt="img"><a class="record" hidefocus="true" href="javascript:;" ></a><a class="play-record" hidefocus="true" href="javascript:;" ></a></div><p class="song-title"><a class="ft-u" hidefocus="true" href="javascript:;" >TWILIGHT</a></p><p class="songer"><a class="ft-u" hidefocus="true" href="javascript:;" >RADWIMPS</a></p></li>                               </ul></div><a class="click-flag-r" hidefocus="true" href="javascript:;" >&nbsp;</a></div></div></div><div class="m-l-bottom"><div class="top-nav"><span class="top-nav-logo"></span><a class="top-nav-l" href="javascript:;">榜单</a> <div class="top-nav-r"><a hidefocus="true" href="javascript:;" >更多</a><i class="more-logo">&nbsp;</i></div></div><div class="b-content"><div class="bc"><div class="bc-top"><img src="./images/notice.jpg" alt="原创榜"><div class="t-title"><h3>飙升榜</h3><a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a><a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a></div></div><dd><ol><li><span class="no no-top">1</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">2</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">3</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">4</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">5</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">6</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">7</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">8</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">9</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">10</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li></ol><div class="b-more"><a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a></div></dd></div><div class="bc"><div class="bc-top"><img src="./images/notice.jpg" alt="原创榜"><div class="t-title"><h3>飙升榜</h3><a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a><a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a></div></div><dd><ol><li><span class="no no-top">1</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">2</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">3</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">4</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">5</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">6</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">7</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">8</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">9</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">10</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li></ol><div class="b-more"><a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a></div></dd></div><div class="bc"><div class="bc-top"><img src="./images/notice.jpg" alt="原创榜"><div class="t-title"><h3>飙升榜</h3><a class="tt-play" title="播放" hidefocus="true" href="javascript:;" ></a><a class="tt-collect" title="收藏" hidefocus="true" href="javascript:;" ></a></div></div><dd><ol><li><span class="no no-top">1</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">2</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no no-top">3</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">4</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">5</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">6</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">7</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">8</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">9</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li><li><span class="no">10</span><a hidefocus="true" href="javascript:;">ginger snaps</a></li></ol><div class="b-more"><a class="click-flag-r" hidefocus="true" href="javascript:;" >查看全部></a></div></dd></div><!-- <div class="bc-l"></div><div class="bc-m"></div><div class="bc-r"></div> --></div></div></div><div class="main-r"><div class="mr-top"><p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p><a hidefocus="true" href="javascript:;" >用户登录</a></div><div class="mr-middle"><h3><span>入驻歌手</span><a hidefocus="true" href="javascript:;">查看全部></a></h3><ul><li><img src="./images/slider.jpg" alt="Fine乐队"><div class="li-content"><h4><span>Fine乐队</span></h4>  <p>独立创作人</p></div>  </li><li><img src="./images/slider.jpg" alt="Fine乐队"><div class="li-content"><h4><span>Fine乐队</span></h4>  <p>独立创作人</p></div>  </li><li><img src="./images/slider.jpg" alt="Fine乐队"><div class="li-content"><h4><span>Fine乐队</span></h4>  <p>独立创作人</p></div>  </li><li><img src="./images/slider.jpg" alt="Fine乐队"><div class="li-content"><h4><span>Fine乐队</span></h4>  <p>独立创作人</p></div>  </li><li><img src="./images/slider.jpg" alt="Fine乐队"><div class="li-content"><h4><span>Fine乐队</span></h4>  <p>独立创作人</p></div>  </li></ul><div class="ask"><a class="a-content" hidefocus="true" href="javascript:;" ><i>申请成为网易音乐人</i></a></div></div><div class="mr-bottom"><h3>热门主播</h3><ul><li><img src="./images/slider-bottom.jpg" alt="莫非定律"><div class="lc"><h4><span class=".ft-u">莫非定律MoreFeel</span></h4>  <p>男女双人全创作独立乐团</p></div>  </li><li><img src="./images/slider-bottom.jpg" alt="莫非定律"><div class="lc"><h4><span class=".ft-u">莫非定律MoreFeel</span></h4>  <p>男女双人全创作独立乐团</p></div>  </li><li><img src="./images/slider-bottom.jpg" alt="莫非定律"><div class="lc"><h4><span class=".ft-u">莫非定律MoreFeel</span></h4>  <p>男女双人全创作独立乐团</p></div>  </li><li><img src="./images/slider-bottom.jpg" alt="莫非定律"><div class="lc"><h4><span class=".ft-u">莫非定律MoreFeel</span></h4>  <p>男女双人全创作独立乐团</p></div>  </li><li><img src="./images/slider-bottom.jpg" alt="莫非定律"><div class="lc"><h4><span class=".ft-u">莫非定律MoreFeel</span></h4>  <p>男女双人全创作独立乐团</p></div>  </li></ul></div></div></div><!-- 尾部 --><div class="g-ft"><div class="g-ft-set"><div class="l-ft"><div class="links"><a href="javascript:;">服务条款</a><span class="line">|</span><a href="javascript:;">隐私政策</a><span class="line">|</span><a href="javascript:;">儿童隐私政策</a><span class="line">|</span><a href="javascript:;">版权投诉指引</a><span class="line">|</span><a href="javascript:;">意见反馈</a><span class="line">|</span></div><div class="sup-copyright"><span>网易公司版权所有©1997-2021&nbsp&nbsp</span><a href="javascript:;">杭州乐读科技有限公司运营：浙网文[2021] 1186-054号</a></div><div class="mid-copyright"><span>违法和不良信息举报电话：0571-89853516&nbsp&nbsp举报邮箱：</span><a href="javascript:;">ncm5990@163.com</a></div><div class="sub-copyright"><a href="javascript:;">粤B2-20090191-18  工业和信息化部备案管理系统网站&nbsp&nbsp</a><a href="javascript:;" class="police"><span class="police-logo">&nbsp;</span><span class="police-text">浙公网安备 33010902002564号</span></a></div></div><ul class="r-ft"><li><a href="javasript:;" class="newlogo"></a><span>Amped Studio</span></li><li><a href="javasript:;" class="newlogo"></a><span>Amped Studio</span></li><li><a href="javasript:;" class="newlogo"></a><span>Amped Studio</span></li><li><a href="javasript:;" class="newlogo"></a><span>Amped Studio</span></li><li><a href="javasript:;" class="newlogo"></a><span>Amped Studio</span></li></ul></div></div><!--1.开发环境版本, 包含了有帮助的命令警告--><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:".parent",data:{message: "音乐/视频/电台/用户",show1: true,show2: false},methods:{change:function(){this.show1 = !this.show1;this.show2 = !this.show2;}}})</script> -->
</body>
</html>

CSS-1(base.css):

body {min-width: 982px;background: #f5f5f5;
}/* 将所有内边距清零 */
*{margin: 0;padding: 0;
}/* 去掉li前面的小原点 */
li {list-style: none;
}div, span {display: block;
}em,i {font-style: normal;
}body, textarea, select, input, button, a, label{text-decoration: none;font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #333;
}

CSS-2(commen.css):

#g-topbar {/* 铺满整个屏幕 */width: 100%;height: 105px;
}
/* 顶部样式 */
.m-top {width: 100%;height: 70px;background-color: rgb(36, 36, 36);
}
.m-top .wrap {width: 1100px;height: 100%;margin: 0 auto;
}
/* 顶部 网易云logo */
.m-top .logo {float: left;width: 176px;height: 70px;background-image: url("../images/topbar.png");cursor: pointer;
}
/* 顶部 中间导航栏 */
.m-top .m-nav {float: left;width: 508;height: 70px;
}
.m-nav li, .m-nav li span, .m-nav a, .m-nav a em{float: left;height: 70px;font-size: 14px;text-align:center;line-height: 70px;color: #fff;cursor: pointer;
}
.m-nav li span{padding-left: 18px;
}
.m-nav .first {width: 94px;
}
.m-nav .first .cor{display: block;position: absolute;top: 64px;width: 12px;height: 7px;margin-left: 20px;background-position: -226px 0;background-image: url("../images/topbar.png") ;
}
.m-nav li:nth-child(2) {width: 94px;
}
.m-nav li:nth-child(3), .m-nav li:nth-child(4) {width: 66px;
}
.m-nav li:nth-child(5) {width: 80px;
}
.m-nav .last{position: relative;width: 108px;
}
/* hot 图标 */
.m-nav .last .hot{display: block;position: absolute;top: 21px;left: 100px;width: 28px;height: 19px;background-position: -190px 0;background-image: url("../images/topbar.png") ;}.m-nav li:hover {background-color: #000;
}/* 顶端 登录按钮 */
.m-top .m-tophead {float: right;width: 28px;height: 45px;margin-top: 7px;margin: 19px 0 0 20px;background-position: right -47px;
}
.m-tophead .link {display: block;width: 28px;margin-top: 7px;color: #787878;cursor: pointer;
}
/* 顶部 创作中心 模块 */
.m-top .m-create-center {display: block;box-sizing: border-box;float: right;width: 90px;height: 32px;margin: 19px 0 0 12px;padding-left: 16px;line-height: 33px;color: #ccc;border: 1px solid #4f4f4f;border-radius: 20px;
}
.m-top .m-search {position: relative;float: right;width: 158px;height: 32px;
}
.m-search .searchbg {float: right;width: 158px;height: 32px;margin-top: 19px;border-radius: 32px;background: url("../images/topbar.png") no-repeat 0 9999px;    background-position: 0 -99px;background-color: #fff;
}
.m-search .searchbg .parent {position: relative;margin: 8px 0 0 30px;
}
.m-search .searchbg .parent .txt {width: 95%;border:  none;outline: none;line-height: 16px;background: transparent;}
.m-search .searchbg .parent .ph {display: block;position: absolute;top: 0;left: 2px;width: 90%;   color: #9b9b9b;cursor: text;
}/* 顶部的第二模块 */
.m-subtop  {  width: 100%;height: 35px;border-bottom: 1px solid #a40011;background-color: #C20C0C;
}.m-subtop .ms-set {  width: 1100px;height: 34px;margin: 0 auto;
}.m-subtop .ms-set .navitems {width: 582px;height: 34px;margin-left: 179px;
}
.m-subtop .ms-set .navitems ul li {display: block;float: left;height: 34px;line-height: 34px;font-size: 12px;
}
.m-subtop .ms-set .navitems ul li a em{float: left;padding: 0 30px;font-size: 12px;color: #fff;cursor: pointer;
}
.m-subtop .ms-set .navitems ul li:nth-child(2n) em{width: 48px;padding-left: 20px;
}
.m-subtop .ms-set .navitems ul li:nth-child(2n-1) em{width: 24px;padding-left: 30px;
}/* .m-subtop .ms-set .navitems ul li a em .f-icon{display: inline-block;width: 8px;height: 8px;top: 2px;background-image: url("../images/white-r-icon@3x.png");background-size: cover;
} *//* 底部模块制作 */
.g-ft  {width: 100%;height: 164px;border-top: 1px solid #d3d3d3;background-color: #f2f2f2;
}/* 设置尾部居中 */
.g-ft .g-ft-set {width: 980px;margin: 0 auto;
}.g-ft .g-ft-set .l-ft {display: block;float: left;width: 520px; padding: 15px;line-height: 24px;
}
.l-ft span{display: block;float: left;color: #666;
}
.g-ft .g-ft-set .l-ft .links {width: 100%;height: 24px;
}
.g-ft .g-ft-set .l-ft .links a{float: left;color: #999;
}
.g-ft .g-ft-set .l-ft .links .line {display: block;float: left;margin: 0 11px;
}
.g-ft .g-ft-set .l-ft .links a:hover {text-decoration: underline #999;
}
.g-ft .g-ft-set .l-ft .sup-copyright, .g-ft .g-ft-set .l-ft .mid-copyright{width: 100%;height: 24px;
}
.g-ft .g-ft-set .l-ft .sub-copyright {width: 100%;height: 28px;
}
.g-ft .g-ft-set .l-ft .sub-copyright a{float: left;
}
.g-ft .g-ft-set .l-ft .sub-copyright .police-logo {width: 20px;height: 20px;background-image: url("../images/police.png");
}
.sup-copyright a,.mid-copyright a, .sub-copyright a {color: #666;
}
.sup-copyright a:hover, .mid-copyright a:hover, .sub-copyright a:hover{text-decoration: underline;
}
.sub-copyright .police-text:hover{text-decoration: underline;
}
.g-ft .g-ft-set .r-ft {float: left;width: 420px;height: 100%;margin-top: 33px;
}
.g-ft .g-ft-set .r-ft li {float: left;margin-right: 30px;
}
.g-ft .g-ft-set .r-ft li .newlogo {display: block;float: left;width: 50px;height: 45px;background-image: url("../images/foot_enter_new.png");background-size: 113px 552px;background-position: -63px -457px;
}
.g-ft .g-ft-set .r-ft li span { float: left;margin: 50px -59px;
}

CSS-3(main-css):

/* 主页模块 */
/* 模块w 左边轮播图 右边下载图 */
.w {width: 100%;height: 285px;background-image: url("../images/pr-1-bg.jpg");background-size: 6000px;background-position: center center;
}.w .subw {position: relative;width: 982px;height: 100%;margin: 0 auto;
}.w .subw .arrow{display: block;position: absolute;top: 50%;margin-top: -31px;width: 37px;height: 63px;text-indent: -9999px;
}.w .subw .arrow-l {left: -63px;background: url("../images/banner.png") 0 9999px no-repeat;background-position: 0 -360px;
}
.w .subw .arrow-r {right: -63px;background: url("../images/banner.png") 0 9999px no-repeat;background-position: 0 -508px;
}.w .subw .l-pr {float: left;width: 728px;height: 100%;cursor: pointer;
}.w .subw .l-pr .imgs {width: 728px;height: 100%;
}.w .subw .r-download {position: relative;display: block;float: right;width: 254px;height: 283px;background-image: url("../images/download.png");zoom: 1;
}.w .subw .r-download .download-p {position: absolute;display: block;width: 215px;height: 56px;left: 19px;top: 186px;background-image: url("../images/download.png");background-position: 0px -290px;zoom: 1;
}.w .subw .r-download p {position: absolute;margin: 10px 0;top: 245px;left: 19px;color: #8d8d8d;;
}.w .subw .dots {position: absolute;top: 259px;left: 0;width: 730px;height: 20px;text-align: center;
}.w .subw .dots .a-red {width: 20px;height: 20px;background: url("../images/banner.png") 0 9999px no-repeat;background-position: -22px -343px;
}.w .subw .dots a{display: inline-block;width: 20px;height: 20px;background: url("../images/banner.png") 0 9999px no-repeat;background-position: 3px -343px;
}/* 主体模块 */
.main {width: 982px;height: 1425px;margin: 0 auto;border: 1px solid #d3d3d3;border-width: 0 1px;background-color: #fff;
}
/* 主体模块的左部分*/
.main-l {float: left;width: 690px;height: 1365px;padding: 19px;/* background-color: #ccc; */
}.m-l-top {width: 100%;height: 523px;margin-bottom: 35px;
}.top-nav {height: 33px;padding-right: 10px;border-bottom: 2px solid #C10D0C;
}.top-nav-logo {float: left;width: 35px;height: 30px; background-image: url("../images/index.png");background-position: -225px -158px;;
}.top-nav-l {float: left;font-size: 20px;font-weight: normal;line-height: 28px;
}.top-nav-m {float: left;width: 240px;height: 16px;margin: 7px 0 0 20px;
}.top-nav-m span{display: inline;width: 3px;margin: 0 5px;
}.top-nav-r {float: right;width: 50px;height: 16px;margin-top: 10px;
}.top-nav-r .more-logo {display: inline-block;width: 12px;height: 12px;margin-left: 4px;margin-top: -2px;/* 垂直对齐一幅图像 */vertical-align: middle;background-image: url(../images/index.png);background-position: 0 -240px;
}.top-main {width: 690px;height: 468px;margin-top: 20px;
}.top-main .top-main-news {width: 690px;height: 468px;
}.top-main .top-main-news li {float: left;width: 140px;height: 204px;padding-right: 32px;overflow: hidden;/* background-color: red; */
}.top-main .top-main-news li .news-a {position: relative;width: 140px;height: 140px;
}.top-main .top-main-news li .news-a img {cursor: pointer;transition: all .3s;
}.top-main .top-main-news li .news-a img:hover{transform: scale(1.02);
}.top-main .top-main-news li .news-a .img-buttom {position: absolute;width: 100%;height: 27px;bottom: 0;background-image: url("../images/coverall.png");background-position: 0 -537px;;
}.top-main .top-main-news li .news-a .img-buttom .img-buttom-l {display: block;float: left;width: 14px;height: 11px; margin: 9px 5px 9px 10px;background-image: url("../images//play-plug.png");background-position: 0 -24px;
} .top-main .top-main-news li .news-a .img-buttom .img-buttom-m {display: block;float: left;margin-top: 7px;color: #ccc;
}.top-main .top-main-news li .news-a .img-buttom .img-buttom-r {display: block;float: right;width: 16px;height: 17px;margin: 5px 10px;background-image: url("../images/play-plug.png");background-position: 0 0px;
}.top-main .top-main-news li .news-a .img-buttom .img-buttom-r:hover{ background-image: url("../images/play-plug.png");background-position: 0 -60px;
}.top-main .top-main-news li p {margin: 8px 0;}.m-l-middle {width: 100%;height: 244px;margin-bottom: 37px;}
.m-l-middle .middle-main {width: 688px;height: 186px;margin-top: 20px;border: 1px solid #d3d3d3;background-color: #f5f5f5;
}.m-l-middle .middle-main .m-inner {position: relative;width: 669px;height: 184px;padding-left: 16px;border: 1px solid #fff;
}.m-l-middle .middle-main .m-inner .click-flag-l {position: absolute;left: 4px;height: 16px;width: 16px;top: 71px;background-image: url("../images/index.png");background-position: -260px -75px;background-repeat: no-repeat;
}.m-l-middle .middle-main .m-inner .click-flag-r {position: absolute;right: 4px;height: 16px;width: 16px;top: 71px;background-image: url("../images/index.png");background-position: -300px -75px;background-repeat: no-repeat;
}
.m-l-middle .middle-main .m-inner .roll-imgs {width: 645px;height: 150px;margin-top: 28px;
}.m-l-middle .middle-main .m-inner .roll-imgs ul li{float: left;width: 118px;height: 150px;margin-left: 11px;
}.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record {position: relative;margin-bottom: 7px;
}.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record img{display: block;height: 100px;width: 100px;
}.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record .record {position: absolute;float: left;top: 0;height: 100px;width: 118px;   background: url("../images/coverall.png") no-repeat;background-position: 0 -570px;
}.m-l-middle .middle-main .m-inner .roll-imgs ul li .cover-record .play-record {position: absolute;float: left;bottom: 4px;left: 73px;width: 22px;height: 22px;background: url("../images/play-plug.png");background-position: 0 -85px;
}.song-title a{line-height: 18px;color: #000;
}.songer a {line-height: 18px;
}/* 主体底部模块 */
.m-l-bottom {width: 100%;height: 527px;
}.m-l-bottom .b-content {width: 688px;height: 472px;margin-top: 20px;padding-left: 1px;background: url("../images/index_bill.png") no-repeat;
}.m-l-bottom .b-content .bc {float: left;width: 229px;
}.m-l-bottom .b-content .bc .bc-top {width: 211px;height: 100px;padding: 20px 0 0 19px;
}.m-l-bottom .b-content .bc .bc-top img { float: left;width: 80px;height: 80px;cursor: pointer;
}.m-l-bottom .b-content .bc .bc-top .t-title {float: left;width: 116px;margin: 6px 0 0 10px;
}.m-l-bottom .b-content .bc .bc-top .t-title .tt-play {display: block;float: left;width: 24px;height: 22px;margin: 10px 8px 0 0;background: url("../images/index.png") no-repeat;background-position: -265px -205px;
}.m-l-bottom .b-content .bc .bc-top .t-title .tt-collect {display: block;float: left;width: 24px;height: 22px;margin-top: 10px;background: url("../images/index.png") no-repeat;background-position: -300px -205px;
}.m-l-bottom .b-content .bc dd ol {height: 319px;margin-left: 50px;line-height: 32px;
}.m-l-bottom .b-content .bc dd ol li {height: 32px;
}.m-l-bottom .b-content .bc dd ol li .no-top {color: #C10D0C;
}.m-l-bottom .b-content .bc dd ol li .no {float: left;width: 35px;height: 32px;margin-left: -35px;text-align: center;font-size: 16px;
}.m-l-bottom .b-content .bc dd ol li a {float: left;width: 170px;height: 32px;
}.m-l-bottom .b-content .bc dd .b-more {clear: both;height: 32px;margin-right: 32px;text-align: right;line-height: 32px;
}.m-l-bottom .b-content .bc dd .b-more a {color: #000;
}/* 侧边栏模块 */
.main-r {float: right;width: 250px;height: 1425px;border-left: 1px solid #ccc;
}.main-r .mr-top {height: 126px;background: url("../images/index.png") no-repeat 0 9999px;background-position: 0 0;
}.main-r .mr-top p {width: 205px;margin: 0 auto;padding: 16px 0;line-height: 22px;
}.main-r .mr-top a {display: block;width: 100px;height: 31px;margin: 0 auto;line-height: 31px;text-align: center;color: #fff;text-shadow: 0 1px 0 #8a060b;background: url("../images/index.png") no-repeat 0 9999px;background-position: 0 -195px;
}.main-r .mr-middle {height: 455px;width:250px;margin-top: 15px;
}.main-r .mr-middle h3 {height: 23px;margin: 0 20px;border-bottom: 1px solid #ccc;color: #333;
}.main-r .mr-middle h3 span {float: left;
}.main-r .mr-middle h3 a {float: right;color: #666;font-weight: normal;
}.main-r .mr-middle ul {width: 230px;height: 380px;margin: 6px 0 14px 20px;
}.main-r .mr-middle ul li {float: left;width: 210px;height: 62px;margin-top: 14px;background: #fafafa;
}.main-r .mr-middle ul li:hover {cursor: pointer;background-color: #ddd;
}.main-r .mr-middle ul li img {float: left;width: 62px;height: 62px;
}.main-r .mr-middle ul li .li-content {float: left;width: 133px;height: 60px;padding-left: 13px;border: 1px solid #e9e9e9;border-left: none;
}.main-r .mr-middle ul li .li-content span {width: 90%;margin-top: 8px;font-size: 14px;
}.main-r .mr-middle ul li .li-content p {width: 90%;margin-top: 8px;
}.main-r .mr-middle .ask .a-content {margin-left: 20px;border-radius: 4px;background: url("../images/text-background.png") no-repeat 0 9999px;background-position: right -100px;
}.main-r .mr-middle .ask .a-content i {display: inline-block;height: 31px;width: 170px;padding: 0 15px 0 20px;line-height: 31px;text-align: center;font-weight: bold;background: url("../images/text-background.png") no-repeat 0 9999px;background-position: 0 -59px;
}.main-r .mr-bottom {width: 250px;height: 294px;margin-top: 30px;
}.main-r .mr-bottom h3 {height: 23px;margin: 0 20px;border-bottom: 1px solid #ccc;color: #333;
}.main-r .mr-bottom ul {margin: 20px 0 0 20px;
}.main-r .mr-bottom ul li {float: left;width: 210px;height: 50px;cursor: pointer;
}.main-r .mr-bottom ul li img {float: left;width: 40px;height: 40px;margin-right: 10px;box-shadow: 0 0 1px #333 inset;
}.main-r .mr-bottom ul li .lc {line-height: 21px;
}

网易云(HTML+CSS)相关推荐

  1. 【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5

    效果实现还是很基础的 主要是动画 简单的动画使用了css的transition 过渡 加 hover实践实现 盘转动的 使用了js 因考虑到停止时暂不能解决停留在原处 故使用的 setInterval ...

  2. CSS——网易云音乐之下载客户端页面的实现

    文章目录 前言 一.结构的分析 二.实现过程 1.HTML结构 2.CSS样式 总结 前言 今天要和大家分享的是网易云音乐下载客户端页面的实现过程. 一.结构的分析 示例图: 结构的分析: 照例,在书 ...

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

    文章目录 前言 一.结构的布局 1.示例图 2.结构分析 二.实现过程 1.HTML结构 2.CSS样式 总结 前言 本文主要介绍了网易云音乐首页榜单区域的实现过程. 一.结构的布局 示例图: 结构分 ...

  4. HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1

    HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodej ...

  5. js + css 做出网易云音乐的轮播图

    先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...

  6. CSS——网易云音乐首页之热门推荐歌单的制作

    文章目录 前言 一.结构的布局 二.实现过程 1.HTML结构 2.CSS样式 总结 前言 本文主要讲述了网易云音乐首页的热门推荐歌单部分的实现过程,我将从先分析大致结构与布局,其次书写样式的顺序进行 ...

  7. 如何借助SVG+CSS用2个小时撸完一个网易云音乐的动效海报（可控制速度）

    因为平时也关注网易UEDC的订阅号,前几天就看到了这么一个动效,主题是<网易云音乐2018年度听歌报告>,内容是一个人在努力蹬车因为构图简单,创意又不错,所以就试了下用SVG+CSS动画实 ...

  8. HTML+CSS实现网易云音乐首页的主播电台页面

    HTML+CSS实现网易云音乐首页的主播电台页面 这个页面首先使用了css的定位(postion)属性.弹性盒子(display)属性以及VM与REM,图标使用了阿里巴巴矢量图标库的矢量图标.下面让我 ...

  9. CSS——网易云音乐首页之轮播图的实现（完整版）

    文章目录 前言 一.结构的分析 二.使用步骤 1.HTML结构 2.CSS样式 总结 前言 本文主要介绍的是网易云音乐首页之轮播图的实现,细心的小伙伴会发现,之前有发过网易轮播图的制作方法,但并没有完 ...

  10. 使用HTML5，CSS。制作一个简单有新颖的“网易云音乐排行榜“。

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

最新文章

  1. python 微服务框架 知乎_序: 我需要一个什么样的微服务框架
  2. 彩色图批量转换成灰度图、批量格式转换、批量重命名
  3. Git与Repo入门
  4. 消费级GPU、速度提升3000倍，微软FastNeRF实现200FPS高保真神经渲染
  5. 删除矩阵中的任意一列元素
  6. python的模块导入问题_python导入模块错误怎么解决
  7. ios 数组中的字典排序_题解 | 26.删除排序数组中的重复项
  8. 使用jQuery快速高效制作网页交互特效(6)
  9. arm汇编指令集_汇编入门第一篇，小白也能看懂
  10. 网络设置管理 NetSetMan Pro v4.7.1 Lite 绿色便携版
  11. 【软件安装】TeXLive 2022安装（Latex下载，安装，测试，升级）教程
  12. 可以丢掉SGD和Adam了，新的深度学习优化器Ranger：RAdam + LookAhead强强结合
  13. html中如何改变鼠标样式,HTML中常用鼠标样式
  14. ＜Linux开发＞ ubuntu开发工具-Ubuntu测试网速及实时网速图
  15. 阿里云ECS服务器跨账号迁移
  16. tableau 字段去重_Tableau
  17. 织梦标签调用：最新文章、相关文章、推荐文章、热点文章、头条
  18. GD32实战11__SPI FLASH
  19. 【设计模式】沉浸式学习（持续更新中。。。）
  20. 【算法题目】【DFS】岛屿数量 岛屿中面积最大值

热门文章

  1. Windows下的CMake下载与安装
  2. 我从不劝退，我就是退。
  3. 联想m7400 linux驱动下载,联想M7400W驱动-联想M7400W打印机驱动下载 v1.6.0.0官方版--pc6下载站...
  4. 企业微信API群机器人配置
  5. oracle asm 日志,oracle 11g RAC 下ASM实例的alert日志告诉我们什么
  6. java native方法使用
  7. 关于Git小乌龟的安装及简单使用
  8. C# 身份证号取年龄
  9. adadelta算法_【深度学习】深入理解优化器Optimizer算法（BGD、SGD、MBGD、Momentum、NAG、Adagrad、Adadelta、RMSprop、Adam）...
  10. 功能全面的开源小程序商城-CRMEB