京东首页项目(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

标签

模块手机

background

运营商

通信

margin