京東首頁項目(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)