用HTML+CSS仿網易雲音樂網站(6個頁面)

📂文章目錄

一、👨‍🎓網站題目
二、✍️網站描述
三、📚網站介紹
四、💠網站示範
五、⚙️ 網站代碼

🧱HTML結構代碼
💒CSS樣式代碼

六、🥇 如何讓學習不再盲目
七、🎁更多幹貨

一、👨‍🎓網站題目

🎵 音樂網頁設計、🎸仿網易雲音樂、各大音樂官網網頁、🎶明星音樂演唱會主題、🥁爵士樂音樂、民族音樂、等網站的設計與制作。

二、✍️網站描述

🏷️HTML音樂網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，内容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字型分别設定不同字号大小。導航區域設定了背景圖。子頁面有純文字頁面和圖文并茂頁面。

🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)

頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
菜單美觀、醒目，二級菜單可正常彈出與跳轉。
要有JS特效，如定時切換和手動切換圖檔輪播。
頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
頁面清爽、美觀、大方，不雷同。。
不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。

三、📚網站介紹

📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。

📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。

📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。

📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；

📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：

Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++

等任意html編輯軟體進行運作及修改編輯等操作）。

其中：

（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；

（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；

（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。

四、💠網站示範

五、⚙️ 網站代碼

🧱HTML結構代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>網易雲音樂</title>
    <link rel="stylesheet" href="css/reset.css">
    <!-- <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1650595094994/css/iconfont.css"> -->
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/conmom.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1650595094994/bitbug_favicon%20(2).ico" type="image/x-icon">
</head>

<body>
    <!-- 第一排  -->
    <div class="topnav">
        <!-- 版心 -->
        <div class="container">
            <!-- 搜尋欄 -->
            <div class="topnav-searchbox">
                <!-- 左 -->
                <img src="picture/logo.png" alt="" class="topnav-logo">
                <span class="topnav-wyy "><a href="#">網易雲音樂</a></span>
                <div class="topnav-nav">
                    <div>
                        <a href="#">發現音樂</a>
                        <div class="topnav-nav-xsj"></div>
                    </div>
                    <div><a href="my-music.html">我的音樂</a></div>
                    <div><a href="friend.html">朋友</a></div>
                    <div><a href="shopping.html">商城</a></div>
                    <div><a href="musician.html">音樂人</a></div>
                    <div class="topnav-nav-last">
                        <a href="client.html">下載下傳用戶端</a>
                        <div class="topnav-nav-hot">HOT</div>
                    </div>
                </div>

                <!-- 右 -->
                <p><a href="#">登入</a></p>
                <a href="#">
                    <div class="topnav-nav-right">創作者中心</div>
                </a>
                <div class="topnav-nav-input">
                    <i class="iconfont"></i>
                    <input type="text" placeholder="音樂/視訊/電台/使用者">
                </div>
            </div>
        </div>
    </div>

    <!-- 第二排 推薦 -->
    <div class="recommend " id="id-top">
        <!-- 版心 -->
        <div class="container">
            <div class="recommend-box">
                <ul>
                    <li><a href="#">推薦</a></li>
                    <li><a href="#">排行榜</a></li>
                    <li><a href="#">歌單<img src="picture/[email protected]" alt="" class="R">
                        </a>
                    </li>
                    <li><a href="#">主播電台</a></li>
                    <li><a href="#">歌手</a></li>
                    <li><a href="#">新碟上架</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 第三排 輪播圖 -->
    <div class="slideshow">
        <!-- 版心 -->
        <div class="newcontainer clearfix">
            <!--  左邊圖檔  -->
            <div class="bj-left clearfix">
                <img src="picture/bj.jpg" alt="">
            </div>

            <!-- 下面 輪播圖 -->
            <div class="slideshow-sli">
                <ul>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                    <li>
                        <a href="#"></a>
                    </li>
                </ul>
            </div>

         
                        <a class="bof"></a>
                        </span>
                    </div>
                    <!-- 4 -->
                    <div>
                        <img src="picture/84.jpg">
                        <a href="#">好想你 (粵語歌詞)</a>
                        <span class="img-back-g"></span>
                        <span class="img-bottom">
                            <span class="bfl"></span>
                        <b>235萬</b>
                        <a class="bof"></a>
                        </span>
                    </div>
                    <!-- 5 -->
                    <div>
                        <img src="picture/85.jpg">
                        <a href="#"><span class="program"></span>我要找到你 (完整版已上線啦~)</a>
                        <span class="img-back-g"></span>
                        <span class="huangg"></span>
                        <span class="img-bottom">
                            <span class="bfl"></span>
                        <b>125萬</b>
                        <a class="bof"></a>
                        </span>
                    </div>
                    <!-- 6 -->
                    <div>
                        <a href="#">
                            <img src="picture/86.jpg"></a>
                        <a href="#"><span class="program"></span>世間美好與你環環相扣</a>
         

                <!-- 新品上架 -->
                <div class="xp clearfix">
                    <!-- 左 -->
                    <div class="yuan"></div>
                    <p>新品上架</p>

                    <!-- 右 -->
                    <div class="jt"></div>
                    <h3><a href="#">更多</a></h3>
                </div>

                <!-- 新碟上架 -->
                <div class="plate clearfix">
                    <ul>
                        <li>
                            <div class="plate-img-box">
                                <img src="picture/51.jpg" alt="">
                                <div class="img-back-z"></div>
                                <a href="#" class="plate-img-box-a1">我愛你這是最好</a>
                                <a href="#" class="plate-img-box-a2">群星</a>
                            </div>
                            <a href="#">
                                <div class="action"></div>
                            </a>
                        </li>
                        <li>
                            <div class="plate-img-box">
                                <img src="picture/52.jpg" alt="">
                                <div class="img-back-z"></div>
                                <a href="#" class="plate-img-box-a1">與火星的孩子對話</a>
                                <a href="#" class="plate-img-box-a2">華晨宇</a>
                            </div>
                            <a href="#">
                                <div class="action"></div>
                            </a>
                        </li>
                        <li>
                            <div class="plate-img-box">
                                <img src="picture/53.jpg" alt="">
                                <div class="img-back-z"></div>
                                <a href="#" class="plate-img-box-a1">MLRRORS</a>
                                <a href="#" class="plate-img-box-a2">王嘉爾</a>
                            </div>
                            <a href="#">
                                <div class="action"></div>
                            </a>
                        </li>
                        <li>
                            <div class="plate-img-box">
                                <img src="picture/54.jpg" alt="">
                                <div class="img-back-z"></div>
                                <a href="#" class="plate-img-box-a1">初戀那件小事 電</a>
                                <a href="#" class="plate-img-box-a2">群星</a>
                            </div>
                            <a href="#">
                                <div class="action"></div>
                            </a>
                        </li>
                        <li>

            <!-- 右邊 -->
            <div class="music-bottom-right">
                <div class="music-bottom-right-box">
                    <a href="#"><span class="music-bottom-right-img1">
                        </span></a>
                    <li>使用者認證</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img2">
                        </span></a>
                    <li>獨立音樂人</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img3">
                        </span></a>
                    <li>贊賞</li>
                </div>
                <div class="music-bottom-right-box">
                    <a href="#"> <span class="music-bottom-right-img4">
                        </span></a>
                    <li>視訊獎勵</li>
                </div>
            </div>
        </div>

        <!-- 放回,固定 -->
        <a href="#id-top" class="fh-top" title="傳回頂部"></a>
    </div>
