网易云(HTML+CSS)

这是用HTML和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;
}

common-main.css

.ft-u:hover {
    text-decoration: underline;
}
  • 54
    点赞
  • 255
    收藏
    觉得还不错? 一键收藏
  • 35
    评论
评论 35
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值