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">
<!-- 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"></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>
<!-- 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，有很多不足之处，希望各位大神多多指教。
扫一扫
744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
