當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

qq音乐主页思路解析（及代码）

發(fā)布時(shí)間：2023/12/31 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 qq音乐主页思路解析（及代码）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

愛(ài)無(wú)路，恨無(wú)情。相思無(wú)緣，相愛(ài)無(wú)份。曾相識(shí)，恨離別。無(wú)風(fēng)雨，無(wú)同舟，何結(jié)果。情遠(yuǎn)天邊，心無(wú)掛礙，唯愛(ài)你獨(dú)一。

圖片鏈接：https://pan.baidu.com/s/1MlC8RzP1tYxwwgSL_FANXA
提取碼：cydc

源頁(yè)面

思路解析

首先了解一下該頁(yè)面的總體布局分為上中下以及側(cè)面
下面我來(lái)講解一下我做該頁(yè)面上下側(cè)面的思路

1.頂部

可以把該頁(yè)面的頂部分成兩部分
分別是上下兩大塊
上面這部分又可以分為四小塊
下面這部分已經(jīng)很簡(jiǎn)單了不用再怎么分解了
如圖所示：

2.底部

可以把該頁(yè)面的底部分成七塊，如圖所示：

側(cè)面

總共兩部分，如圖所示將其分解

這下是不是覺(jué)得這頁(yè)面特別簡(jiǎn)單！沒(méi)錯(cuò) 按著這個(gè)思路走不管多難的頁(yè)面只要第一步先有思路，然后再去實(shí)踐，一切都會(huì)變得順暢起來(lái) ！！！

下面來(lái)看看我的代碼，需要原圖片的可以來(lái)私我！！希望更多的大佬指點(diǎn) ，嘿嘿！

