博客
关于我
京东首页项目(4)---中间模块实现
阅读量：454 次
发布时间：2019-03-06

本文共 9422 字，大约阅读时间需要 31 分钟。

京东首页项目(4)---中间模块实现

有关京东首页项目之前已经写了3篇博客：

1、

2、

3、

上面两篇写了京东首页的头部模块和顶部模块，这篇来写中间模块。这篇所需完成的工作如下：

这里一共完成4个部分，1、左右两侧背景图片模块 2、商品分类模块 3、轮播图模块 4、会员模块。

这里说下大概实现的逻辑，这里实现的方式是通过 定位+浮动。

1、首先对于左右两侧背景图片模块来讲它是一整个背景图。那么要把商品模块，轮播图模块、会员模块放在这个背景图片          上。那么后面三个模块都要脱离标准文档流，浮在这个背景图片的上面。2、这里有个大div包含了这四个模块，然后把这个父div设置相对定位。3、这个大div里有两个小div，一个包含左右两侧背景图片模块，一个包含其它三个模块。同时都设置绝对定位，同时第二个     决定定位的优先级要比第一个高，这样才能浮在最上面。4、对于第二个div里的三个模块，就可以通过浮动来实现。

一、左右两侧背景图片模块

这个模块其实就是一张背景图片，中间的白色也是背景图片的一部分

如图

html部分

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部分

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部分

  1. 左右选择部分（绝对定位实现）
  2. 轮播图部分
  3. 轮播图小圆点部分（浮动实现）
  4. 轮播图下面图片部分 （浮动实现）

如图

html部分

   
                
    
                                        
         
                         
                         
     
                            
          
  1.      
                                  
          
  2.                         
          
  3.                         
          
  4.                         
          
  5.                         
          
  6.                         
          
  7.                         
          
  8.                     
         
                                        
     
                           
                                  
          
    •

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部分

  1. 用户（绝对定位实现）
  2. 促销公告 (绝对定位实现)
  3. 机票（浮动实现）

如图

html部分

   
                
    
                    
                         
     
                        
      新人福利                        
      PLUS会员                    
     
                
    
                 
    
                    
     
                        
      促销                        
      公告                        
      更多

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)

转载地址：http://fxffz.baihongyu.com/

你可能感兴趣的文章
mysql 表的操作
查看>>
mysql 视图，视图更新删除
查看>>
MySQL 触发器
查看>>
mysql 让所有IP访问数据库
查看>>
mysql 记录的增删改查
查看>>
MySQL 设置数据库的隔离级别
查看>>
MySQL 证明为什么用limit时，offset很大会影响性能
查看>>
Mysql 语句操作索引SQL语句
查看>>
MySQL 误操作后数据恢复（update,delete忘加where条件）
查看>>
MySQL 调优/优化的 101 个建议！
查看>>
mysql 转义字符用法_MySql 转义字符的使用说明
查看>>
mysql 输入密码秒退
查看>>
mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
查看>>
mysql 通过查看mysql 配置参数、状态来优化你的mysql
查看>>
mysql 里对root及普通用户赋权及更改密码的一些命令
查看>>
Mysql 重置自增列的开始序号
查看>>
mysql 锁机制 mvcc_Mysql性能优化-事务、锁和MVCC
查看>>
MySQL 错误
查看>>
mysql 随机数 rand使用
查看>>
MySQL 面试题汇总
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-07-13 16:01:00   当前IP: 10.1.242.144   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2025 baihongyu.com 京ICP备2021015314号-2