我寫的京東頁面代碼_ZenDei技術網路在線

1、index.html 主要搭建頁面的結構 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html ...

1、index.html---主要搭建頁面的結構

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>京東(JD.COM)-正品低價品質保障配送及時輕鬆購物</title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/head.css" />
<link rel="stylesheet" href="css/foot.css" />
<link rel="stylesheet" href="css/index.css" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="css/iconfont/iconfont.css" />
</head>
<body>

<div class="head_banner">
  <div class="w">
   <img src="img/top_head.jpg" />
   <a href="#" class="close">X</a>
  </div>
</div>


<div class="head_nav">
  <div class="w">
   
   <ul class="fl">
    <li>
     <i class="iconfont">󰁞</i>
     <span>北京</span>
    </li>
   </ul>
   
   <ul class="fr">
    <li>
     <a href="#">你好，請登錄</a>
    </li>
    <li>
     <a href="#" class="red">免費註冊</a>
    </li>
    <li class="line"></li>
    <li>
     <a href="#">我的訂單</a>
    </li>
    <li class="line"></li>
    <li class="public">
     <a href="#">我的京東</a>
     <i class="iconfont"></i>
    </li>
    <li class="line"></li>
    <li>
     <a href="#">京東會員</a>
    </li>
    <li class="line"></li>
    <li>
     <a href="#">企業採購</a>
    </li>
    <li class="line"></li>
    <li class="public">
     <span>客戶服務</span>
     <i class="iconfont"></i>
    </li>
    <li class="line"></li>
    <li class="public">
     <span>網站導航</span>
     <i class="iconfont"></i>
    </li>
    <li class="line"></li>
    <li class="mobile">
     <span>手機京東</span>
     <i></i>
    </li>
   </ul>
  </div>
</div>


<div class="head_search">
  <div class="w">
   
   <div class="logo">
    <img src="img/logo.gif" />
   </div>
   
   <div class="search">
    <input type="text" class="text" placeholder="羽絨服"/>
    <input type="button" class="btn" />
    <i class="iconfont"></i>
   </div>
   
   <div class="shopcart">
    <i class="iconfont"></i>
    <span>我的購物車</span>
    <em>0</em>
   </div>
   
   <div class="hotwords">
    <ul>
     <li><a href="#" class="red">9.9元瘋搶</a></li>
     <li><a href="#">手機專場</a></li>
     <li><a href="#">滿199減100</a></li>
     <li><a href="#">低至5折</a></li>
     <li><a href="#">億元紅包</a></li>
     <li><a href="#">童鞋</a></li>
     <li><a href="#">拖地機</a></li>
     <li><a href="#">爆款直降</a></li>
     <li><a href="#">耳機</a></li>
    </ul>
   </div>
   
   <div class="main_nav">
    <ul>
     <li><a href="#">秒殺</a></li>
     <li><a href="#">優惠券</a></li>
     <li><a href="#">閃購</a></li>
     <li><a href="#">拍賣</a></li>
     <li class="line"></li>
     <li><a href="#">服裝城</a></li>
     <li><a href="#">京東超市</a></li>
     <li><a href="#">生鮮</a></li>
     <li><a href="#">全球購</a></li>
     <li class="line"></li>
     <li><a href="#">京東金融</a></li>
    </ul>
   </div>
   <a href="#" class="small_banner"><img src="img/hd.png" /></a>
  </div>
</div>


