時間：2023-07-22 07:15:01 | 來源：網(wǎng)站運(yùn)營
時間：2023-07-22 07:15:01 來源：網(wǎng)站運(yùn)營
用HTML+CSS仿網(wǎng)易云音樂網(wǎng)站(6個頁面)_實(shí)訓(xùn)素材：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁設(shè)計題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁設(shè)計期末課程大作業(yè) | 音樂網(wǎng)頁設(shè)計 | 仿網(wǎng)易云音樂 | 各大音樂官網(wǎng)網(wǎng)頁 | 明星音樂演唱會主題 | 爵士樂音樂 | 民族音樂 | 等網(wǎng)站的設(shè)計與制作 | HTML期末大學(xué)生網(wǎng)頁設(shè)計作業(yè)，Web大學(xué)生網(wǎng)頁
在線咨詢
<!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"> <!-- 上面導(dǎo)航 --> <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="#"> “你努力去愛的樣子，又孤獨(dú)又美好”</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="plate-img-box"> <img src="picture/55.jpg" alt=""> <div class="img-back-z"></div> <a href="#" class="plate-img-box-a1">??(夜好)</a> <a href="#" class="plate-img-box-a2">N.Flying</a> </div> <a href="#"> <div class="action"></div> </a> </li> </ul> </div> <!-- 榜單 --> <div class="List clearfix"> <!-- 左 --> <div class="yuan"></div> <p>榜單</p> <!-- 右 --> <div class="jt"></div> <h3><a href="#">更多</a></h3> </div> <!-- 榜單榜 --> <div class="bd clearfix"> <!-- 左 --> <div> <!-- 左 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b31.jpg" alt=""> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>云音樂飆升榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小調(diào)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒數(shù)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之間</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰靜悄悄的開</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年來生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> <!-- 中 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b32.jpg"> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>云音樂飆升榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小調(diào)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒數(shù)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之間</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰靜悄悄的開</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年來生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> <!-- 右 --> <dl class="clearfix"> <dt class="clearfix"> <a href="#"> <img src="picture/b33.jpg"> </a> <!-- 右 --> <div class="bd-dt-right clearfix"> <a href="#"> <p>網(wǎng)易原創(chuàng)歌曲榜</p> </a> <a href="#"> <div class="bd-dt-right-action"></div> </a> <a href="#"> <div class="bd-dt-right-wj"></div> </a> </div> </dt> <dd> <span class="red">1</span> <a href="#">二零三</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">2</span> <a href="#">所念皆星河</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="red">3</span> <a href="#">下山</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>4</span> <a href="#">卑微小調(diào)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>5</span> <a href="#">倒數(shù)</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>6</span> <a href="#">笨蛋</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>7</span> <a href="#">忽然之間</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>8</span> <a href="#">所以少年人</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>9</span> <a href="#">羞答答的玫瑰靜悄悄的開</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span>10</span> <a href="#">明年來生</a> <div class="overflow"> <a href="#" class="a1"></a> <a href="#" class="a2"></a> <a href="#" class="a3"></a> </div> </dd> <dd> <span class="qb"><a href="#">查看全部></a></span> </dd> </dl> </div> </div> </div> <!-- 右邊 --> <div class="hot-right"> <!-- 上 --> <a href="#"> <div class="hot-right-top"> <p>登錄網(wǎng)易云音樂，可以享受無限收藏的樂趣，并且無限同步到手機(jī)</p> <div>用戶登錄</div> </div> </a> <!-- 入駐歌手 --> <div class="singer"> <div class="singer-box"> <a>查看全部></a> <h3>入駐歌手</h3> </div> </div> <ul class="album clearfix"> <li class="clearfix"> <img src="picture/r51.jpg" alt=""> <span> <a href="#"> <h3>張惠妹aMEI</h3> </a> <a href="#"> <p>臺灣歌手張惠妹</p> </a> </span> </li> <li> <img src="picture/r52.jpg"> <span> <a href="#"> <h3>Fine樂團(tuán)</h3> </a> <a href="#"> <p>獨(dú)立音樂人</p> </a> </span> </li> <li> <img src="picture/r53.jpg"> <span> <a href="#"> <h3>萬曉利</h3> </a> <a href="#"> <p>民謠歌手、中國現(xiàn)代民謠的代表人物之一</p> </a> </span> </li> <li> <img src="picture/r54.jpg"> <span> <a href="#"> <h3>音樂人趙雷</h3> </a> <a href="#"> <p>民謠歌手</p> </a> </span> </li> <li> <img src="picture/r55.jpg"> <span> <a href="#"> <h3>王三溥</h3> </a> <a href="#"> <p>音樂人</p> </a> </span> </li> <a class="finally">申請成為網(wǎng)易音樂人</a> </ul> <!-- 熱門主播 --> <div class="singer"> <div class="singer-box"> <h3>熱門主播</h3> </div> </div> <!-- 主播 --> <div class="anchor"> <ul> <li> <img src="picture/z51.jpg" alt=""> <span class="clearfix"> <a href="#">陳立</a> <div class="v"></div> <p>心理學(xué)家、美食家陳立教授</p> </span> </li> <li> <img src="picture/z52.jpg" alt=""> <span class="clearfix"> <a href="#">DJ艷秋</a> <div class="v"></div> <p>著名音樂節(jié)目主持人</p> </span> </li> <li> <img src="picture/z53.jpg" alt=""> <span class="clearfix"> <a href="#">國家大劇院古典音樂頻道</a> <div class="v"></div> <p>國家大劇院古典音樂官方</p> </span> </li> <li> <img src="picture/z54.jpg" alt=""> <span class="clearfix"> <a href="#">謝謝收聽</a> <div class="v"></div> <p>杭州電臺主持人王馨</p> </span> </li> <li> <img src="picture/z55.jpg" alt=""> <span class="clearfix"> <a href="#">DJ曉蘇</a> <div class="v"></div> <p>獨(dú)立DJ，CRI環(huán)球旅游廣播特邀DJ</p> </span> </li> </ul> </div> </div> </div> </div> <!-- 最下面 --> <div class="music-bottom"> <!-- 版心 --> <div class="newcontainer"> <!-- 左邊 --> <div class="music-bottom-left"> <!-- 第一排 --> <div class="music-bottom-one-row"> <a href="#">服務(wù)條款</a> <li>|</li> <a href="#">隱私政策</a> <li>|</li> <a href="#">兒童隱私政策 </a> <li>|</li> <a href="#">版權(quán)投訴指引</a> <li>|</li> <a href="#">意見反饋</a> <li>|</li> <br> </div> <!-- 二 --> <p class="music-bottom-p1">網(wǎng)易公司版權(quán)所有?1997-2019 杭州樂讀科技有限公司運(yùn)營：<a href="#">浙網(wǎng)文[2018]3506-263號</a></p> <!-- 三 --> <p class="music-bottom-p2">違法和不良信息舉報電話：0571-89853516 舉報郵箱：<a href="#">ncm5990@163.com</a></p> </div> <!-- 右邊 --> <div class="music-bottom-right"> <div class="music-bottom-right-box"> <a href="#"><span class="music-bottom-right-img1"> </span></a> <li>用戶認(rèn)證</li> </div> <div class="music-bottom-right-box"> <a href="#"> <span class="music-bottom-right-img2"> </span></a> <li>獨(dú)立音樂人</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>關(guān)鍵詞：素材,音樂
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
