国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 用HTML+CSS做一個漂亮簡單的音樂網(wǎng)站

用HTML+CSS做一個漂亮簡單的音樂網(wǎng)站

時間：2023-09-28 03:30:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-28 03:30:02 來源：網(wǎng)站運(yùn)營

用HTML+CSS做一個漂亮簡單的音樂網(wǎng)站：
精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡介: 一個熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁: 【主頁—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項目精品實戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺可視化(150套) 】 HTML+CSS+JS實例代碼： 【 ?HTML+CSS+JS實例代碼 (炫酷特效網(wǎng)頁代碼) 繼續(xù)更新中...】 免費(fèi)且實用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過去，歷經(jīng)變遷，物是人非。 然而，對于技術(shù)的探索和追求從未停歇。 堅持原創(chuàng)，熱衷分享，初心未改，繼往開來！
@TOC

一、 ? 網(wǎng)站題目

音樂網(wǎng)頁設(shè)計 、 仿網(wǎng)易云音樂、各大音樂官網(wǎng)網(wǎng)頁、 明星音樂演唱會主題、 爵士樂音樂、民族音樂、等網(wǎng)站的設(shè)計與制作。

二、??網(wǎng)站描述

?HTML音樂網(wǎng)頁設(shè)計，采用DIV+CSS布局，共有多個頁面，排版整潔，內(nèi)容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力，導(dǎo)航與正文字體分別設(shè)置不同字號大小。導(dǎo)航區(qū)域設(shè)置了背景圖。子頁面有純文字頁面和圖文并茂頁面。

一套優(yōu)質(zhì)的 網(wǎng)頁設(shè)計應(yīng)該包含 (具體可根據(jù)個人要求而定) 1. 頁面分為頁頭、菜單導(dǎo)航欄（最好可下拉）、中間內(nèi)容板塊、頁腳四大部分。 2. 所有頁面相互超鏈接，可到三級頁面，有5-10個頁面組成。 3. 頁面樣式風(fēng)格統(tǒng)一布局顯示正常，不錯亂，使用Div+Css技術(shù)。 4. 菜單美觀、醒目，二級菜單可正常彈出與跳轉(zhuǎn)。 5. 要有JS特效，如定時切換和手動切換圖片輪播。 6. 頁面中有多媒體元素，如gif、視頻、音樂，表單技術(shù)的使用。 7. 頁面清爽、美觀、大方，不雷同。 。 8. 不僅要能夠把用戶要求的內(nèi)容呈現(xiàn)出來，還要滿足布局良好、界面美觀、配色優(yōu)雅、表現(xiàn)形式多樣等要求。

三、 網(wǎng)站介紹

網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結(jié)構(gòu)。

網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設(shè)計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達(dá)到打開后就能即時看到網(wǎng)站的效果。

網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細(xì)選適合網(wǎng)頁風(fēng)格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。

網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結(jié)構(gòu)文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件；

網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁、其他html為二級頁面； （2） css文件包含：css全部頁面樣式,文字滾動, 圖片放大等； （3） js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個別網(wǎng)頁中運(yùn)用到j(luò)s代碼）。

四、 網(wǎng)站演示




在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述



五、?? 網(wǎng)站代碼