<div class="con_lunbo">
<div class="w">
  
  <div class="side_nav fl">
   <ul>
    <li>
   <a href="#">家用電器</a>
   </li>
   <li>
   <a href="#">手機</a>/
   <a href="#">運營商</a>/
   <a href="#">數位</a>
   </li>
   <li>
   <a href="#">電腦辦公</a>
   </li>
   <li>
    <a href="#">傢具</a>/
    <a href="#">家居</a>/
    <a href="#">家裝</a>/
    <a href="#">廚具</a>
   </li>
   <li>
    <a href="#">男裝</a>/
    <a href="#">女裝</a>/
    <a href="#">童裝</a>/
    <a href="#">內衣</a>
   </li>
   <li>
   <a href="#">個護化妝</a>/
   <a href="#">清潔用品</a>/
   <a href="#">寵物</a>
   </li>
   <li>
    <a href="#">鞋靴</a>/
    <a href="#">箱包</a>/
    <a href="#">珠寶</a>/
    <a href="#">奢侈品</a>
   </li>
   <li>
    <a href="#">運動</a>/
    <a href="#">戶外</a>/
    <a href="#">鐘錶</a>
   </li>
   <li>
    <a href="#">汽車</a>/
    <a href="#">汽車用品</a>
   </li>
   <li>
    <a href="#">母嬰</a>/
    <a href="#">玩具樂器</a>
   </li>
   <li>
    <a href="#">食品</a>/
    <a href="#">酒類</a>/
    <a href="#">生鮮</a>/
    <a href="#">特產</a>
   </li>
   <li>
   <a href="#">醫葯保健</a>
   </li>
   <li>
    <a href="#">圖書</a>/
    <a href="#">音像</a>/
    <a href="#">電子書</a>
   </li>
   <li>
    <a href="#">機票</a>/
    <a href="#">酒店</a>/
    <a href="#">旅游</a>/
    <a href="#">生活</a>
   </li>
   <li>
    <a href="#">理財</a>/
    <a href="#">眾籌</a>/
    <a href="#">白條</a>/
    <a href="#">保險</a>
   </li>
   </ul>
  </div>
  
  <div class="lunbo fl">
   
   <div class="lb">
    <ul>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
     <li><a href="#"><img src="img/banner.jpg" ></a></li>
    </ul>
    
    <ol class="lb_nav">
     <li></li>
     <li></li>
     <li class="active"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ol>
   </div>
   <div class="box_img">
    <img src="img/bot_banner1.jpg" >
    <img src="img/bot_banner2.jpg" class="fr">
   </div>
  </div>
  
  <div class="life_list fl">
   
   <div class="life_top">
    <img src="img/userphoto.jpg" />
    <p>Hi,歡迎來到京東！</p>
    <a href="#">登錄</a>
    <a href="#">註冊</a>
    <div class="fuli">
     <a href="#">新人福利</a>
     <a href="#">PLUS會員</a>
    </div>
   </div>
   
   <div class="life_middle">
    <div class="life_title">
     <a href="#" class="sale">促銷</a>
     <a href="#" class="gonggao">公告</a>
     <a href="#" class="more">更多</a>
    </div>
    <div class="life_con">
     <a href="#">年貨禮包一站購,滿399減150</a><br />
     <a href="#">下單拆福袋贏電視手機</a><br />
     <a href="#">低至5折,搶十億現金紅包！</a><br />
     <a href="#">每日享折扣,京東品質游</a>
    </div>
   </div>
   
   <div class="life_bottom">
    <ul>
     <li>
      <a href="#">
       <b></b>
       <i></i>
       <p>話費</p>
      </a>
     </li>
     <li>
      <a href="#">
       <b></b>
       <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>
</div>
</div>

<div class="con_ms">
<div class="w">
  <div class="title">
   
   <div class="left_title">
    <i class="corner"></i>
    <i class="clock"></i>
    <h4>京東秒殺</h4>
    <a href="#">
     <span>總有你想象不到的低價</span>
     <i class="right_arrow"></i>
    </a>
   </div>
   
   <div class="right_time fr">
    <div class="left_text fl">當前場次</div>
    <span class="hours">01</span>
    <span class="dot">
     <i></i>
     <i></i>
    </span>
    <span class="min">37</span>
    <span class="dot">
     <i></i>
     <i></i>
    </span>
    <span class="sec">57</span>
    <div class="right_text fl">後結束搶購</div>
   </div>
  </div>
  <div class="content">
   <div class="shopping">
    <ul>
     <li>
      <a href="#">
       <b class="shop_icon">珍藏</b>
       <img src="img/sk1.jpg" />
       <span class="shadow"></span>
       <p>酷冷至尊(CoolerMaster)劍客K282C側透版中塔機箱(支持ATX主板/USB3.0/背走線/電源下置/支持SSD) 黑色</p>
      </a>
      <p class="price">
       <span class="newPrice">
       <i>¥</i>
       <span>209.00</span>
       </span>
      </p>
      <s class="oldPrice">¥229.00</s>
     </li>
     <li>
      <a href="#">
       <b class="shop_icon">超值</b>
       <img src="img/sk2.jpg" />
       <span class="shadow"></span>
       <p>酷冷至尊(CoolerMaster)劍客K282C側透版中塔機箱(支持ATX主板/USB3.0/背走線/電源下置/支持SSD) 黑色</p>
      </a>
      <p class="price">
       <span class="newPrice">
       <i>¥</i>
       <span>209.00</span>
       </span>
      </p>
      <s class="oldPrice">¥229.00</s>
     </li>
     <li>
      <a href="#">
       <b class="shop_icon">推薦</b>
       <img src="img/sk3.jpg" />
       <span class="shadow"></span>
       <p>酷冷至尊(CoolerMaster)劍客K282C側透版中塔機箱(支持ATX主板/USB3.0/背走線/電源下置/支持SSD) 黑色</p>
      </a>
      <p class="price">
       <span class="newPrice">
       <i>¥</i>
       <span>209.00</span>
       </span>
      </p>
      <s class="oldPrice">¥229.00</s>
     </li>
     <li>
      <a href="#">
       <img src="img/sk4.jpg" />
       <span class="shadow"></span>
       <p>酷冷至尊(CoolerMaster)劍客K282C側透版中塔機箱(支持ATX主板/USB3.0/背走線/電源下置/支持SSD) 黑色</p>
      </a>
      <p class="price">
       <span class="newPrice">
       <i>¥</i>
       <span>209.00</span>
       </span>
      </p>
      <s class="oldPrice">¥229.00</s>
     </li>
     <li>
      <a href="#">
       <img src="img/sk5.jpg" />
       <span class="shadow"></span>
       <p>酷冷至尊(CoolerMaster)劍客K282C側透版中塔機箱(支持ATX主板/USB3.0/背走線/電源下置/支持SSD) 黑色</p>
      </a>
      <p class="price">
       <span class="newPrice">
       <i>¥</i>
       <span>209.00</span>
       </span>
      </p>
      <s class="oldPrice">¥229.00</s>
     </li>
    </ul>
   </div>
   <div class="big_Img">
    <img src="img/sk6.jpg" />
   </div>
  </div>