代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>qq音樂(lè)主頁(yè)面</title><script src="../jquery.js"></script><script src="E:\xu_jinbao\jQuery\07_插件\輪播圖插件\dist\js\swiper.js"></script><script src="E:\xu_jinbao\jQuery\07_插件\懶加載\jquery.lazyload.js"></script><style>/* 基本樣式 */body {margin: 0 0;padding: 0 0;}li,ul {/* 去掉默認(rèn)樣式 */list-style: none;/*手型鼠標(biāo)*/cursor: pointer;}img,select {/*手型鼠標(biāo)*/cursor: pointer;}/* 頂部div (大) */#ding>#toplan {/* 實(shí)現(xiàn)div在頁(yè)面居中 *//* padding-top: 90px; */max-width: 1200px;margin: 0 auto;/* background-color: aqua; */height: 70px;/* position: relative; *//*設(shè)置邊框樣式*/border-bottom: 1px solid #f2f2f2;}/* 頂部div */#ding>#toplan>#top {/*左懸浮*/float: left;}/* 頂部 logo */#ding>#toplan>h1>.lazyload {float: left;/* position: absolute;left: 0;top: 0; */}/* 頂部所有文字外div */#ding>#toplan>#toplan>#top {float: left;/* text-align: center; */position: absolute;left: 0;top: -100px;}/* 頂部所有文字 */#ding>#toplan ul li {/*文本樣式*/float: left;display: block;padding: 0 20px;line-height: 90px;height: 90px;text-align: center;font-size: 18px;margin-top: -35px;}/* 客戶端 */#ding>#toplan>#top>#music {/*開(kāi)啟相對(duì)定位*/position: relative;background-color: #31c27c;}#ding>#toplan>#top>#client {position: relative;}/* 搶特權(quán)圖片 */#ding>#toplan>#top>#client>.lazyload {position: absolute;top: 18px;right: 0;height: 14px;}#ding>#toplan>#top>#VIP {font-size: 18px;}/* 搜索 */#ding>#toplan>#top>#search {position: relative;padding: 0 0;}/* 搜索框 */#ding>#toplan>#top>#search>#wb {border: 1px solid #c9c9c9;line-height: 36px;height: 36px;width: 183px;margin-top: 26px;border-radius: 3px;background-color: #fff;-webkit-transition: width .6s ease-out;transition: width .6s ease-out;}/* 搜索的圖片 */#ding>#toplan>#top>#search>#box {position: absolute;top: 50%;right: 2px;margin-top: -8px;width: 13px;height: 15px;background: url('img/ia_100000900.png');overflow: hidden;border: none;background-position: 0px -40px;}/* 登錄 */#ding>#toplan>#top>#register {float: left;display: block;padding: 0 0;padding-left: 15px;line-height: 90px;height: 90px;text-align: center;font-size: 18px;margin-top: -35px;}/* 開(kāi)通vip */#ding>#toplan>#top>#dredge {background-color: #31c27c;color: #fff;border-color: #31c27c;float: left;width: 100px;height: 38px;margin-top: -7px;margin-left: 15px;padding: 0 1%;border-radius: 10px;}/* 開(kāi)通vip 列表 */#ding>#toplan>#top>#dredge option {background-color: #fff;padding: 40px 0;text-align: center;white-space: nowrap;color: #000;border-radius: 10px;}/* 購(gòu)買樂(lè)幣 */#ding>#toplan>#top>#recharge {color: #000;float: left;height: 38px;border: 1px solid #c9c9c9;margin-top: -7px;margin-left: 15px;width: 80px;padding: 0 1%;border-radius: 5px}/* 購(gòu)買樂(lè)幣列表 */#ding>#toplan>#top>#recharge option {background-color: #fff;padding: 40px 0;text-align: center;white-space: nowrap;border: 1px solid #c9c9c9;color: #000;text-align: center;border-radius: 5px}/* 第二個(gè)頂部 */#ding>.top>.top2 {float: left;position: absolute;left: 320px;}/* 頂部里的 li樣式 */#ding>.top>.top2>li {float: left;margin: 0 20px;}/* 基本樣式 */body {margin: 0 0;padding: 0 0;}li,ul {list-style: none;cursor: pointer;}img,select {cursor: pointer;}#foot {background-color: #999;}/* 設(shè)置最大長(zhǎng)寬并居中 */#bottom {width: 1200px;height: 511.2px;margin: 0 auto;}#bottom>#download {width: 400px;height: 300px;background-position: -2px 0;/* background-color: aqua; */float: left;/* float: left; *//* margin: 0 auto; *//* margin-left: ; */}/* 第一塊 */#bottom>#download>#download1 {margin-left: 20px;width: 400px;font-size: 15px;font-weight: 400;padding: 80px 0 30px;}/* 設(shè)置圖片和文字 */#bottom>#download>#img1 {width: 86px;height: 60px;float: left;margin: 0px 7px 0 0;text-align: center;/* margin-top: 50px; */}#bottom>#download>#img2 {width: 86px;float: left;margin: 0px 7px;/* margin-top: 50px; */height: 50px;text-align: center;}#bottom>#download>#img3 {width: 86px;float: left;margin: 0px 7px;height: 50px;/* margin-top: 50px; */text-align: center;}#bottom>#download>#img4 {width: 86px;margin: 0px 7px;float: left;height: 50px;/* margin-top: 50px; */text-align: center;}/* 設(shè)置背景圖片 */#bottom>#download>#img1>input {width: 45px;height: 48px;float: left;overflow: hidden;background: url("img/ia_100000898.png");margin: 0 20px;background-position: 0px 0px;margin-bottom: 5px;}#bottom>#download>#img2>input {width: 45px;float: left;height: 48px;overflow: hidden;background: url("img/ia_100000898.png");margin: 0 20px;margin-bottom: 5px;background-position: -91px 0px;}#bottom>#download>#img3>input {width: 45px;float: left;height: 48px;overflow: hidden;margin: 0 20px;background: url("img/ia_100000898.png");margin-bottom: 5px;background-position: -184px 0px;}#bottom>#download>#img4>input {background: url("img/ia_100000898.png");width: 45px;float: left;height: 48px;overflow: hidden;margin: 0 20px;margin-bottom: 5px;background-position: -273px 0px;}/* 第二塊 */#bottom>#feature {width: 500px;height: 300px;background-position: -2px 0;/* background-color: aqua; */float: left;}#bottom>#feature>#download2 {margin-left: 27px;width: 500px;font-size: 15px;font-weight: 400;padding: 80px 0 30px;}#bottom>#feature>#img5 {width: 99px;height: 60px;float: left;margin: 0px 7px;text-align: center;/* margin-top: 50px; */}#bottom>#feature>#img6 {width: 99px;float: left;margin: 0px 7px;/* margin-top: 50px; */height: 50px;text-align: center;}#bottom>#feature>#img7 {width: 99px;float: left;margin: 0px 7px;height: 50px;/* margin-top: 50px; */text-align: center;}#bottom>#feature>#img8 {width: 99px;margin: 0px 7px;float: left;height: 50px;/* margin-top: 50px; */text-align: center;}#bottom>#feature>#img5>input {width: 45px;height: 48px;float: left;overflow: hidden;background: url("img/ia_100000898.png");margin: 0 20px;background-position: -365px 0px;margin-bottom: 5px;}#bottom>#feature>#img6>input {width: 45px;float: left;height: 48px;overflow: hidden;background: url("img/ia_100000898.png");margin: 0 20px;margin-bottom: 5px;background-position: -457px 0px;}#bottom>#feature>#img7>input {width: 45px;float: left;height: 48px;overflow: hidden;margin: 0 20px;background: url("img/ia_100000898.png");margin-bottom: 5px;background-position: -560px 0px;}#bottom>#feature>#img8>input {background: url("img/ia_100000898.png");width: 45px;float: left;height: 48px;overflow: hidden;margin: 0 20px;margin-bottom: 5px;background-position: -647px 0px;}#group,#show {margin-top: 12px;margin-left: 6px;}/* 第三塊 */#bottom>#cooperation {width: 300px;height: 300px;background-position: -2px 0;/* background-color: aqua; */float: left;line-height: 30px;}#bottom>#cooperation>#download3 {margin-left: 5px;width: 300px;font-size: 15px;font-weight: 400;padding: 80px 0 30px;}#bottom>#cooperation>div {float: left;margin: 0 6px;}/* 第四塊 */#bottom>#dispark {width: 400px;height: 100px;background-position: -2px 0;/* background-color: aqua; */float: left;}#bottom>#dispark>#download4 {margin-left: 5px;width: 400px;font-size: 15px;font-weight: 400;padding: 50px 0 30px;}#bottom>#dispark>div {float: left;margin: 0 30px;margin-left: 0;}/* 第五塊 */#bottom>#TME {width: 400px;height: 200px;background-position: -2px 0;/* background-color: aqua; */float: left;}#bottom>#TME>#download5 {margin-left: 5px;width: 400px;font-size: 15px;font-weight: 400;padding: 50px 0 30px;}#bottom>#TME>div {float: left;margin: 0 30px;margin-left: 0;}/* 第六塊 */#bottom>#kong {width: 400px;height: 200px;background-position: -2px 0;/* background-color: aqua; */float: left;}#foot>#base {/* float: left; */background-color: #999;}/* 第七塊 */#foot>#base {width: 1200px;/* height: 511.2px; */margin: 0 auto;}#foot>#base div {width: 100%;margin: 0 auto;text-align: center;line-height: 28px;}#foot>#base div a {text-decoration: none;color: #333;}/* 側(cè)面下載 */.box {position: fixed;top: 164px;right: 40px;z-index: 1001;padding: 18px;border-radius: 4px;box-shadow: 0 3px 5px rgba(0, 0, 0, .07);/* background-color: aqua; */background-color: #fff;}.box>img {display: block;margin: 0 auto 9px;width: 102px;}.box button>#ce {width: 13px;height: 13px;background: url('img/ia_100000900.png');background-position: -158px -320px;background-repeat: no-repeat;border: none;}.box p {margin-bottom: 10px;font-size: 16px;color: #a6a6a6;text-align: center;}.box #box-1 {cursor: pointer;}.box button {display: block;margin: 0 auto;border: none;width: 130px;height: 26px;border-radius: 26px;line-height: 26px;font-size: 15px;color: #fff;text-align: center;background-color: #31c27c;}/* 右下角三個(gè)固定按鈕 */.cemian #stick {position: fixed;right: 40px;width: 38px;height: 38px;z-index: 4;background-color: #fff;bottom: 124px;border: 1px solid #c9c9c9;background: url('img/ia_100000901.png');background-position: 83px 7px;cursor: pointer;background-color: #fff;}.cemian #feedback {position: fixed;right: 40px;width: 38px;height: 38px;z-index: 4;background-color: #fff;border: 1px solid #c9c9c9;line-height: 38px;bottom: 82px;font-size: 14px;font-family: 'PingFang SC', Tahoma, Arial, \5FAE\8F6F\96C5\9ED1, sans-serif;text-align: center;cursor: pointer;}.cemian #skip {position: fixed;right: 40px;width: 38px;height: 38px;z-index: 4;border: 1px solid #c9c9c9;background: url('img/ia_100000901.png');background-color: #fff;background-position: 42px 4px;bottom: 40px;}</style> </head><body><div id="ding"><div id="toplan"><h1><img class="lazyload" data-original="img\ia_100000000.png" alt="#"></h1><ul id="top"><li id="music">音樂(lè)館</li><li>我的音樂(lè)</li><li id="client">客戶端<img class="lazyload" data-original="img\ia_100000001.png" alt="#"></li><li>開(kāi)放平臺(tái)</li><li id="VIP">VIP</li><li id="search"><input id="wb" type="text" placeholder="搜索音樂(lè)、MV、歌單、用戶"><input type="text" name="" id="box"></li><li id="register">登錄</li><select id="dredge"><option value="bj">開(kāi)通VIP</option><option value="nj">開(kāi)通綠鉆豪華版</option><option value="tj">開(kāi)通付費(fèi)包</option></select><select id="recharge"><option value="bj">充值</option><option value="bj">購(gòu)買樂(lè)幣</option><option value="nj">充值飯票</option></select><li></li></ul></div><div class="top"><ul class="top2"><li>首頁(yè)</li><li>歌手</li><li>新碟</li><li>排行榜</li><li>分類歌單</li><li>電臺(tái)</li><li>MV</li><li>數(shù)字專輯</li><li>票務(wù)</li></ul></div></div><div id="Playlist">歌單推薦</div><div id="newsong">新歌首發(fā)</div><div id="wonderful">精彩推薦</div><div id="DVD">新碟</div><div id="ranking">排行榜</div><div id="MV">MV</div><div id="foot"><div id="bottom"><div id="download"><p id="download1"><h3>下載qq音樂(lè)客戶端</h3></p><div id="img1"><input type="text">PC版</div><div id="img2"><input type="text">Mac版</div><div id="img3"><input type="text">Android版</div><div id="img4"><input type="text">iPhone版</div></div><div id="feature"><p id="download2"><h3>特色產(chǎn)品</h3></p><div id="img5"><input type="text">全民K歌<div id="group">車載互聯(lián)</div></div><div id="img6"><input type="text">Super Sound<div id="show">QQ演出</div></div><div id="img7"><input type="text">Qplay</div><div id="img8"><input type="text">Fan直播伴侶</div></div><div id="cooperation"><p id="download3"><h3>合作鏈接</h3></p><div><div>CJ ENM</div><div>最新版QQ</div><div>QQ瀏覽器</div><div>企業(yè)FM</div></div><div><div>騰訊視頻</div><div>騰訊社交廣告</div><div>騰訊微云</div><div>智能電視網(wǎng)</div></div><div><div>手機(jī)QQ空間</div><div>電腦管家</div><div>騰訊云</div><div>當(dāng)貝市場(chǎng)</div></div></div><div id="dispark"><p id="download4"><h3>開(kāi)放平臺(tái)</h3></p><div>QQ音樂(lè)開(kāi)放平臺(tái)</div><div>騰訊音樂(lè)人</div></div><div id="TME"><p id="download5"><h3>TME集團(tuán)官網(wǎng)</h3></p><div>騰訊音樂(lè)</div></div><div id="kong"></div></div><div id="base"><div><a href="#" title="關(guān)于騰訊">關(guān)于騰訊</a>|<a href="#" title="About Tencent">About Tencent</a>|<a href="#" title="服務(wù)條款">服務(wù)條款</a>|<a href="#" title="用戶服務(wù)協(xié)議">用戶服務(wù)協(xié)議</a>|<a href="#" title="隱私政策">隱私政策</a>|<a href="#" title="權(quán)利聲明">權(quán)利聲明</a>|<a href="#" title="廣告服務(wù)">廣告服務(wù)</a>|<a href="#" title="騰訊招聘">騰訊招聘</a>|<a href="#" title="客服中心">客服中心</a>|<a href="#" title="網(wǎng)站導(dǎo)航">網(wǎng)站導(dǎo)航</a></div><div><p>Copyright ? 1998 - 2020 Tencent. All Rights Reserved.</p></div><div><p>騰訊公司<a href="#">版權(quán)所有</a><a href="#">騰訊網(wǎng)絡(luò)文化經(jīng)營(yíng)許可證</a></p></div></div></div><div class="box"><img src="img/ia_100000001010.png" alt="#"><p>千萬(wàn)高品質(zhì)曲庫(kù)盡享</p><button id="box-1"><input type="text" id="ce">客戶端下載</button></div><div class="cemian"><input type="text" id="stick"><input type="text" id="feedback" placeholder="反饋"><input type="text" id="skip"></div><script>$('img').lazyload();</script> </body> </html>

今天的你

我學(xué)會(huì)了愛(ài)你，在自己心底里;我學(xué)會(huì)了等待，在我生命中!
無(wú)論未來(lái)的路多么難走，我都愿意陪著你!

總結(jié)

以上是生活随笔為你收集整理的qq音乐主页思路解析（及代码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Robotics: Computatio
下一篇： wget下载太慢问题