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

posted on 2019-12-10 22:47 雨点的名字阅读(845) 评论(0) 编辑收藏举报