</div>
</div>

<div class="foot">
  <div class="foot_top">
   
   <div class="w">
    <ul>
     <li>
      <h5>多</h5>
      <p>品類齊全，輕鬆購物</p>
     </li>
     <li>
      <h5>快</h5>
      <p>品類齊全，輕鬆購物</p>
     </li>
     <li>
      <h5>好</h5>
      <p>品類齊全，輕鬆購物</p>
     </li>
     <li>
      <h5>省</h5>
      <p>品類齊全，輕鬆購物</p>
     </li>
    </ul>
   </div>
  </div>
  
  <div class="service">
   <div class="w clear">
    <div class="con">
     <div class="service_list fl">
      <dl>
       <dt>購物指南</dt>
       <dd>購物流程</dd>
       <dd>會員介紹</dd>
       <dd>生活旅行</dd>
       <dd>常見問題</dd>
       <dd>大家電</dd>
       <dd>聯繫客服</dd>
      </dl>
      <dl>
       <dt>購物指南</dt>
       <dd>購物流程</dd>
       <dd>會員介紹</dd>
       <dd>生活旅行</dd>
       <dd>常見問題</dd>
       <dd>大家電</dd>
       <dd>聯繫客服</dd>
      </dl>
      <dl>
       <dt>購物指南</dt>
       <dd>購物流程</dd>
       <dd>會員介紹</dd>
       <dd>生活旅行</dd>
       <dd>常見問題</dd>
       <dd>大家電</dd>
       <dd>聯繫客服</dd>
      </dl>
      <dl>
       <dt>購物指南</dt>
       <dd>購物流程</dd>
       <dd>會員介紹</dd>
       <dd>生活旅行</dd>
       <dd>常見問題</dd>
       <dd>大家電</dd>
       <dd>聯繫客服</dd>
      </dl>
      <dl>
       <dt>購物指南</dt>
       <dd>購物流程</dd>
       <dd>會員介紹</dd>
       <dd>生活旅行</dd>
       <dd>常見問題</dd>
       <dd>大家電</dd>
       <dd>聯繫客服</dd>
      </dl>
     </div>
     <div class="map fr">
      <h5>京東自營覆蓋區縣</h5>
      <p>京東已向全國2661個區縣提供自營配送服務，支持貨到付款、<PO>  </PO>S機刷卡和售後上門服務。</p>
      <a href="#">查看詳情 > </a>
     </div>
    </div>
   </div>
  </div>
  
  <div class="copyright">
   <div class="w">
    <p>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
     <span>|</span>
     <a href="#">關於我們</a>
    </p>
    <p>
     <a href="#">京公網安備11000002000088號</a>
     <span>|</span>
     <a href="#">京ICP證070359號</a>
     <span>|</span>
     <a href="#">互聯網藥品信息服務資格證編號（京）-經營性-2014-0008</a>
     <span>|</span>
     <a href="#">新出發京零字第大120007號</a>
    </p>
    <p>
     <a href="#">互聯網出版許可證編號新出網證（京）字150號</a>
     <span>|</span>
     <a href="#">出版物經營許可證</a>
     <span>|</span>
     <a href="#">網路文化經營許可證京網文[2014]2148-343號</a>
     <span>|</span>
     <a href="#">違法和不良信息舉報電話：12345678</a>
    </p>
    <p>
     <a href="#">Copyright @ 2014-2017</a>
     <a href="#">京東JD.com版權所有</a>
     <span>|</span>
     <a href="#">消費者維權熱線：4006067733</a>
     <a href="#">經營證照</a>
    </p>
    <p>
     <a href="#">京東旗下網站：京東錢包</a>
     <span>|</span>
     <a href="#">京東雲</a>
    </p>
    <p class="pic_href">
     <a href="#"></a>
     <a href="#"></a>
     <a href="#"></a>
     <a href="#"></a>
     <a href="#"></a>
     <a href="#"></a>
    </p>
   </div>
  </div>
