admin 管理员组文章数量: 1184232
爱无路，恨无情。相思无缘，相爱无份。曾相识，恨离别。无风雨，无同舟，何结果。情远天边，心无挂碍，唯爱你独一。
图片链接：https://pan.baidu/s/1MlC8RzP1tYxwwgSL_FANXA
提取码：cydc
源页面
思路解析
首先了解一下该页面的总体布局 分为 上中下 以及 侧面
下面我来讲解一下我做该页面上下侧面的思路
1.顶部
可以把该页面的顶部分成两部分
分别是上 下 两大块
上面这部分又可以分为四小块
下面这部分已经很简单了 不用再怎么分解了
如图所示：
2.底部
可以把该页面的底部分成七块，如图所示：
侧面
总共两部分，如图所示 将其分解
这下是不是觉得这页面 特别简单 ！ 没错 按着这个思路走 不管多难的页面 只要第一步先有思路，然后再去实践，一切都会变得顺畅起来 ！！！
下面来看看我的代码 ，需要原图片的 可以来私我 ！！希望更多的大佬指点 ，嘿嘿！
代码
<!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 {
/* 去掉默认样式 */
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;
}
</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高品质 全员开启</li>
<li>独家音效 全面升级</li>
<li>轻盈视觉 动态皮肤</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="乐币用途： 用于购买数字专辑、支持明星打榜、TME Live等">购买乐币</li>
<li class="select__item js_buyFP" title="饭票用途： 用于在直播中赠送礼物、开通粉丝团、购买贵族等">充值饭票</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>数字专辑</li>
<li>票务</li>
</ul>
</div>
</div>
<div id="Playlist">歌单推荐</div>
<div id="newsong">
新歌首发
</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>特色产品</h3>
</p>
<div id="img5">
<input type="text">
全民K歌
<div id="group">车载互联</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>企业FM</div>
</div>
<div>
<div>腾讯视频</div>
<div>腾讯社交广告</div>
<div>腾讯微云</div>
<div>智能电视网</div>
</div>
<div>
<div>手机QQ空间</div>
<div>电脑管家</div>
<div>腾讯云</div>
<div>当贝市场</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集团官网</h3>
</p>
<div>腾讯音乐</div>
</div>
<div id="kong"></div>
</div>
<div id="base">
<div>
<a href="#" title="关于腾讯">关于腾讯</a>|
<a href="#" title="About Tencent">About Tencent</a>|
<a href="#" title="服务条款">服务条款</a>|
<a href="#" title="用户服务协议">用户服务协议</a>|
<a href="#" title="隐私政策">隐私政策</a>|
<a href="#" title="权利声明">权利声明</a>|
<a href="#" title="广告服务">广告服务</a>|
<a href="#" title="腾讯招聘">腾讯招聘</a>|
<a href="#" title="客服中心">客服中心</a>|
<a href="#" title="网站导航">网站导航</a>
</div>
<div>
<p>Copyright © 1998 - 2020 Tencent. All Rights Reserved.</p>
</div>
<div>
<p>腾讯公司
<a href="#">版权所有</a>
<a href="#">腾讯网络文化经营许可证</a></p>
</div>
</div>
</div>
<div class="box">
<img src="img/ia_100000001010.png" alt="#">
<p>千万高品质曲库尽享</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>
今天的你
我学会了爱你，在自己心底里;我学会了等待，在我生命中!
无论未来的路多么难走，我都愿意陪着你!
版权声明：本文标题：qq音乐主页 思路解析（及代码） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1755010229a3059849.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论