qq音乐主页 思路解析（及代码） |
您所在的位置：网站首页 › qq音乐怎么成为歌手的粉丝团 › qq音乐主页 思路解析（及代码） |
qq音乐主页 思路解析（及代码）
|
爱无路，恨无情。相思无缘，相爱无份。曾相识，恨离别。无风雨，无同舟，何结果。情远天边，心无挂碍，唯爱你独一。
图片链接：https://pan.baidu.com/s/1MlC8RzP1tYxwwgSL_FANXA 提取码：cydc 源页面
首先了解一下该页面的总体布局 分为 上中下 以及 侧面 下面我来讲解一下我做该页面上下侧面的思路 1.顶部可以把该页面的顶部分成两部分 分别是上 下 两大块 上面这部分又可以分为四小块 下面这部分已经很简单了 不用再怎么分解了 如图所示： 可以把该页面的底部分成七块，如图所示： 总共两部分，如图所示 将其分解 下面来看看我的代码 ，需要原图片的 可以来私我 ！！希望更多的大佬指点 ，嘿嘿！ 代码 qq音乐主页面 /* 基本样式 */ body { margin: 0 0; padding: 0 0; } li, ul { /* 去掉默认样式 */ list-style: none; /*手型鼠标*/ cursor: pointer; } img, select { /*手型鼠标*/ cursor: pointer; } /* 顶部div (大) */ #ding>#toplan { /* 实现div在页面居中 */ /* padding-top: 90px; */ max-width: 1200px; margin: 0 auto; /* background-color: aqua; */ height: 70px; /* position: relative; */ /*设置边框样式*/ 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; } /* 抢特权图片 */ #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; } /* 设置最大 长宽 并居中 */ #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; } /* 设置图片和文字 */ #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; } /* 设置背景图片 */ #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; } /* 侧面 下载 */ .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; } 音乐馆 我的音乐 客户端 开放平台 VIP 登录 开通VIP 开通绿钻豪华版 开通付费包 充值 购买乐币 充值饭票 首页 歌手 新碟 排行榜 分类歌单 电台 MV 数字专辑 票务 歌单推荐 新歌首发 精彩推荐 新碟 排行榜 MV 下载qq音乐客户端 PC版 Mac版 Android版 iPhone版 特色产品 全民K歌 车载互联 Super Sound QQ演出 Qplay Fan直播伴侣 合作链接 CJ ENM 最新版QQ QQ浏览器 企业FM 腾讯视频 腾讯社交广告 腾讯微云 智能电视网 手机QQ空间 电脑管家 腾讯云 当贝市场 开放平台 QQ音乐开放平台 腾讯音乐人 TME集团官网 腾讯音乐 关于腾讯| About Tencent| 服务条款| 用户服务协议| 隐私政策| 权利声明| 广告服务| 腾讯招聘| 客服中心| 网站导航 Copyright © 1998 - 2020 Tencent. All Rights Reserved. 腾讯公司 版权所有 腾讯网络文化经营许可证 千万高品质曲库尽享 客户端下载 $('img').lazyload(); 今天的你我学会了爱你，在自己心底里;我学会了等待，在我生命中! 无论未来的路多么难走，我都愿意陪着你! |
这下是不是觉得这页面 特别简单 ！ 没错 按着这个思路走 不管多难的页面 只要第一步先有思路，然后再去实践，一切都会变得顺畅起来 ！！！【本文地址】
今日新闻 |
推荐新闻 |