</div>

<div class="box_fix">
  <img src="img/fix1.png" alt="" />
  <a href="#"><img src="img/fix2.png" alt="" /></a>
  <a href="#"><img src="img/fix3.png" alt="" /></a>
  <a href="#"><img src="img/fix4.png" alt="" /></a>
  <a href="#"><img src="img/fix5.png" alt="" /></a>
  <a href="#"><img src="img/fix6.png" alt="" /></a>
</div>
</body>
</html>

2、base.css---主要寫一些樣式重置的代碼

/*樣式重置*/
body,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,textarea{
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #999;
}
li {
list-style: none;
}
img,input {
outline: none;
vertical-align: middle;
border: 0;
}
body {
font-size: 12px;
font-family: "微軟雅黑";
color: #999;
background-color: #f6f6f6;
}
table {
border-collapse: collapse;
}

/*放置一些公共的樣式*/
.clear:after {
display: block;
content: "";
clear: both;
}
/*IE相容*/
.clear {
zoom: 1;

}
.fl {
float: left;
}
.fr {
float: right;
}
.w {
width: 1190px;
margin: 0 auto;
}

3、head.css---主要寫頁面頂部的樣式

/*頂部廣告樣式開始*/
.head_banner {
height: 80px;
background-color: #d32338;
}
.head_banner .w {
position: relative;
}
.head_banner .w .close {
display: block;
width: 20px;
height: 20px;
font-size: 13px;
color: rgba(255,255,255,0.3);
line-height: 20px;
text-align: center;
background-color: rgba(0,0,0,0.3);
position: absolute;
top: 5px;
right: 5px;
}
.head_banner .w .close:hover {
color: rgba(255,255,255,0.8);
background-color: rgba(0,0,0,0.8);
}
/*頂部廣告樣式結束*/

/*頭部導航部分開始*/
.head_nav {
height: 30px;
background-color: #e3e4e5;
border-bottom: 1px #ddd solid;
}
.head_nav .w ul.fl li {
margin-left: 200px;
height: 30px;
line-height: 30px;
text-align: center;
border: 1px #e3e4e5 solid;
border-bottom: none;
}
.head_nav .w ul.fl li:hover{
background-color: #fff;
border: 1px #e3e4e5 solid;
border-bottom: none;
}
.head_nav .w ul.fl li .iconfont {
/*margin-left: 10px;*/
color: #f10215;
}
/*.head_nav .w .fl .iconfont:hover {
background-color: #fff;
border: 1px #eee solid;
border-bottom: none;
}*/
.head_nav .w ul.fr li {
/*height: 10px;*/
padding: 0 6px;
line-height: 30px;
float: left;
}
.head_nav .w ul.fr li a.red {
color: red;
}
.head_nav .w ul.fr li a:hover{
color: #f10215;
}
.head_nav .w ul.fr li .iconfont {
font-size: 9px;
}
.head_nav .w ul.fr li.line {
width: 1px;
height: 10px;
padding: 0; /*li設置了padding撐開，line不用撐開，把padding設為0*/
background-color: #cccccc;
margin: 11px 6px 0 6px;
}
/*.head_nav .w .fr li a {
font-size: 12px;
color: #999;
}
.head_nav .w .fr a:hover {
font-size: 12px;
color: #f10215;
}*/
.head_nav .w .fr li .public {
/*font-size: 9px;*/
border: 1px #e3e4e5 solid;
border-bottom: none;
height: 29px;
}
.head_nav .w .fr li .public:hover {
background-color: #fff;
border: 1px #ccc solid;
border-bottom: none;
}

