用HTML+CSS仿网易云音乐网站(6个页面)
生活随笔
收集整理的這篇文章主要介紹了
用HTML+CSS仿网易云音乐网站(6个页面)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
🎉精彩專欄推薦 💭文末獲取聯(lián)系
?? 作者簡介: 一個熱愛把邏輯思維轉變?yōu)榇a的技術博主
💂 作者主頁: 【主頁——🚀獲取更多優(yōu)質源碼】
🎓 web前端期末大作業(yè)： 【📚畢設項目精品實戰(zhàn)案例 (1000套) 】
🧡 程序員有趣的告白方式：【💌HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】
🔖 HTML+CSS+JS實例代碼： 【🗂?HTML+CSS+JS實例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到高級學習視頻教程 120G干貨分享】
🥇 關于作者: 💬歷任研發(fā)工程師，技術組長，教學總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨?🎓網(wǎng)站題目
- 二、??網(wǎng)站描述
- 三、📚網(wǎng)站介紹
- 四、💠網(wǎng)站演示
- 五、?? 網(wǎng)站代碼
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多干貨
一、👨?🎓網(wǎng)站題目
🎵 音樂網(wǎng)頁設計 、🎸仿網(wǎng)易云音樂、各大音樂官網(wǎng)網(wǎng)頁、🎶明星音樂演唱會主題、🥁爵士樂音樂、民族音樂、等網(wǎng)站的設計與制作。
二、??網(wǎng)站描述
🏷?HTML音樂網(wǎng)頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，內(nèi)容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導航與正文字體分別設置不同字號大小。導航區(qū)域設置了背景圖。子頁面有純文字頁面和圖文并茂頁面。
🏅 一套優(yōu)質的💯網(wǎng)頁設計應該包含 (具體可根據(jù)個人要求而定)
三、📚網(wǎng)站介紹
📔網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結構。
📓網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
📘網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
📒網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結構文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；
📙網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
其中：
（1）📜html文件包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css文件包含：css全部頁面樣式,文字滾動, 圖片放大等；
（3）📄 js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等（個別網(wǎng)頁中運用到js代碼）。
四、💠網(wǎng)站演示
五、?? 網(wǎng)站代碼
🧱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>網(wǎng)易云音樂</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="#">網(wǎng)易云音樂</a></span><div class="topnav-nav"><div><a href="#">發(fā)現(xiàn)音樂</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">創(chuàng)作者中心</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/white-r-icon@3x.png" 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><!-- 右邊圖片 --><div class="bj-right"><a href="#" class="bj-right-button"></a><p>pc 安卓 iPhone WP ipad Mac 六大客戶端</p></div><!-- 精靈圖 --><a href="#"><div class="jl-left"></div></a><a href="#"><div class="jl-right"></div></a></div></div><!-- 第四排 熱門推薦 --><div class="hot"><!-- 新版心 --><div class="newcontainer"><!-- 左邊 --><div class=" hot-left"><!-- 上面導航 --><div class="hot-left-top clearfix"><!-- 左 --><div class="yuan"></div><p>熱門推薦</p><a href="#">華語</a><li>|</li><a href="#">流行</a><li>|</li><a href="#">搖滾</a><li>|</li><a href="#">民謠</a><li>|</li><a href="#">電子</a><!-- 右 --><div class="jt"></div><h3><a href="#">更多</a></h3></div><!-- 視頻 --><div class="hot-left-video clearfix"><!-- 1 --><div><img src="picture/81.jpg" alt=""><a href="#">經(jīng)典老歌,久聽不厭</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>144萬</b><a class="bof"></a></span></div><!-- 2 --><div><img src="picture/82.jpg" alt=""><a href="#">Vol.452 別再說你真的用力愛過</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>157萬</b><a class="bof"></a></span></div><!-- 3 --><div><img src="picture/83.jpg" alt=""><a href="#">喪喪喪//沉默是最大的哭聲我希望你能懂</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>528萬</b><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>世間美好與你環(huán)環(huán)相扣</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>202萬</b><a class="bof"></a></span></div><!-- 7 --><div><img src="picture/87.jpg"><a href="#">“你努力去愛的樣子，又孤獨又美好”</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>125萬</b><a class="bof"></a></span></div><!-- 8 --><div><img src="picture/88.jpg"><a href="#">即使身處暗流,也要仰望星空啊</a><span class="img-back-g"></span><span class="img-bottom"><span class="bfl"></span><b>658萬</b><a class="bof"></a></span></div></div><!-- 新品上架 --><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; }六、🥇 如何讓學習不再盲目
21年程序員總結給編程菜鳥的16條忠告
七、🎁更多干貨
1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “👍點贊” “??評論” “💙收藏” 一鍵三連哦！
2.💗【👇🏻👇🏻👇🏻關注我| 💬獲取更多源碼 | 優(yōu)質文章】 帶您學習各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學習」！
3.
以上內(nèi)容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬總結
以上是生活随笔為你收集整理的用HTML+CSS仿网易云音乐网站(6个页面)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初二计算机辅导记录,信息技术指导老师的讲
- 下一篇： 如何把图片嵌到html中,自给自足，轻松