京东首页项目(4)---中间模块实现
有关京东首页项目之前已经写了3篇博客：
上面两篇写了京东首页的头部模块和顶部模块，这篇来写中间模块。这篇所需完成的工作如下：
这里一共完成4个部分，1、左右两侧背景图片模块 2、商品分类模块 3、轮播图模块 4、会员模块。
这里说下大概实现的逻辑，这里实现的方式是通过 定位+浮动。
1、首先对于左右两侧背景图片模块来讲它是一整个背景图。那么要把商品模块，轮播图模块、会员模块放在这个背景图片 上。那么后面三个模块都要脱离标准文档流，浮在这个背景图片的上面。 2、这里有个大div包含了这四个模块，然后把这个父div设置相对定位。 3、这个大div里有两个小div，一个包含左右两侧背景图片模块，一个包含其它三个模块。同时都设置绝对定位，同时第二个 决定定位的优先级要比第一个高，这样才能浮在最上面。 4、对于第二个div里的三个模块，就可以通过浮动来实现。
一、左右两侧背景图片模块
这个模块其实就是一张背景图片，中间的白色也是背景图片的一部分
如图
html部分
<div class="ad">
<a href="#"></a>
</div>
css部分
.ad {
height: 480px;
background: url(../images/bg.png) no-repeat top center;
position: absolute; /* 行内块转换 */
top: 0;
left: 0;
width: 100%; /* 强制显示宽度 */
}
.ad a {
display: block;
height: 100%;
}
二、商品分类模块
这个模块分为3部分
如图
HTML部分
<div class="jd-clo1">
<ul>
<li><a href="#">家用电器</a></li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">电脑</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
<li>
<a href="#">手机</a>
<span>/</span>
<a href="#">运营商</a>
<span>/</span>
<a href="#">数码</a>
</li>
</ul>
</div>
CSS部分
.jd-clo1 {
width: 190px;
height: 465px;
background-color: #6E6568;
float: left;
padding-top: 15px;
}
.jd-clo1 li {
padding-left: 10px;
height: 28px;
line-height: 28px;
}
.jd-clo1 li:hover {
background-color: #999395;
}
.jd-clo1 li a {
color: #fff;
font-size: 14px;
}
.jd-clo1 li span {
color: #fff;
font-size: 12px;
}
三、版权模块
这个模块分为4部分
- 左右选择部分（绝对定位实现）
- 轮播图部分
- 轮播图小圆点部分（浮动实现）
- 轮播图下面图片部分 （浮动实现）
如图
html部分
<div class="jd-clo2">
<div class="jd-clo2-hd">
<a href="#" class="arr-l"></a> <!-- 左右图片部分 -->
<a href="#" class="arr-r"></a>
<ol>
<li class="current"></li> <!-- 轮播图小圆点部分 -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<ul> <!-- 轮播图部分 -->
<li><a href="#"><img src="images/banner.jpg"></a></li>
</ul>
</div>
<div class="jd-clo2-bd"> <!-- 展示图片部分 -->
<div class="firstPic">
<img src="images/pic1.jpg" >
</div>
<div>
<img src="images/pic2.jpg" >
</div>
</div>
</div>
CSS部分
.jd-clo2 {
width: 790px;
height: 480px;
float: left;
margin-left: 10px;
}
.jd-clo2-hd {
height: 340px;
margin-bottom: 10px;
position: relative;
}
.jd-clo2-bd div {
width: 390px;
height: 130px;
float: left;
}
.jd-clo2-bd div img {
width: 100%;
}
.firstPic {
margin-right: 10px;
}
.arr-l, .arr-r {
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
background: rgba(0, 0, 0, 0.3);
font-family: "icomoon";
color: #fff;
text-align: center;
line-height: 60px;
font-size: 25px;
}
.arr-l {
left: 0;
}
.arr-r {
right: 0;
}
.jd-clo2-hd ol {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -90px;
width: 180px;
height: 20px;
background: rgba(255, 255,255, 0.3);
border-radius: 10px;
}
.jd-clo2-hd ol li {
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
float: left;
margin: 4px 5px;
cursor: pointer;
}
.jd-clo2-hd .current {
background-color: #f10215;
}
四、会员模块
这个模块分为4部分
- 用户（绝对定位实现）
- 促销公告 (绝对定位实现)
- 机票（浮动实现）
如图
html部分
<div class="jd-clo3">
<div class="user">
<div class="user-info">
Hi, 欢迎来到京东! <br />
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#" class="info-img">
<img src="images/no_login.jpg">
</a>
</div>
<div class="user-profit">
<a href="#">新人福利</a>
<a href="#">PLUS会员</a>
</div>
</div>
<div class="news">
<div class="tab-hd">
<a href="javascript:;" class="cuxiao">促销</a>
<a href="javascript:;">公告</a>
<a href="#" class="more1">更多</a>
<div class="line"></div>
</div>
<div class="tab-bd">
<ul>
<li><a href="#">蓄电池专场下单立减100元</a></li>
<li><a href="#">蓄电池专场下单立减100元</a></li>
<li><a href="#">蓄电池专场下单立减100元</a></li>
<li><a href="#">蓄电池专场下单立减100元</a></li>
</ul>
</div>
</div>
<div class="jd-service">
<ul>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
<li>
<a href="#">
<i></i>
<p>机票</p>
</a>
</li>
</ul>
</div>
</div>
css部分
.jd-clo3 {
width: 190px;
height: 480px;
float: right;
}
.jd-clo3 a {
font-size: 12px;
color: #747474;
}
.user {
height: 95px;
background-color: pink;
padding: 20px 15px 0;
}
.user-info {
height: 40px;
padding-left: 54px;
font-size: 12px;
color: #747474;
line-height: 22px;
position: relative;
}
.user-info a {
font-size: 12px;
color: #747474;
}
.user-info a:hover {
color: #f10215;
}
.info-img {
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
overflow: hidden;
}
.info-img img {
width: 100%;
height: auto; /* 自动 跟随者宽度 一起缩放 */
}
.user-profit {
margin-top: 14px;
}
.user-profit a {
width: 70px;
height: 20px;
border: 2px solid #f10215;
display: inline-block;
font-size: 12px;
color: #f10215;
text-align: center;
line-height: 20px;
margin-right: 4px;
}
.user-profit a:hover {
background-color: #f10215;
color: #fff;
}
.news {
height: 149px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 5px 15px 0;
}
.tab-hd {
border-bottom: 1px solid #ccc;
padding: 3px 0;
position: relative;
}
.tab-hd a {
margin: 0 4px;
}
.cuxiao {
border-right: 1px solid #ccc;
padding-right: 10px;
}
.news .more1 {
position: absolute;
top: 6px;
right: 0;
}
.line {
width: 28px;
height: 2px;
background-color: #f10215;
position: absolute;
bottom: -1px;
left: 0;
}
.tab-bd {
margin-top: 10px;
}
.tab-bd li {
height: 23px;
line-height: 23px;
}
.jd-service {
height: 209px;
/* background-color: skyblue; */
width: 190px;
overflow: hidden;
}
.jd-service ul {
width: 195px;
}
.jd-service li {
width: 47px;
height: 69px;
/* background-color: purple; */
float: left;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.jd-service li a {
width: 100%;
height: 100%; /* 根据父亲 */
/* height: auto; 针对于自己的高度和宽度 */
display: block;
}
.jd-service i {
display: block;
width: 24px;
height: 24px;
margin: 15px auto 8px;
background: url(../images/sprite_fs@1x.png) no-repeat;
}
.jd-service p {
text-align: center;
}
你如果愿意有所作为，就必须有始有终。(14)
来源：https://www.cnblogs.com/qdhxhz/p/11884878.html