相同的原理可以完成floor2，floor3
jd_index.html
<!doctype html>
<html>
<head>
<title>Insert your title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="jd_index.css">
</head>
<body>
<!-- 1、网页头部 -->
<header id="top">
<!-- 1、五角星(左) -->
<img class="lf" src="Images/star.jpg">
<!-- 2、收藏京东(左) -->
<a href="#" class="lf">收藏京东</a>
<!-- 3、文字列表(右) -->
<ul class="rt">
<li>
您好，欢迎来到京东
<a href="#">[登录]</a>
<a href="#">[免费注册]</a>
</li>
<li>
<b></b> <!-- 边框 -->
<a href="#">我的订单</a>
</li>
<li class="vip">
<b></b> <!-- 边框 -->
<a href="#">会员俱乐部</a>
</li>
<li class="dakehu">
<b></b> <!-- 边框 -->
<a href="#">企业频道</a>
</li>
<li class="app_jd">
<b></b> <!-- 边框 -->
<a href="#">手机京东</a>
</li>
<li class="service">
<b></b> <!-- 边框 -->
<a href="#">客户服务</a>
<!-- 弹出菜单 -->
<ul id="service_items">
<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>
</li>
<li>
<b></b> <!-- 边框 -->
<a href="#">网站导航</a>
</li>
</ul>
</header>
<!-- 2、LOGO 和 搜索框 -->
<div id="top_main">
<!-- 1、LOGO -->
<a href="#" class="lf">
<img src="Images/logo-201305.png">
</a>
<!-- 2、搜索框和搜索按钮 -->
<div id="search_box">
<!-- 1、搜索框和按钮 -->
<div class="search">
<input class="txtSearch">
<button>搜索</button>
</div>
<!-- 2、热门搜索 -->
<div class="hot_words">
<span>热门搜索：</span>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
<a href="#">家纺11月大促</a>
<a href="#">彩虹电热毯</a>
<a href="#">博洋家纺</a>
<a href="#">霞珍</a>
</div>
</div>
<!-- 3、我的京东 -->
<div id="my_jd">
我的京东
<b></b><!-- 向下箭头 -->
</div>
<!-- 4、去购物车结算 -->
<!-- 5、追加空子元素，撑起top_main -->
<div class="clear"></div>
</div>
<!-- 3、主导航-->
<nav id="nav">
<p>
<a href="#">全部商品分类</a>
</p>
<ul class="lf">
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">服装城</a>
</li>
<li>
<a href="#">夺宝岛</a>
</li>
<li>
<a href="#">团购</a>
</li>
</ul>
</nav>
<!-- 4、banner广告部分-->
<div id="banner">
<!-- 1、主分类 -->
<ul id="cate_box">
<li>
<a href="#">图书、音像、数字商品</a>
<!-- 弹出菜单 -->
<div id="sub_cate_box">
<!-- 关闭 -->
<div class="close">×</div>
<!-- 1、子分类内容(左) -->
<div id="sub_cate_items">
<ul>
<li class="title">
<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>
<ul>
<li class="title">
<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>
<ul>
<li class="title">
<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>
<ul>
<li class="title">
<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>
<!-- 2、子分类banner(右)-->
<div id="sub_cate_banner">
<p>
<img src="Images/cate_banner_01.jpg">
</p>
<p>
<img src="Images/cate_banner_02.jpg">
</p>
<h4>推荐品牌出版商/书店</h4>
<ul>
<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>
</li>
<li>
<a href="#">家用电器</a>
</li>
</ul>
<!-- 2、banner-->
<div id="slider_box">
<!-- 1、滑动广告 -->
<div id="slider">
<!-- 图片 -->
<img src="Images/index/banner_02.jpg">
<!-- 列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<!-- 2、三幅小广告-->
<div id="ad">
<a href="#" class="previous"></a>
<a href="#" class="next"></a>
<ul class="lf">
<li>
<img src="Images/index/ad_01.jpg">
</li>
<li class="mid">
<img src="Images/index/ad_02.jpg">
</li>
<li>
<img src="Images/index/ad_03.jpg">
</li>
</ul>
</div>
</div>
<!-- 3、其他信息-->
<div id="extra_focus">
<!-- 1、大放价 -->
<p>
<img src="Images/index/ad_focus.jpg">
</p>
<!-- 2、京东快报-->
<div id="news">
<!-- 标题 -->
<p>
<a href="#">更多快报>></a>
<b>京东快报</b>
</p>
<!-- 内容 -->
<div>
<ul class="lf">
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
</ul>
<ul class="rt">
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
<li>
<a href="#">松鼠好年货2折开枪</a>
</li>
</ul>
</div>
</div>
<!-- 3、虚拟部分-->
<ul id="virtuals">
<li class="huafei">
<a href="#">
<b></b><!-- 42 * 35 -->
话费
<i></i>
</a>
</li>
<li class="jipiao">
<a href="#">
<b></b>
话费
<i></i>
</a>
</li>
<li>
<a href="#">
<b></b>
话费
<i></i>
</a>
</li>
<li>
<a href="#">
<b></b>
话费
<i></i>
</a>
</li>
<li>
<a href="#">
<b></b>
话费
</a>
</li>
<li>
<a href="#">
<b></b>
话费
</a>
</li>
<li>
<a href="#">
<b></b>
话费
</a>
</li>
<li>
<a href="#">
<b></b>
话费
</a>
</li>
</ul>
</div>
<!-- 4、空子元素 -->
<div class="clear"></div>
</div>
<!-- 5、页面主体-->
<section id="main">
<!-- 1、生活的橱窗 -->
<div id="show_box">
<!-- 1、文本 -->
<p>
生活的橱窗
<i>每一天展示精彩</i>
</p>
<!-- 2、显示列表(8个) -->
<ul id="show_list">
<li class="pinpaijie">
<b></b>
<!-- 文本 : 绝对定位 -->
<div>
<h2>品牌街</h2>
<h3>三星note</h3>
<h4>赠500京东E卡</h4>
<ul>
<li><i></i>更多品牌</li>
<li><i></i>进入品牌街</li>
</ul>
</div>
</li>
<li class="pinpaijie">
<b></b>
<!-- 文本 -->
<div>
<h2>天天低价</h2>
<h3>坚果礼盒</h3>
<span>95.8元秒杀</span>
</div>
</li>
<li class="pinpaijie">
<b></b>
</li>
<li class="pinpaijie no-margin">
<b></b>
<div>
<h2>今日团购</h2>
<h3>100元代金券</h3>
<div>
<i>团购价</i>
<b>￥89</b>
<p>
<img src="Images/index/cantuan.png">
</p>
</div>
</div>
</li>
<li class="pinpaijie">
<b></b>
</li>
<li class="pinpaijie">
<b></b>
</li>
<li class="pinpaijie">
<b></b>
</li>
<li class="pinpaijie no-margin">
<b></b>
</li>
</ul>
<!-- 3、图片列表(3幅)-->
</div>
<!-- 2、1F,2F,3F -->
<div class="floor">
<!-- 顶 -->
<header>
<span>1F</span>
<p>家电通讯</p>
<ul class="tab lf">
<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>
<ul class="links lf">
<li>
<a href="#">合约计划说明</a>
</li>
<li>
<a href="#">大家电配送</a>
</li>
</ul>
</header>
<!-- 底 -->
<!-- 左 -->
<aside class="lf_list">
<ul>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
</ul>
<p>
<img src="Images/index/fl_01.jpg">
</p>
</aside>
<!-- 中 -->
<div class="content">
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<div>
<img src="Images/index/fl_ad_01.jpg">
</div>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
</div>
<!-- 右 -->
<aside class="rt_list">
<ul>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
</ul>
<p>
<img src="Images/index/fl_ad_02.jpg">
</p>
</aside>
<!-- 追加空子元素 -->
<div class="clear"></div>
</div>
<div class="floor">
<!-- 顶 -->
<header>
<span>1F</span>
<p>家电通讯</p>
<ul class="tab lf">
<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>
<ul class="links lf">
<li>
<a href="#">合约计划说明</a>
</li>
<li>
<a href="#">大家电配送</a>
</li>
</ul>
</header>
<!-- 底 -->
<!-- 左 -->
<aside class="lf_list">
<ul>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
</ul>
<p>
<img src="Images/index/fl_01.jpg">
</p>
</aside>
<!-- 中 -->
<div class="content">
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<div>
<img src="Images/index/fl_ad_01.jpg">
</div>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
</div>
<!-- 右 -->
<aside class="rt_list">
<ul>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
</ul>
<p>
<img src="Images/index/fl_ad_02.jpg">
</p>
</aside>
<!-- 追加空子元素 -->
<div class="clear"></div>
</div>
<div class="floor">
<!-- 顶 -->
<header>
<span>1F</span>
<p>家电通讯</p>
<ul class="tab lf">
<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>
<ul class="links lf">
<li>
<a href="#">合约计划说明</a>
</li>
<li>
<a href="#">大家电配送</a>
</li>
</ul>
</header>
<!-- 底 -->
<!-- 左 -->
<aside class="lf_list">
<ul>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
<li>
手机
</li>
</ul>
<p>
<img src="Images/index/fl_01.jpg">
</p>
</aside>
<!-- 中 -->
<div class="content">
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<div>
<img src="Images/index/fl_ad_01.jpg">
</div>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
<dl>
<dt>
<img src="Images/index/fl_dl_01.jpg">
</dt>
<dd>
<a href="#">48英寸智能电视2499,55英寸智能电视3499</a>
</dd>
<dd class="text">送澳门风云2电影票</dd>
</dl>
</div>
<!-- 右 -->
<aside class="rt_list">
<ul>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
<li>
<img src="Images/index/54caf3a2N56357d7c.jpg">
</li>
</ul>
<p>
<img src="Images/index/fl_ad_02.jpg">
</p>
</aside>
<!-- 追加空子元素 -->
<div class="clear"></div>
</div>
<!-- 3、热门晒单 -->
<div id="others">
<!-- 1、热门晒单1 w:445 -->
<div class="share">
<p>热门晒单</p>
<ul>
<li>
<!-- 左：图像 -->
<p>
<img src="Images/index/share_01.jpg">
<i class="shai"></i>
</p>
<!-- 右：链接文本 -->
<div class="lf">
<h3>
<a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a>
</h3>
<h4>
<a href="#">音质还可以，不错的，很小，很大声，很好看。</a>
</h4>
</div>
</li>
<li>
<!-- 左：图像 -->
<p>
<img src="Images/index/share_01.jpg">
<i class="shai"></i>
</p>
<!-- 右：链接文本 -->
<div class="lf">
<h3>
<a href="#">[晒单帖]出乎意料的京东，神奇的泰福高焖烧壶</a>
</h3>
<h4>
<a href="#">昨天晚上在京东10点下单的，今天中午就送到了，京东的快递哥实在神速呀！而且态度非常好，还确认了。</a>
</h4>
</div>
</li>
</ul>
</div>
<!-- 2、热门晒单2 w:445 -->
<div class="share">
<p>热门晒单</p>
<ul>
<li>
<!-- 左：图像 -->
<p>
<img src="Images/index/share_01.jpg">
<i class="shai"></i>
</p>
<!-- 右：链接文本 -->
<div class="lf">
<h3>
<a href="#">咔哟YOYO4.0蓝牙音箱低音炮立体声音响</a>
</h3>
<h4>
<a href="#">音质还可以，不错的，很小，很大声，很好看。</a>
</h4>
</div>
</li>
<li>
<!-- 左：图像 -->
<p>
<img src="Images/index/share_01.jpg">
<i class="shai"></i>
</p>
<!-- 右：链接文本 -->
<div class="lf">
<h3>
<a href="#">[晒单帖]出乎意料的京东，神奇的泰福高焖烧壶</a>
</h3>
<h4>
<a href="#">昨天晚上在京东10点下单的，今天中午就送到了，京东的快递哥实在神速呀！而且态度非常好，还确认了。</a>
</h4>
</div>
</li>
</ul>
</div>
<!-- 3、在线读书等... w:311 h:210 -->
<div id="more">
<!-- 1、在线读书 -->
<div class="reading">
<p>
<a href="#" class="rt">更多在线读书</a>
<b>在线读书</b>
</p>
<div>
<p class="lf">
<img src="Images/index/reading.jpg">
</p>
<ul>
<li>
<i></i>
<a href="#">
《来到地球第一天》新书特惠
</a>
</li>
<li>
<i></i>
<a href="#">
《来到地球第一天》新书特惠
</a>
</li>
<li>
<i></i>
<a href="#">
《来到地球第一天》新书特惠
</a>
</li>
<li>
<i></i>
<a href="#">
《来到地球第一天》新书特惠
</a>
</li>
</ul>
<!-- 空子元素 -->
<div class="clear"></div>
</div>
</div>
<!-- 2、在线订单 -->
<div class="order">
<p>订阅促销信息</p>
<input placeholder="请输入Email地址">
<button>订阅</button>
</div>
</div>
</div>
</section>
<!-- 6、页面底部-配送方式 -->
<footer id="foot_box">
<!-- 购物指南 -->
<p class="shopping_guide"></p>
<ul>
<li>
<b>购物指南</b>
</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>
<li>
<a href="#">购物流程</a>
</li>
<li>
<a href="#">购物流程</a>
</li>
</ul>
<!-- 配送方式 -->
<p class="send_type"></p>
<ul>
<li>
<b>购物指南</b>
</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>
<li>
<a href="#">购物流程</a>
</li>
<li>
<a href="#">购物流程</a>
</li>
</ul>
<p></p>
<ul>
<li>
<b>购物指南</b>
</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>
<li>
<a href="#">购物流程</a>
</li>
<li>
<a href="#">购物流程</a>
</li>
</ul>
<p></p>
<ul>
<li>
<b>购物指南</b>
</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>
<li>
<a href="#">购物流程</a>
</li>
<li>
<a href="#">购物流程</a>
</li>
</ul>
<p></p>
<ul>
<li>
<b>购物指南</b>
</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>
<li>
<a href="#">购物流程</a>
</li>
<li>
<a href="#">购物流程</a>
</li>
</ul>
</footer>
<!-- 7、页面底部-备案号 -->
<footer id="footer">
<!-- 1、链接部分 -->
<div class="links">
<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>
</div>
<!-- 2、文本部分 -->
<div class="text">
<p>北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-非经营性-2011-0034</p>
<p>音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号</p>
<p>网络文化经营许可证京网文[2011]0168-061号 Copyright © 2004-2014 京东JD.com 版权所有 </p>
<p>京东旗下网站： English Site 拍拍网 网银在线</p>
</div>
<!-- 3、图片部分 -->
<div class="imgs">
<img src="Images/cx.jpg">
<img src="Images/cy.jpg">
<img src="Images/kx.jpg">
<img src="Images/jy.jpg">
</div>
</footer>
</body>
</html>jd_index.css
/*通用*/
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#666;
margin:0;
}
ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
img{vertical-align:bottom;}
a{
color:#666;
text-decoration:none;
}
a:hover{
color:#FF0700;
text-decoration:underline;
}
.lf{float:left;}
.rt{float:right;}
.clear{clear:both;}
/**布局元素样式**/
#top,#top_main,#nav,#banner,#main,#foot_box,#footer{
width:1211px;
margin:0 auto;
}
/*******1、页面顶部**********/
#top{
/*高度，行高，背景颜色，下边框*/
height:30px;
line-height:30px;
background-color:#f7f7f7;
border-bottom:1px solid #eee;
}
#top>img{
margin-top:10px;
margin-right:5px;
}
/*文字列表*/
#top>ul>li{
float:left;
margin-right:10px;
}
#top>ul b{
border-left:1px solid #ddd;
margin-right:10px;
}
/*会员俱乐部*/
li.vip a{
padding-left:34px;
background:url(Images/vip.jpg) no-repeat left center;
}
/*大客户*/
li.dakehu a{
padding-left:31px;
background:url(Images/dakehu.jpg) no-repeat left center;
}
/*手机京东*/
li.app_jd a{
/*左内边距，行内块，高度，行高，背景*/
padding-left:23px;
display:inline-block;
height:22px;
line-height:22px;
background:url(Images/iconlist_2.png) no-repeat -128px -360px;
}
li.app_jd a:hover{
background-position:-128px -399px;
}
/*客户服务*/
li.service>a{
/*左右内边距模拟宽度*/
padding:0 15px;
/*高度，行高*/
display:inline-block;
height:26px;
line-height:26px;
/*背景图像：水平偏右，垂直居中*/
background:url(Images/jt_down.jpg) no-repeat 95% center;
/*左右上边框：透明*/
border:1px solid transparent;
border-bottom:none;
}
/*客户服务-弹出菜单*/
li.service{
/*相对定位：配合#service_items 做绝对定位*/
position:relative;
}
#service_items{
/*宽度，边框，背景颜色，文本水平居中，定位*/
box-sizing:border-box;
width:80px;
border:1px solid #ddd;
border-top:none;
background-color:#fff;
text-align:center;
/*绝对定位*/
position:absolute;
top:28px;
left:11px;
/*默认隐藏*/
display:none;
}
/*当鼠标移入到li.service上时，找到其子级#service_items ,并且显示*/
li.service:hover #service_items{
display:block;
}
/*当鼠标移入到li.service上时，找到其直接子级a标记，设置样式*/
li.service:hover>a{
border-color:#ddd;
background-color:#fff;
background-image:url(Images/jt_up.jpg);
}
/**********2、LOGO 和 搜索框************/
#top_main{
padding:10px 0;
}
/*搜索框和搜索按钮和热门搜索*/
#search_box{
/*左浮动，宽度，左右外边距，min-height*/
float:left;
width:500px;
margin:0 80px 0 40px;
min-height:30px;
}
#search_box div.search{
/*高度，背景颜色*/
height:30px;
background-color:#e4393c;
/*边框*/
padding:3px;
}
#search_box input{
/*宽度，高度，取消边框*/
width:410px;
height:30px;
border:none;
box-sizing:border-box;
padding-left:10px;
}
#search_box button{
/*宽度，高度，取消边框，背景颜色*/
width:80px;
height:28px;
border:none;
background-color:#E4393C;
/*文字：大小，颜色，加粗*/
font-size:14px;
color:#fff;
font-weight:bold;
}
/*热门搜索*/
#search_box div.hot_words{
/*上外边距*/
margin-top:5px;
/*宽度，高度，溢出隐藏*/
width:500px;
height:16px;
overflow:hidden;
}
#search_box div.hot_words span{
color:#999;
}
#search_box div.hot_words a{
color:#999;
}
/*我的京东*/
#my_jd{
/*左浮动，边框，背景*/
float:left;
border:1px solid #EFEFEF;
background-color:#f7f7f7;
/*高度，左内边距，背景图像*/ /*20*17*/
padding-left:30px;
height:27px;
line-height:27px;
background-image:url(Images/iconlist_2.png);
background-repeat:no-repeat;
background-position:-116px -25px;
padding-right:5px;
}
#my_jd:hover{
background-color:#fff;
background-position:-116px -55px;
}
#my_jd b{
/*行内块，宽度，高度，边框 */
display:inline-block;
width:0px;
height:0px;
border:5px solid transparent;
border-top-color:#ccc;
/*相对定位：实现该元素的位置微调*/
position:relative;
top:3px;
}
/*************7、页面底部-备案号**************/
#footer{
/*上边框，上内边距，上外边距*/
border-top:1px solid #F1F1F1;
padding-top:15px;
margin-top:15px;
/*文本水平居中对齐*/
text-align:center;
}
#footer div.links span{
margin:0 10px;
}
#footer div.text{
margin-top:15px;
line-height:22px;
margin-bottom:15px;
}
#footer div.imgs img{
margin:0 15px;
}
/************3、主导航*****************/
#nav{
height:40px;
line-height:40px;
background-color:#E64346;
}
/*全部商品分类*/
#nav>p{
/*宽度，高度，左浮动，背景颜色*/
width:210px;
height:40px;
float:left;
background-color:#CD2A2C;
}
#nav>p a{
/*左内边距，文字大小，颜色，加粗，取消下划线*/
padding-left:15px;
font-size:14px;
color:#fff;
font-weight:bold;
text-decoration:none;
}
/*导航*/
#nav li{
float:left;
}
#nav li a{
/*宽度，高度，文字：水平居中，颜色，加粗，取消下划线*/
display:block;
width:100px;
height:40px;
text-align:center;
color:#fff;
font-weight:bold;
text-decoration:none;
font-size:14px;
}
#nav li a:hover{
background-color:#BD2A2C;
}
/**********4、banner部分**************/
#cate_box{
/*左浮动，宽度，高度，边框，背景色，box-sizing*/
float:left;
width:210px;
height:410px;
border:2px solid #CD2A2C;
border-top:none;
background-color:#fafafa;
box-sizing:border-box;
padding-top:5px;
/*相对定位：配合#sub_cate_box 做绝对定位*/
position:relative;
}
#cate_box>li>a{
/*显示方式,宽度，上下内边距，左内边距，文字大小，取消下划线，颜色，上边框透明，下边框白色*/
display:block;
width:196px;
box-sizing:border-box;
padding:5px 0 5px 10px;
font-size:14px;
text-decoration:none;
color:#333;
border-top:1px solid transparent;
border-bottom:1px solid #fff;
}
#cate_box>li>a:hover{
/*边框颜色，背景颜色*/
border-color:#ddd;
background-color:#fff;
/*调整z-index*/
position:relative;
z-index:30;
}
/* 弹出菜单 */
#sub_cate_box{
/*宽度，高度，边框，背景，内边距，绝对定位*/
width:710px;
border:1px solid #ddd;
background-color:#fff;
padding:10px;
position:absolute;
top:0px;
left:195px;
z-index:10;
/*隐藏*/
display:none;
}
/*关闭按钮*/
#sub_cate_box div.close{
/*宽度，高度，背景颜色，边框倒角，水平居中对齐，行高，文本：加粗，颜色，大小,光标*/
width:20px;
height:20px;
background-color:#555;
border-radius:50%;
text-align:center;
line-height:20px;
font-weight:bold;
color:#fff;
font-size:14px;
cursor:pointer;
/*绝对定位*/
position:absolute;
right:-10px;
top:-10px;
}
/*子分类内容*/
#sub_cate_items{
width:500px;
float:left;
}
#sub_cate_items li{
float:left;
border-left:1px solid #ddd;
padding:5px;
}
#sub_cate_items ul{
overflow:hidden;
border-top:1px solid #ddd;
padding:5px 0;
}
#sub_cate_box li.title{
/*宽度，取消边框，文本右对齐*/
width:60px;
border:none;
text-align:right;
}
#sub_cate_box li.title a{
font-weight:bold;
color:#e4393c;
text-decoration:underline;
}
/*子分类banner*/
#sub_cate_banner{
width:194px;
float:right;
}
#sub_cate_banner p{
margin-top:15px;
}
#sub_cate_banner h4{
color:#E4393C;
margin:10px 0;
}
#sub_cate_banner li a{
line-height:22px;
color:#666;
}
/*banner 中间 滑动广告*/
#slider_box{
/*宽度，高度，左浮动，上外边距，左外边距*/
width:670px;
height:400px;
float:left;
margin:10px 0 0 10px;
}
#slider li{
/*左浮动，宽度，高度，倒角，背景颜色，行高，文本：水平居中，大小，加粗，颜色，左/右外边距*/
float:left;
width:20px;
height:20px;
border-radius:50%;
background-color:#3e3e3e;
line-height:20px;
text-align:center;
font-size:14px;
color:#fff;
margin-left:10px;
}
#slider li:hover{
background-color:#E4393C;
cursor:pointer;
}
#slider{
position:relative;
}
#slider ul{
position:absolute;
right:40px;
bottom:20px;
}
/*三幅小广告*/
#ad{
/*宽度，高度，左右下边框，box-sizing*/
width:670px;
height:160px;
border:1px solid #ddd;
border-top:none;
box-sizing:border-box;
}
#ad>a{
/*浮动，宽度，高度，背景属性，上外边距*/
float:left;
width:25px;
height:35px;
background:url(Images/index/ad-arraw.png);
margin-top:62px;
}
#ad>a:hover{
background-image:url(Images/index/ad-arraw-hover.png);
}
#ad>a.next{
float:right;
background-position:0 -35px;
}
#ad li{
/*左浮动，宽度，上下内边距，内容水平居中对齐*/
float:left;
width:205px;
padding:10px 0;
text-align:center;
}
#ad li.mid{
width:206px;
border-left:1px solid #ddd;
border-right:1px solid #ddd;
}
/*其他信息*/
#extra_focus{
/*宽度，高度，右浮动，上外边距*/
width:310px;
height:400px;
float:right;
margin-top:10px;
}
/*更多快报 文本*/
#news>p a{
color:#005aa0;
float:right;
}
#news>p{
padding-top:10px;
padding-bottom:5px;
}
#news>div{
/*边框，min-height*/
border:1px solid #ddd;
border-top:2px solid #aaa;
overflow:hidden;
padding:4px 0;
}
#news>div ul{
padding:0 10px;
line-height:25px;
width:134px;
}
#news>div ul.rt{
border-left:1px solid #ddd;
width:133px;
}
/*虚拟相关*/
#virtuals{
/*宽度，高度，左上边框，上外边距*/
width:310px;
height:177px;
box-sizing:border-box;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
margin-top:11px;
}
#virtuals li{
/*宽度，高度，浮动，右下边框*/
width:76.25px;
height:87px;
float:left;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
#virtuals li a{
display:block;
text-align:center;
}
#virtuals li b{
/*宽度，高度，背景，上下外边距*/
display:block;
width:42px;
height:35px;
background:url(Images/index/virtuals-20140606.png) no-repeat;
margin:9px auto 3px;
}
#virtuals li.jipiao b{
background-position:0 -50px;
}
#virtuals li i{
display:block;
width:0px;
height:0px;
border:5px solid transparent;
border-top-color:#ddd;
margin:3px auto;
}
/*************6、购物指南******************/
#foot_box{
border-top:1px solid #ddd;
margin-top:10px;
padding-top:10px;
overflow:hidden;
}
#foot_box p{
/*左浮动，宽度，高度*/
float:left;
width:40px;
height:40px;
/*左右外边距*/
margin:0 10px 0 50px;
/*背景*/
background-image:url(Images/iconlist_2.png);
}
p.shopping_guide{
background-position:0px -56px;
}
p.send_type{
background-position:-50px -56px;
}
#foot_box ul{
float:left;
width:142px;
line-height:22px;
}
#foot_box ul b{
line-height:28px;
}
/************5、页面主体****************/
#main{
margin-top:10px;
}
/*生活的橱窗*/
#show_box>p{
font-size:24px;
font-weight:bold;
margin-bottom:10px;
}
#show_box>p i{
font-size:16px;
font-weight:normal;
color:#999;
}
/*8个li*/
#show_list>li{
/*宽度，高度，左浮动，右外边距，下外边距*/
width:295px;
height:190px;
float:left;
margin-right:10px;
margin-bottom:10px;
/*过渡效果*/
transition:background 0.3s linear;
}
#show_list>li.no-margin{
margin-right:0;
}
#show_list>li:hover{
background-position:-10px 0;
}
li.pinpaijie{
background-image:url(Images/index/show_01.jpg);
}
/*遮罩层*/
#show_list>li>b{
/*块级，宽度，高度，背景颜色，透明度*/
display:block;
width:45%;
height:100%;
background-color:#fff;
opacity:0.7;
}
#show_list>li{
position:relative;
}
#show_list>li>div{
position:absolute;
top:20px;
left:20px;
}
#show_list>li h3{
font-weight:normal;
margin:3px 0;
}
#show_list>li h4{
font-weight:normal;
color:#E4393C;
}
#show_list>li ul{
margin-top:20px;
}
#show_list>li ul i{
display:inline-block;
width:2px;
height:2px;
background-color:#666;
position:relative;
right:3px;
bottom:3px;
}
#show_list>li span{
padding:1px 3px;
background-color:#e4393c;
color:#fff;
}
#show_list>li>div>div{
margin-top:20px;
}
#show_list>li>div i{
font-style:normal;
}
#show_list>li>div>div b{
font-size:24px;
color:#E4393C;
font-weight:normal;
}
#show_list{
overflow:hidden;
}
/**Floor**/
div.floor{
margin:10px 0;
}
div.floor>header{
height:40px;
}
div.floor>header span{
/*左浮动，宽度，高度，下边框，背景，上下内边距*/
float:left;
width:26px;
height:33px;
border-bottom:2px solid #aaa;
background:url(Images/index/index_iconlist_01.png) no-repeat ;
/*文本属性*/
text-align:center;
font-weight:bold;
color:#fff;
font-size:18px;
padding:3px 0 2px 0;
cursor:pointer;
}
div.floor>header span:hover{
background-position:-40px 0;
}
/*家电通讯*/
div.floor>header p{
/*左浮动，宽度，下边框，文字：大小，加粗，水平居中*/
float:left;
width:185px;
border-bottom:2px solid #aaa;
font-size:20px;
font-weight:bold;
text-align:center;
padding:6px 0;
}
/*特价商品等...*/
div.floor>header ul.tab li{
float:left;
}
div.floor>header ul.tab a{
/*块级，宽度，文字：大小，加粗，取消下划线，下边框，上下内边距*/
display:block;
width:158px;
font-size:14px;
font-weight:bold;
text-decoration:none;
text-align:center;
border-bottom:2px solid #aaa;
padding:13px 0 6px 0;
}
div.floor>header ul.tab a:hover{
border-color:#E4393C;
background:url(Images/index/tab_arraw.png) no-repeat center bottom;
}
/*合约计划说明*/
div.floor>header ul.links li{
/*左浮动，宽度，下边框，上下内边距，文字水平居中*/
float:left;
width:105px;
border-bottom:2px solid #aaa;
text-align:center;
padding:16px 0 6px 0;
}
/*左侧列表*/
div.floor aside.lf_list{
/*宽度，高度，边框，box-sizing*/
width:211px;
height:362px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
box-sizing:border-box;
float:left;
}
div.floor aside.lf_list ul{
padding:0 5px;
overflow:hidden;
}
div.floor aside.lf_list li{
/*左浮动，宽度，行高*/
float:left;
width:50%;
line-height:25px;
}
/*中*/
div.floor div.content{
float:left;
width:790px;
height:362px;
}
div.floor dl{
/*宽度，高度，边框，浮动*/
width:158px;
height:181px;
box-sizing:border-box;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
float:left;
}
div.floor div.content>div{
float:left;
width:473px;
height:180px;
border-right:1px solid #ddd;
border-bottom:1px solid #ddd;
}
div.floor dt{
text-align:center;
}
div.floor dd{
padding:0 10px;
line-height:22px;
}
div.floor dd.text{
text-align:center;
color:#e4393c;
}
/*右*/
div.floor aside.rt_list{
float:left;
width:210px;
height:362px;
}
div.floor aside.rt_list ul{
height:180px;
border-bottom:1px solid #ddd;
}
div.floor aside.rt_list li{
/*左浮动，宽度，水平居中对齐，上边框*/
float:left;
width:50%;
text-align:center;
border-top:1px dashed #ddd;
}
/*热门晒单*/
#others{
margin:10px 0;
overflow:hidden;
}
#others div.share{
/*左浮动，宽度，min-height，内边距，边框，box-sizing*/
float:left;
width:445px;
height:210px;
min-height:100px;
padding:0 8px;
border:1px solid #ddd;
border-top:2px solid #ccc;
box-sizing:border-box;
}
div.share>p{
font-size:14px;
font-weight:bold;
padding:5px 0;
}
div.share li{
/*下边框，内边距，min-height，overflow*/
border-bottom:1px dotted #ddd;
padding:8px;
min-height:30px;
overflow:hidden;
}
div.share li img{
width:50px;
}
div.share li p{
float:left;
/*相对定位：配合 i.shai 做绝对定位*/
position:relative;
margin-right:15px;
}
div.share li i.shai{
width:17px;
height:19px;
/*绝对定位*/
position:absolute;
background:url(Images/iconlist_3.png) no-repeat -200px -50px;
right:-6px;
top:-8px;
}
div.share li h3{
/*取消加粗，宽度*/
font-weight:normal;
width:270px;
/*下外边距*/
margin-bottom:5px;
line-height:22px;
max-height:44px;
overflow:hidden;
}
div.share li h3 a{
color:#005aa0;
}
div.share li h4{
font-weight:normal;
width:270px;
line-height:20px;
max-height:40px;
margin-bottom:5px;
/*右内边距，背景*/
padding-right:64px;
background:url(Images/iconlist_3.png) no-repeat 300px -80px;
overflow:hidden;
}
/*在线读书模块*/
#more{
/**/
width:311px;
height:210px;
float:right;
}
div.reading{
/*边框，min-height，内边距*/
border:1px solid #ddd;
border-top:2px solid #ccc;
min-height:50px;
padding:0 10px 10px 10px;
}
div.reading>p{
padding:10px 0;
}
div.reading ul{
float:left;
line-height:25px;
}
div.reading ul i{
display:inline-block;
width:2px;
height:2px;
background-color:#005aa0;
position:relative;
bottom:3px;
left:5px;
}
div.reading ul a{
color:#005aa0;
}
/*订单*/
div.order p{
font-size:14px;
font-weight:bold;
margin:10px 0 5px 0;
}
div.order input{
/*宽度，高度，边框，背景，box-sizing*/
width:240px;
height:27px;
box-sizing:border-box;
border:1px solid #676767;
border-bottom-color:#eaeaea;
border-right-color:#eaeaea;
/*左内边距*/
padding-left:28px;
background:url(Images/iconlist_3.png) no-repeat -250px -45px;
}
div.order button{
/*宽度，高度，背景，倒角*/
width:65px;
height:27px;
background-color:#E4393C;
border-radius:5px;
border:none;
/*加粗，颜色*/
font-weight:bold;
color:#fff;
}
扫一扫
1480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
