我写的京东页面代码

2018-06-24 01:04:55来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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">&#xf005e;</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">&#xe620;</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">&#xe620;</i>
    </li>
    <li class="line"></li>
    <li class="public">
     <span>网站导航</span>
     <i class="iconfont">&#xe620;</i>
    </li>
    <li class="line"></li>
    <li class="mobile">
     <span>手机京东</span>
     <i></i>
    </li>
   </ul>
  </div>
 </div>
<!-- 头部导航条结束 -->
<!-- 搜索栏部分开始 -->
 <div class="head_search">
  <div class="w">
   <!-- logo区域 -->
   <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">&#xe672;</i>
   </div>
   <!-- 购物栏区域 -->
   <div class="shopcart">
    <i class="iconfont">&#xe601;</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>
<!-- foot部分 -->
 <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/sprite_fs@1x.png) 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/sprite_index@1x.png) 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/sprite_index@1x.png) 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/sprite_index@1x.png) 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/sprite_index@1x.png) 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/sprite_index@1x.png) 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,有很多不足之处,希望各位大神多多指教。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:做轮播图部分遇到的问题

下一篇:[转]运用@media实现网页自适应中的几个关键分辨率