</body>

</html>

💒CSS樣式代碼

/* 第一排 */
.topnav-searchbox {
    width: 100%;
    height: 86px;
    background-color: #242424;
}

.topnav {
    background-color: #242424;
    border-bottom: 1px solid #202020;
}

.topnav-logo {
    float: left;
    margin-top: 20px;
}

.topnav-wyy a {
    line-height: 86px;
    font-size: 22px;
    color: #fff;
}

.topnav-searchbox .topnav-nav-input {
    float: right;
    width: 158px;
    height: 32px;
    margin-top: calc((86px - 32px)/2);
    line-height: 32px;
    border: 1px solid transparent;
    border-radius: 32px;
    box-sizing: border-box;
    background-color: #ffffff;
    margin-right: 16px;
}

.topnav-nav-input i {
    float: left;
    margin-left: 8px;
}

.topnav-nav-input input {
    float: left;
    width: 130px;
    height: 18px;
    color: #9b9b9b;
    border: 0;
    margin-top: calc((32px - 18px)/2);
}


/* 第二排 推薦 */
.recommend {
    width: 100%;
    height: 34px;
    border-bottom: 4px solid #a40011;
    background-color: #c20c0c;
}

.recommend-box {
    margin-left: 198px;
    font-size: 12px;
}

.recommend-box li {
    float: left;
    height: 20px;
    border: 1px solid transparent;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 0 13px;
    margin: 7px 17px 0;
    line-height: 20px;
}

.recommend-box li:nth-child(1) {
    background-color: rgba(0, 0, 0, 0.14);
}

.recommend-box li:hover {
    background-color: rgba(0, 0, 0, 0.14);
}

.recommend-box ul {
    float: left;

}

.recommend-box li a {
    color: #ffffff;
}

.recommend-box li:nth-child(3) {
    position: relative;
}

.R {
    position: absolute;
    width: 8px;
    height: 8px;
    top: 1px;
    left: 37px;
}


/* 第三排 輪播圖 */
.slideshow {
    background-image: url(../image/109951164532691333.jpg);
}