HTML結(jié)構(gòu)代碼

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>遇見</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/iconfont.css"> <link rel="stylesheet" href="css/index.css"></head><body> <div class="head"> <ul> <li class="first"> <a href="###"> <span class="logo"></span> <span class="logoo"></span> <span class="logo logo-b"></span> 遇見 FM </a> </li> <li class="center spe"><a href="">首頁</a></li> <li class="center"><a href="mymusic.html">我的音樂</a></li> <li class="center"><a href="singer.html">歌手</a></li> <li class="center"><a href="ranking.html">排行榜</a></li> <li class="center"><a href="radio.html">電臺</a></li> <li class="login"><a href="re.html">注冊</a></li> <li class="login"><a href="login.html">登錄</a></li> <li class="login dotted"></li> <li class="login search"> <input type="text" class="tex"> <button class="btn"><i class="iconfont icon-sousuo"></i></button> </li> </ul> </div> <div class="ban"> <div class="title">歌單推薦</div> <div class="classify clearfix"> <a href="javascript:;" class="classify-name active">為你推薦</a> <a href="javascript:;" class="classify-name">兒歌</a> <a href="javascript:;" class="classify-name">傷感</a> <a href="javascript:;" class="classify-name">官方</a> <a href="javascript:;" class="classify-name">情歌</a> <a href="javascript:;" class="classify-name">說唱</a> </div> <div class="classify-list clearfix"> <div class="classify-item"> <img src="picture/n1.jpg" alt=""> <div class="classify-item-n">論一個演員的自我修養(yǎng)</div> <div class="classify-item-num">點(diǎn)播量：120萬</div> </div> <div class="classify-item"> <img src="picture/n2.jpg" alt=""> <div class="classify-item-n">90后如何在KTV優(yōu)雅的秀唱功</div> <div class="classify-item-num">點(diǎn)播量：1375.2萬</div> </div> <div class="classify-item"> <img src="picture/n3.jpg" alt=""> <div class="classify-item-n">抗寒偏方 · 跳入舞池抱團(tuán)取暖</div> <div class="classify-item-num">點(diǎn)播量：2.2萬</div> </div> <div class="classify-item"> <img src="picture/n4.jpg" alt=""> <div class="classify-item-n">『古風(fēng)』 哪一首是你的入坑曲？</div> <div class="classify-item-num">點(diǎn)播量：16.2萬</div> </div> <div class="classify-item"> <img src="picture/n5.png" alt=""> <div class="classify-item-n">小眾但令人迷醉的新西蘭男聲</div> <div class="classify-item-num">點(diǎn)播量：19.4萬</div> </div> </div> </div> <div class="ban"> <div class="title">新歌首發(fā)</div> <div class="classify clearfix"> <a href="javascript:;" class="classify-name active">新歌</a> <a href="javascript:;" class="classify-name">內(nèi)地</a> <a href="javascript:;" class="classify-name">港臺</a> <a href="javascript:;" class="classify-name">歐美</a> <a href="javascript:;" class="classify-name">韓國</a> <a href="javascript:;" class="classify-name">日本</a> </div> <div class="newMusic clearfix"> <div class="newMusic-item"> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/music.jpg" alt=""> </div> <div class="newM-item-con"> <div>藍(lán)</div> <div class="grey">陸定昊</div> </div> <div class="newM-rg"> 03:24 </div> </div> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/music1.jpg" alt=""> </div> <div class="newM-item-con"> <div>?? (with ????)</div> <div class="grey">樸春 (??) / Dara (??)</div> </div> <div class="newM-rg"> 03:52 </div> </div> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/music3.jpg" alt=""> </div> <div class="newM-item-con"> <div>為你而來《夢回》網(wǎng)劇主題曲</div> <div class="grey">袁婭維</div> </div> <div class="newM-rg"> 04:26 </div> </div> </div> <div class="newMusic-item"> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/ranking1.jpg" alt=""> </div> <div class="newM-item-con"> <div>陪你去流浪</div> <div class="grey">薛之謙</div> </div> <div class="newM-rg"> 04:34 </div> </div> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/music5.jpg" alt=""> </div> <div class="newM-item-con"> <div>グリム</div> <div class="grey">majiko (まじ娘)</div> </div> <div class="newM-rg"> 04:11 </div> </div> <div class="newM-item clearfix"> <div class="newM-item-lg"> <img src="picture/music6.jpg" alt=""> </div> <div class="newM-item-con"> <div>你說的都對</div> <div class="grey">小鳳九</div> </div> <div class="newM-rg"> 03:35 </div> </div> </div> </div> </div> <div class="ban"> <div class="title">精彩推薦</div> <div class="recommend clearfix"> <div class="recomment-item"> <img src="picture/t.jpg" alt=""> </div> <div class="recomment-item"> <img src="picture/t1.jpeg" alt=""> </div> </div> <div class="recommend clearfix"> <div class="recomment-item recomment-item1"> <img src="picture/t2.jpg" alt=""> </div> <div class="recomment-item recomment-item1"> <img src="picture/t3.jpg" alt=""> </div> <div class="recomment-item recomment-item1"> <img src="picture/t4.jpg" alt=""> </div> <div class="recomment-item recomment-item1"> <img src="picture/t5.jpg" alt=""> </div> </div> </div> <div class="ban"> <div class="title">新碟首發(fā)</div> <div class="classify clearfix"> <a href="javascript:;" class="classify-name active">內(nèi)地</a> <a href="javascript:;" class="classify-name">港臺</a> <a href="javascript:;" class="classify-name">歐美</a> <a href="javascript:;" class="classify-name">韓國</a> <a href="javascript:;" class="classify-name">日本</a> <a href="javascript:;" class="classify-name">其他</a> </div> <div class="classify-list clearfix"> <div class="classify-item"> <img src="picture/first.jpg" alt=""> <div class="classify-item-n">星宿</div> <div class="classify-item-num">徐均朔</div> </div> <div class="classify-item"> <img src="picture/first1.jpg" alt=""> <div class="classify-item-n">我想</div> <div class="classify-item-num">AFar陳侶帆 / Vinz T</div> </div> <div class="classify-item"> <img src="picture/first2.jpg" alt=""> <div class="classify-item-n">三十王十三</div> <div class="classify-item-num">王嘯坤</div> </div> <div class="classify-item"> <img src="picture/first3.jpg" alt=""> <div class="classify-item-n">水形物語</div> <div class="classify-item-num">NoSleep Child 失眠少年</div> </div> <div class="classify-item"> <img src="picture/first4.jpg" alt=""> <div class="classify-item-n">Twilight（黎明）</div> <div class="classify-item-num">PRC 巴音汗</div> </div> <div class="classify-item"> <img src="picture/first5.jpg" alt=""> <div class="classify-item-n">On My Trip</div> <div class="classify-item-num">GBZ / LEGGO</div> </div> <div class="classify-item"> <img src="picture/first6.jpg" alt=""> <div class="classify-item-n">昨天</div> <div class="classify-item-num">新聲主義</div> </div> <div class="classify-item"> <img src="picture/first7.jpg" alt=""> <div class="classify-item-n">你的世界</div> <div class="classify-item-num">傅夢彤 / 安蘇羽</div> </div> <div class="classify-item"> <img src="picture/first8.jpg" alt=""> <div class="classify-item-n">人間過客</div> <div class="classify-item-num">喬洋 / 黃靜美</div> </div> <div class="classify-item"> <img src="picture/first9.jpg" alt=""> <div class="classify-item-n">夢半</div> <div class="classify-item-num">王北車</div> </div> </div> </div> <div class="footer"> <div class="our"> <p class="about">版權(quán)信息</p> <p>? 2010-2023 Yuedu.fm All rights reserved 粵ICP備14076392號</p> </div> </div></body></html>

