首页 > > 网页制作 > css >

我写的京东页面代码

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实现网页自适应中的几个关键分辨率

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签