qq音乐主页 思路解析（及代码）
生活随笔
收集整理的這篇文章主要介紹了
qq音乐主页 思路解析（及代码）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
愛無路，恨無情。相思無緣，相愛無份。曾相識，恨離別。無風(fēng)雨，無同舟，何結(jié)果。情遠(yuǎn)天邊，心無掛礙，唯愛你獨一。
圖片鏈接：https://pan.baidu.com/s/1MlC8RzP1tYxwwgSL_FANXA
提取碼：cydc
源頁面
思路解析
首先了解一下該頁面的總體布局 分為 上中下 以及 側(cè)面
下面我來講解一下我做該頁面上下側(cè)面的思路
1.頂部
可以把該頁面的頂部分成兩部分
分別是上 下 兩大塊
上面這部分又可以分為四小塊
下面這部分已經(jīng)很簡單了 不用再怎么分解了
如圖所示：
2.底部
可以把該頁面的底部分成七塊，如圖所示：
側(cè)面
總共兩部分，如圖所示 將其分解
這下是不是覺得這頁面 特別簡單 ！ 沒錯 按著這個思路走 不管多難的頁面 只要第一步先有思路，然后再去實踐，一切都會變得順暢起來 ！！！
下面來看看我的代碼 ，需要原圖片的 可以來私我 ！！希望更多的大佬指點 ，嘿嘿！
代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>qq音樂主頁面</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 {/* 實現(xiàn)div在頁面居中 *//* 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 {/*開啟相對定位*/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;}/* 開通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;}/* 開通vip 列表 */#ding>#toplan>#top>#dredge option {background-color: #fff;padding: 40px 0;text-align: center;white-space: nowrap;color: #000;border-radius: 10px;}/* 購買樂幣 */#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}/* 購買樂幣 列表 */#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}/* 第二個頂部 */#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è)置最大 長寬 并居中 */#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;}/* 右下角三個固定按鈕 */.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">音樂館</li><li>我的音樂</li><li id="client">客戶端<!-- <select id="dredge"><option value="bj">開通VIP</option><option value="nj">開通綠鉆豪華版</option><option value="tj">開通付費包</option></select> --><img class="lazyload" data-original="img\ia_100000001.png" alt="#"><!-- <ul><li>HQ高品質(zhì) 全員開啟</li><li>獨家音效 全面升級</li><li>輕盈視覺 動態(tài)皮膚</li></ul> --><!-- <button>下載體驗</button> --></li><li>開放平臺</li><li id="VIP">VIP</li><!-- 搜索框 --><li id="search"><input id="wb" type="text" placeholder="搜索音樂、MV、歌單、用戶"><input type="text" name="" id="box"></li><li id="register">登錄</li><!-- 開通vip --><!-- <li>開通VIP<ul><li>開通綠鉆豪華版</li><li>開通付費包</li></ul></li> --><select id="dredge"><option value="bj">開通VIP</option><option value="nj">開通綠鉆豪華版</option><option value="tj">開通付費包</option></select><select id="recharge"><option value="bj">充值</option><option value="bj">購買樂幣</option><option value="nj">充值飯票</option></select><!-- 充值 --><li><!-- <ul><li class="select__item js_buyYB" title="樂幣用途： 用于購買數(shù)字專輯、支持明星打榜、TME Live等">購買樂幣</li><li class="select__item js_buyFP" title="飯票用途： 用于在直播中贈送禮物、開通粉絲團(tuán)、購買貴族等">充值飯票</li></ul> --></li></ul></div><div class="top"><ul class="top2"><li>首頁</li><li>歌手</li><li>新碟</li><li>排行榜</li><li>分類歌單</li><li>電臺</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音樂客戶端</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)貝市場</div></div></div><div id="dispark"><p id="download4"><h3>開放平臺</h3></p><div>QQ音樂開放平臺</div><div>騰訊音樂人</div></div><div id="TME"><p id="download5"><h3>TME集團(tuán)官網(wǎng)</h3></p><div>騰訊音樂</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)營許可證</a></p></div></div></div><div class="box"><img src="img/ia_100000001010.png" alt="#"><p>千萬高品質(zhì)曲庫盡享</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é)會了愛你，在自己心底里;我學(xué)會了等待，在我生命中!
無論未來的路多么難走，我都愿意陪著你!
總結(jié)
以上是生活随笔為你收集整理的qq音乐主页 思路解析（及代码）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Robotics: Computatio
- 下一篇： wget下载太慢问题