CSS樣式代碼

/* 清除標(biāo)簽?zāi)J(rèn)的margin和padding值 */*{ margin:0; padding: 0;}/* 清楚浮動，浮動會帶來盒子塌陷，高度撐不起 */.clearfix:after{ content:"."; visibility: hidden; height: 0; display: block; clear:both;}/* 去除ul標(biāo)簽的默認(rèn)的序列點(diǎn) */ul,li{ list-style:none}/* 去除a標(biāo)簽的默認(rèn)顏色和下劃線 */a{ color: #333; text-decoration: none;}/* 圖片設(shè)置寬高為100%，父元素設(shè)置多大，圖片就根據(jù)父元素的寬高設(shè)定 */img{ width:100%; height: 100%;}/* 給整個的頁面設(shè)置默認(rèn)的字體，字體大小，字體顏色，背景顏色 */body{ font-family: "微軟雅黑"; font-size: 14px; color: #333; background:#f8f8f8;}/* 版心寬度，版心是指頁面中主要內(nèi)容所在的區(qū)域,即每頁版面正中的位置，設(shè)置外邊距上下0左右為自動，就會居中 */.ban{ width: 1010px; margin: 0 auto;}/* 導(dǎo)航條，寬度百分百，min-width是最小寬度，如果不設(shè)置瀏覽器窗口變小時，會壓縮，高度，背景顏色 */.head{ width: 100%; min-width: 1010px; height: 100px; background-color: #fff;}/* ul設(shè)置版心大小的寬度，設(shè)置行高 */.head ul{ width: 1010px; margin: 0 auto; height: 100px; line-height: 100px;}/* 設(shè)置li浮動到左邊，li會并列排成一行，但是浮動就會造成父元素塌陷哦，記得給父元素清楚浮動 */.head ul li{ float: left;}/* 登錄設(shè)置浮動到右邊，設(shè)置右外邊距 */.head ul .login{ float: right; margin-left: 18px;}/* a標(biāo)簽設(shè)置去除下劃線，字體大小，顏色 */.head ul li a{ text-decoration: none; font-size: 14px; color: #707070;}/* 設(shè)置logo的樣式，*display和*zoom是兼容Ie低版本，可以百度查看下 */.head ul li a span{ display: inline-block; *display: inline; *zoom:1; width: 4px; background-color: #ee5044; margin-right: 4px; border-radius: 2px; margin-bottom: -4px;}.head ul li a .logo{ height: 18px;}.head ul li a .logoo{ height: 28px; vertical-align: -4px;}.head ul li a .logo-b{ margin-right: 15px;}.head ul .first{ margin-right: 108px;}.head ul .center a{ padding:0 20px;}/* 搜索條的設(shè)置，寬高，頂部外邊距，相對定位，方便子元素進(jìn)行定位，設(shè)置底部和右部邊框 */.head ul .search{ width: 150px; height: 20px; margin-top: 44px; position: relative; border-bottom: 1px solid #f2f2f2; border-right: 1px solid #f2f2f2;}/* 設(shè)置輸入框絕對定位,定位到左上，去除邊框，去除獲取焦點(diǎn)的拉瑟邊框 */.head ul .search .tex{ width: 130px; height: 20px; line-height: 20px; position: absolute; left: 0; top: 0; border: none; outline: none;}/* 搜索按鈕，設(shè)置寬高，行高，絕對定位，定位到右上去除邊框去除點(diǎn)擊默認(rèn)樣式，設(shè)置背景顏色 */.head ul .search .btn{ width: 20px; height: 20px; line-height: 20px; position: absolute; right: 0; top: 0; border: none; outline: none; background-color: #fff;}/* 這里i是字體圖標(biāo)的設(shè)置 */.head ul .search .btn i{ display: inline-block; *display: inline; *zoom:1; width: 20px; height: 20px; position: absolute; left: 0; top: 0;}.head ul .dotted{ width: 1px; height: 20px; margin-top: 44px; border-right: 1px dotted #cccccc;}.head ul li a:hover{ color: #ff3300;}.head ul .spe a{ color: #ff3300;}/* 版權(quán) */.footer{ width: 1010px; margin: 60px auto;}.footer .our p{ margin-top: 8px; font-size: 12px; color: #AAA;}

六、 如何讓學(xué)習(xí)不再盲目

21年程序員總結(jié)給編程菜鳥的16條忠告

  1. 入門期間不要盲目看太多書，找一本網(wǎng)上或身邊有經(jīng)驗程序員推薦的教材，先系統(tǒng)的學(xué)習(xí)。
  2. 多看幫助文檔，幫助文檔就像一個游戲的玩法說明通關(guān)秘籍，該看就看別太自信。
  3. 菜鳥容易被對象、屬性、方法等詞匯迷惑？那是你連最基礎(chǔ)知識都還沒掌握。
  4. 不要忽視沒一個看起來不起眼的問題，經(jīng)?？偨Y(jié)做到舉一反三。
  5. 沒積累足夠知識和經(jīng)驗前，你是開發(fā)不出一個完整項目的。
  6. 把最新技術(shù)掛在嘴邊，還不如把過時技術(shù)牢記心中。
  7. 活到老學(xué)到老，只有一招半式是闖不了江湖的。
  8. 看得懂的書，仔細(xì)看；看不懂的書，硬著頭皮也要看完。
  9. 書讀百遍其義自見，別指望讀一遍就能掌握。
  10. 請把教程里的例子親手實踐下，即使案例中有完整源碼。
  11. 把在教程中看到的有意義的例子擴(kuò)充；并將其切實的運(yùn)用到自己的工作中。
  12. 不要漏掉教程中任何一個習(xí)題——請全部做完并做好筆記。
  13. 水平是在不斷的實踐中完善和發(fā)展的，你與大牛差的只是經(jīng)驗的積累。
  14. 每學(xué)到一個難點(diǎn)的時候，嘗試對朋友或網(wǎng)上分享你的心得,讓別人都能看得懂說明你真的掌握。
  15. 做好保存源文件的習(xí)慣，這些都是你的知識積累。
  16. 遇到問題不要張口就問，要學(xué)會自己找答案，比如google、百度和w3cschool上都有很多編程相關(guān)資料，你只要輸入關(guān)鍵字就能找到你的答案。

七、 更多干貨

1.如果我的博客對你有幫助、如果你喜歡我的博客內(nèi)容，請 “ 點(diǎn)贊” “??評論” “ 收藏”一鍵三連哦！

2. 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識，互相學(xué)習(xí)」！

3.

以上內(nèi)容技術(shù)相關(guān)問題 歡迎一起交流學(xué)習(xí)

【主頁—— 獲取更多優(yōu)質(zhì)源碼】



關(guān)鍵詞：簡單,音樂,漂亮

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