.slideshow {
    width: 100%;
    height: 284px;
    border-bottom: 1px solid #ada4a5;
    background-image: url(../image/Snipaste_2019-12-03_09-04-33.png);
}

.bj-left-img {
    display: none;
}

.slideshow .bj-left {
    float: left;
    height: 284px;
}

.slideshow .bj-left img {
    float: left;
    width: 730px;
    height: 284px;
}

.slideshow .bj-right {
    float: right;
    width: 250px;
    height: 284px;
    background-image: url(../image/download.png);
}

.slideshow .newcontainer {
    height: 284px;
}




.hot .newcontainer {
    height: 1434px;
}

/* 左邊,上部導航 */
.hot-left {
    float: left;
    border-left: 1px solid #dddddd;
    width: 729px;
    height: 1434px;
    background-color: #ffffff;
}

.hot-left-top-nav {
    width: 690px;
    background-color: violet;
}

.hot-left-top p,
.hot-left-top a {
    float: left;
}

.hot-left-top {
    width: 690px;
    height: 36px;
    line-height: 36px;
    padding-top: 17px;
    margin-left: 20px;
    border-bottom: 2px solid #c10d0c;
    margin-bottom: 20px;
}

.hot-left-top p {
    font-size: 20px;
    margin: 0 10px 0 10px;
}

.hot-left-top li {
    float: left;
    color: #d2d2d2;
}

.hot-left-top a {
    margin: 0 12px;
    color: #6f6f6f;
}

.yuan {
    float: left;
    width: 16px;
    height: 14px;
    margin-top: 12px;
    margin-left: 10px;
    background-image: url(../image/index.png);
    background-position: -234px -164px;
}

/* top-右 */
.hot-left-top .jt {
    float: right;
    width: 12px;
    height: 12px;
    background-image: url(../image/index.png);
    background-position: 0 -240px;
    margin-right: 12px;
    margin-left: 0;
    margin-top: calc((36px - 12px) / 2);
}


.fh-top {
    position: fixed;
    right: 180px;
    bottom: 130px;
    width: 49px;
    height: 44px;
    background-image: url(../image/sprite.png);
    background-position: -265px -47px;
}

.fh-top:hover {
    background-image: url(../image/sprite.png);
    background-position: -325px -47px;
}

六、🥇 如何讓學習不再盲目

入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
把最新技術挂在嘴邊，還不如把過時技術牢記心中。
活到老學到老，隻有一招半式是闖不了江湖的。
看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
書讀百遍其義自見，别指望讀一遍就能掌握。
請把教程裡的例子親手實踐下，即使案例中有完整源碼。
把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
不要漏掉教程中任何一個習題——請全部做完并做好筆記。
水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
做好儲存源檔案的習慣，這些都是你的知識積累。
遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。

用HTML+CSS仿網易雲音樂網站(6個頁面)

📂文章目錄

一、👨‍🎓網站題目

二、✍️網站描述

三、📚網站介紹

四、💠網站示範

五、⚙️ 網站代碼

🧱HTML結構代碼

💒CSS樣式代碼

六、🥇 如何讓學習不再盲目

繼續閱讀

【學生網頁作業】航海王動漫網頁 html+ css + JavaScript 簡單的學生網頁作業源碼

html靜态網站基于遊戲網站設計與實作共計10個頁面 (仿地下城與勇士遊戲網頁)

HTML+CSS大作業：衆志成城抗擊疫情抗擊疫情網頁制作作業疫情防控網頁設計

制作一個簡單HTML抗疫逆行者網頁作業（HTML+CSS）

html靜态網站中華傳統文化網站主題設計傳統文化藝術耍牙15頁

HTML網頁制作代碼大全——中華傳統文化設計題材網站(html+css)

中華傳統文化節日網頁設計制作簡單靜态HTML網頁作品二十四節氣網頁作業成品

html靜态網站基于漢服文化網站網頁設計與實作共計12個頁面

學生網頁設計作品 dreamweaver作業靜态HTML網頁設計模闆傳統節日春節文化網頁作業制作

HTML學生個人網站作業設計：個人首頁部落格web網頁設計制作 (HTML+CSS) (1)

HTML網頁設計制作大作業 html+css+js萌寵之家網頁設計與實作

【Web前端大作業】基于HTML+CSS+JavaScript制作西北大學新聞網站（7頁）一、👨‍🎓網站題目二、✍️網站描述三、📚網站介紹四、🌐網站示範五、⚙️ 網站代碼六、🥇 如何讓學習不再盲目七、🎁更多幹貨

html+css制作一個浪漫愛心表白網頁表白網頁線上制作最浪漫的表白網頁

520表白網頁,程式員浪漫表白,求婚倒計時網站制作 HTML+CSS+JS

html超浪漫的3D動态相冊表白網站制作 html程式員專屬情人節表白網站

酷炫浪漫表白頁面（附代碼）HTML5代碼類資源