/*小三角樣式*/
.head_nav .w .fr li.mobile {
position: relative;
}
.head_nav .w .fr li.mobile:after {
display: block;
content: "";
width: 0;
height: 0;
border-top: 8px transparent solid;
border-right: 8px transparent solid;
border-bottom: 8px #fff solid;
border-left: 8px transparent solid;
position: absolute;
top: 18px;
left: 20px;
}
/*二維碼樣式*/
.head_nav .w .fr li.mobile i {
width: 58px;
height: 58px;
border: 1px #ccc solid;
display: block;
background: url(../img/mobile_qrcode.png) no-repeat center;
position: absolute;
left: 0px;
top: 31px;
}
/*頭部導航部分結束*/
/*頭部搜索區域開始*/
.head_search {
height: 140px;
}
.head_search .w {
position: relative;
}
.head_search .w .logo {
float: left;
position: absolute;
top: -30px;
/*margin-top: -30px;*/
box-shadow: 0px 0px 10px #ccc;
}
.head_search .w .search {
width: 548px;
height: 33px;
float: left;
margin-top: 25px;
margin-left: 320px;
border: 1px #f10215 solid;
position: relative;
}
.head_search .w .search .text {
width: 498px;
height: 33px;
float: left;
text-indent: 4px; /*input框里的字體縮進*/
}
.head_search .w .search .btn {
width: 50px;
height: 33px;
background-color: #f10215;
float: left;
}
.head_search .w .search .iconfont {
position: absolute;
top: 7px;
right: 13px;
color: #fff;
font-size: 20px;
}
.head_search .w .shopcart {
float: left;
width: 188px;
height: 33px;
line-height: 33px;
text-align: center;
font-size: 12px;
color: #f10215;
background-color: #fff;
border: 1px #e3e4e5 solid;
margin-top: 25px;
margin-left: 35px;
position: relative;
}
.head_search .w .shopcart em {
display: block;
font-style: normal;
width: 14px;
height: 14px;
color: #fff;
line-height: 14px;
text-align: center;
border-radius: 50%;
background-color: #f10215;
position: absolute;
top: 5px;
right: 34px;
}
/*熱詞搜索樣式*/
.head_search .w .hotwords {
float: left;
margin-left: 320px;
margin-top: 10px;
}
.head_search .w .hotwords ul li {
float: left;
font: 12px/12px "微軟雅黑";
margin-right: 10px;
}
.head_search .w .hotwords a.red {
color: red;
}
.head_search .w .hotwords a:hover {
color: red;
}
/*主導航欄樣式*/
.head_search .w .main_nav {
float: left;
margin-left: 230px;
margin-top: 31px;
}
.head_search .w .main_nav ul li {
float: left;
font: 700 16px/16px "微軟雅黑";
margin-right: 30px;
}
.head_search .w .main_nav ul li.line {
width: 1px;
height: 10px;
background-color: #ccc;
margin: 3px 20px 0 -10px;
}
.head_search .w .main_nav ul li a {
color: #555;
}
.head_search .w .main_nav ul li a:hover {
color: red;
}

/*小廣告*/
.head_search .w .small_banner {
margin-top: 12px;
display: block;
float: right;
}

/*頭部搜索區域結束*/

4、index.css---主要寫輪播圖部分和秒殺部分的樣式

/*輪播區域樣式*/
.con_lunbo {
height: 480px;
background: url(../img/a-bg.png) no-repeat center;
z-index: -1;
} /*背景圖被壓在版心下麵，但是重新敲一遍，保存一遍就可以了，為什麼？？*/

/*左側導航列表樣式*/
.con_lunbo .w .side_nav {
width: 190px;
height: 480px;
background-color: #6e6568;
}
.con_lunbo .w .side_nav ul {
margin-top: 16px;
}
.con_lunbo .w .side_nav ul li {
height: 30px;
font: 12px/30px "微軟雅黑";
color: #fff;
padding-left: 12px;
}
.con_lunbo .w .side_nav ul li:hover {
background-color: rgba(255,255,255,0.3);
}
.con_lunbo .w .side_nav ul li a {
color: #fff;
}
.con_lunbo .w .side_nav ul li a:hover {
color: red;
}

/*中間輪播區域樣式*/
.con_lunbo .w .lunbo {
width: 790px;
height: 480px;
margin: 0 10px;
}
.con_lunbo .w .lunbo .lb {
height: 340px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.con_lunbo .w .lunbo .lb ul {
width: 8000px;
}
.con_lunbo .w .lunbo .lb ul li {
/*width: 790px;
height: 340px;*/
float: left;
}
.con_lunbo .w .lunbo .box_img {
height: 130px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav {
width: 182px;
height: 12px;
padding: 4px 9px;
border-radius: 9px;
background-color: rgba(255,255,255,0.5);
position: absolute;
left: 50%;
bottom: 20px;
margin-left: -91px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li {
float: left;
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li:nth-last-child(1) {
margin: 0;
}
.con_lunbo .w .lunbo .lb ol.lb_nav li.active {
background-color: red;
}

/*右側生活列表樣式*/
.con_lunbo .w .life_list {
width: 190px;
height: 480px;
background-color: #fff;
}

/*上邊登錄部分樣式*/
.con_lunbo .w .life_list .life_top {
width: 190px;
height: 115px;
border-bottom: 1px #e6e6e6 solid;
}
.con_lunbo .w .life_list .life_top img {
width: 45px;
height: 45px;
border-radius: 50%;
margin: 15px 10px 10px;
float: left;
}
.con_lunbo .w .life_list .life_top p {
float: left;
font: 11px/11px "微軟雅黑";
color: #666;
/*margin-top: 21px;
margin-left: 15px;
margin-bottom: 9px;*/
margin: 21px 0 15px;
}
.con_lunbo .w .life_list .life_top a {
float: left;
font: 11px/11px "微軟雅黑";
color: #000;
font-weight: bold;
margin-right: 9px;
}
.con_lunbo .w .life_list .life_top a:nth-child(1) {   /*不起作用*/
margin-top: 15px;   /*a是行內元素，沒有margin，設置浮動以後就有margin了*/
}
.con_lunbo .w .life_list .life_top a:hover {
color: red;
}
.con_lunbo .w .life_list .life_top .fuli {
width: 168px;
height: 24px;
float: left;
margin-top: 15px;
}
.con_lunbo .w .life_list .life_top .fuli a {
float: left;
display: block;
width: 70px;
height: 20px;
border: 2px #e01222 solid;
font: 11px/20px "微軟雅黑";
text-align: center;
color: #e01222;
background-color: #fff;
margin: 0 10px;
}
.con_lunbo .w .life_list .life_top .fuli a:nth-child(2) {
margin: 0;
}
.con_lunbo .w .life_list .life_top .fuli a:hover {
color: #fff;
background-color: #e01222;
}
/*中間促銷部分樣式*/
.con_lunbo .w .life_list .life_middle {
width: 160px;
height: 147px;   /*154px-7px*/
margin: 0 auto;
}
.con_lunbo .w .life_list .life_middle .life_title {
width: 147px;    /*160px-13px*/
height: 15px;      /*17px-2*/
margin-top: 7px;
border-bottom: 1px #e6e6e6 solid;
padding-bottom: 2px;
}
.con_lunbo .w .life_list .life_middle .life_title a {
float: left;
font: 11px "微軟雅黑";
color: #333;
font-weight: bold;
}
.con_lunbo .w .life_list .life_middle .life_title a.sale {
border-right: 1px #e6e6e6 solid;
padding-right: 13px;
}
.con_lunbo .w .life_list .life_middle .life_title a.gonggao {
margin-left: 15px;
}
.con_lunbo .w .life_list .life_middle .life_title a.more {
float: right;
}

.con_lunbo .w .life_list .life_middle .life_con {
height: 127px;
}
.con_lunbo .w .life_list .life_middle .life_con a {
font: 11px/23px "微軟雅黑";
color: #666;
float: left;
}
.con_lunbo .w .life_list .life_middle .life_con a:nth-child(1) { /*不生效，問題同上*/
margin-top: 19px;
}
.con_lunbo .w .life_list .life_middle .life_con a:hover {
color: red;
}

/*下邊生活服務部分樣式*/
.con_lunbo .w .life_list .life_bottom {
width: 190px;
height: 210px;
}
.con_lunbo .w .life_list .life_bottom {
overflow: hidden;
}
.con_lunbo .w .life_list .life_bottom ul {
width: 192px;
overflow: hidden; /*為什麼不起作用?????? 應該給ul的父元素設置overflow: hidden;*/
}
.con_lunbo .w .life_list .life_bottom ul li {
float: left;
width: 47px;
height: 69px;
border-top: 1px #e6e6e6 solid;
border-right: 1px #e6e6e6 solid;
position: relative;
}
.con_lunbo .w .life_list .life_bottom ul li a i {
display: block;
width: 15px;
height: 18px;
background: url(../img/[email protected]) no-repeat -4px -88px;
text-align: center;
margin: 15px 16px 10px 15px;
}
.con_lunbo .w .life_list .life_bottom ul li:nth-child(2) a i { /*不生效 */
width: 20px; /*li包含a，應該是第二個li里的a，而不是第二個a*/
height: 20px;
background-position: -2px -45px;
margin-top: 17px;
margin-left: 13px;
}
.con_lunbo .w .life_list .life_bottom ul li a p { /*不生效*/
font-size: 11px "微軟雅黑"; /*剛開始設置的是span，span是行內元素，text-align: center;不起作用*/
color: #666;
text-align: center;
}
.con_lunbo .w .life_list .life_bottom ul li a b {
display: block;
width: 13px;
height: 16px;
background: url(../img/jian.png) no-repeat;
position: absolute;
top: 0;
right: 0;
}

/*秒殺部分樣式*/
.con_ms {
height: 305px;
margin-top: 10px;
}

/*標題左側樣式*/
.con_ms .w .title {
height: 55px;
background: url(../img/seckill_hd.png) no-repeat;
}
.con_ms .w .title .left_title .corner {
display: block;
width: 25px;
height: 25px;
background: url(../img/[email protected]) no-repeat -190px -48px;
float: left;
margin-top: -2px;
margin-left: -1px;
}
.con_ms .w .title .left_title .clock {
display: block;
width: 34px;
height: 40px;
background: url(../img/[email protected]) no-repeat 0px -39px;
float: left;
margin-top: 8px;
margin-left: 31px;
}
.con_ms .w .title .left_title h4 {
float: left;
font: 24px/24px "微軟雅黑";
color: #fff;
margin-left: 10px;
margin-top: 16px;
}
.con_ms .w .title .left_title a {
float: left;
font-size: 13px;
color: #fff;
margin-left: 15px;
margin-top: 25px;
}
.con_ms .w .title .left_title a i.right_arrow {
display: inline-block;
background: url(../img/[email protected]) no-repeat -153px -39px;
width: 16px;
height: 17px;
vertical-align: top;
}

/*標題右側時間樣式*/
.con_ms .w .title .right_time .left_text {
width: 55px;
height: 28px;
margin-top: 27px;
margin-right: 7px;
font: 12px/12px "微軟雅黑";
color: #fff;
}
.con_ms .w .title .right_time span {
float: left;
}
.con_ms .w .title .right_time span.hours,span.min,span.sec {
width: 35px;
height: 37px;
background-color: #440106;
border-radius: 3px;
font: 12px/37px "微軟雅黑";
color: #f90013;
text-align: center;
margin-top: 10px;
}
.con_ms .w .title .right_time span.dot {
width: 4px;
height: 12px;
/*margin-top: 22px;*/
margin: 22px 4px 0;
}
.con_ms .w .title .right_time span.dot i {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #440106;
}
.con_ms .w .title .right_time span.dot i:nth-child(1) {
margin-bottom: 4px;
}
.con_ms .w .title .right_time .right_text {
width: 70px;
height: 28px;
/*margin-top: 27px;
margin-left: 7px;
margin-right: 22px;*/
margin: 27px 22px 0 7px;
font: 12px/12px "微軟雅黑";
color: #fff;
}

/*下側商品區域樣式*/
.con_ms .w .content .shopping {
height: 250px;
background-color: #fff;
float: left;
}
.con_ms .w .content .shopping ul li {
float: left;
width: 199px;
height: 225px;
border-right: 1px #e7e7e7 solid;
}
.con_ms .w .content .shopping ul li a {
display: block;
width: 184px;
height: 195px;
margin-left: 15px;
text-align: center;
margin-bottom: 11px;
position: relative;
}
.con_ms .w .content .shopping ul li a b.shop_icon {
width: 30px;
height: 40px;
display: block;
position: absolute;
z-index: 2;
color: #fff;
text-align: center;
line-height: 40px;
font-weight: normal;
background: url(../img/[email protected]) no-repeat -53px -39px;
}
.con_ms .w .content .shopping ul li a img {
position: relative;
top: 13px;
}
.con_ms .w .content .shopping ul li a p {
text-align: left;
margin-top: 15px;
height: 28px;
line-height: 14px;
overflow: hidden; /*溢出內容隱藏*/
}
.con_ms .w .content .shopping ul li p.price span.newPrice {
color: red;
margin-left: 15px;
float: left;
}
.con_ms .w .content .shopping ul li p.price span.newPrice i {
font-size: 9px;
font-size: normal;
}
.con_ms .w .content .shopping ul li p.price span.newPrice span {
font-size: 14px;
font-weight: bold;
}
.con_ms .w .content .shopping ul li .oldPrice {
font-size: 9px;
float: left;
margin-left: 10px;
margin-top: 2px;
}
.con_ms .w .content .shopping ul li span.shadow {
width: 170px;
height: 22px;
display: block;
background: url(../img/[email protected]) no-repeat;
}

/*下側右邊廣告區域樣式*/
.con_ms .w .content .big_Img {
width: 190px;
float: left;
}
.con_ms .w .content .big_Img img {
float: left;
}

5、foot.css---主要寫頁面底部的樣式

.foot {
height: 567px;
background-color: #eaeaea;

}
/*上面多快好省部分樣式*/
.foot .foot_top {
height: 102px;
border-bottom: 1px #dedede solid;
}
/*.foot .foot_top .w {
height: 102px;
border-bottom: 1px #dedede solid;
}*/
.foot .foot_top .w ul li {
float: left;
width: 297px;
height: 102px;
line-height: 102px;
/*text-align: center;*/
font-weight: bold;
}
.foot .foot_top .w ul li h5 {
float: left;
width: 36px;
height: 42px;
margin-top: 30px;
margin-left: 36px;
line-height: 42px;
text-align: center;
font-size: 20px;
color: #e01121;
text-indent: -999999px;   /*1、優化 2、客戶體驗*/
background: url(../img/ico_service.png) no-repeat;
}
.foot .foot_top .w ul li:nth-child(2) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -43px;*/
background-position: 0 -43px;
}
.foot .foot_top .w ul li:nth-child(3) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -85px;*/
background-position: 0 -85px;
}
.foot .foot_top .w ul li:nth-child(4) h5 {
/*background: url(../img/ico_service.png) no-repeat 0 -127px;*/
background-position: 0 -127px;
}
.foot .foot_top .w ul li p {
float: left;
margin-left: 10px;
font-size: 18px;
color: #444444;
}
/*中間服務部分*/
/*.foot .service {
height: 200px;
}*/
.foot .service .w {
/*height: 200px;*/
border-bottom: 1px #ddd solid;
}
/*.foot .service .w .service_list {
}*/
.foot .service .service_list dl {
float: left;
width: 198px;
}
.foot .service .service_list dl dt {
margin-top: 26px;
margin-bottom: 15px;
font: 13px/13px "微軟雅黑";
color: #666666;
font-weight: bold;
}
.foot .service .service_list dl dd {
margin-bottom: 11px;
font: 11px/11px "微軟雅黑";
}
.foot .service .map {
width: 200px;
background: url(../img/ico_footer.png) no-repeat;
height: 172px;         /*不知道172怎麼來的？？？？？？*/
background-position: 0 22px;
}
.foot .service .map h5 {
margin-top: 25px;
font: 13px/13px "微軟雅黑";
font-weight: bold;
color: #666666;
text-align: center;
}
.foot .service .w .map p {
margin: 23px 20px 0 10px;
font: 11px "微軟雅黑";
line-height: 18px;
}
.foot .service .map a {
float: right;
}
.foot .service .map a:hover {
color: red;
}
/*尾部版權部分*/
.foot .copyright p {
margin-bottom: 9px;
text-align: center;
}
.foot .copyright p:nth-child(1) {
margin-top: 19px;
margin-bottom: 17px;
font: 12px/12px "微軟雅黑";
font-weight: bold;
}
.foot .copyright p a {
margin: 0 9px;
}
.foot .copyright p a {
font: 13px/13px "微軟雅黑";
color: #666;
text-align: center;
}
.foot .copyright p.pic_href {
width: 678px;    /*不知道678怎麼來的？？測的是640*/
margin: 0 auto;
}
.foot .copyright p.pic_href a {
float: left;
display: block;
width: 103px;
height: 32px;
background: url(../img/ico_footer.png) no-repeat;
background-position: 0 -150px;
margin: 0;
margin-right: 10px;
}
.foot .copyright p.pic_href a:nth-child(2) {
background-position: -104px -150px;
}
.foot .copyright p.pic_href a:nth-child(3) {
background-position: 0px -183px;
}
.foot .copyright p.pic_href a:nth-child(4) {
background-position: -104px -183px;
}
.foot .copyright p.pic_href a:nth-child(5) {
background-position: 0px -216px;
}
.foot .copyright p.pic_href a:nth-child(6) {
background-position: -104px -216px;
}

/*固定底部年貨樣式*/
.box_fix {
width: 1334px;
height: 95px;
background: url(../img/footer-fix.png) no-repeat;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -667px;
}
.box_fix>img:nth-child(1) {
margin-left: 104px;
}
.box_fix img {
margin-top: 15px;
}
.box_fix a:nth-child(2) {
margin-left: 76px;
}

這是我寫的京東首頁的代碼，主要用的是html和css，有很多不足之處，希望各位大神多多指教。