运用到的知识点儿：css sprites，css reset，定位，margin负值的妙用，tab选项卡，轮播图，jquery插件开发...
css sprites
:![]()
css reset:
统一每个浏览器默认的样式
定位：购物车上的小红图标，以及直降图标
![]()
![]()
margin负值的妙用：
溢出隐藏，边框隐藏，左右结构
![]()
左右结构都有左边框，但是因为超出夫容器，设置溢出隐藏，使得左边边框被隐藏
tab选项卡：
![]()
特价商品
轮播图：
![]()
<!--index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东商城</title>
<link rel="stylesheet" href="./public/css/base.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="public-top">
<div id="shortcut">
<div id="shortcut-left" class="fn-left">
<ul>
<li class="icon-li"><a href=""><i class="icon-fav"></i>收藏京东商城</a></li>
<li><a href="">360TOP奢侈品</a></li>
<li><a href="">迷你挑</a></li>
<li class="no-bd"><a href="">京东好药师</a></li>
</ul>
</div>
<div id="shortcut-right" class="fn-right">
<ul>
<li>您好，欢迎来到京东商城！<a href="">[登录]</a></li>
<li><a href="">[免费注册]</a></li>
<li><a href="">我的订单</a></li>
<!-- li-activate 鼠标放上去加上此class -->
<li class="icon-li li-dropdown">
<dl>
<dt><i class="icon-dropdown"></i><a href="">特色栏目</a></dt>
<dd class="fn-hide">
<p><a href="###">为我推荐</a></p>
<p><a href="###">视频购物</a></p>
<p><a href="###">京东社区</a></p>
<p><a href="###">校园频道</a></p>
<p><a href="###">在线读书</a></p>
<p><a href="###">装机大师</a></p>
<p><a href="###">礼品卡</a></p>
</dd>
</dl>
</li>
<li><a href="">手机京东</a></li>
<li class="icon-li li-dropdown">
<dl>
<dt><i class="icon-dropdown"></i><a href="">企业服务</a></dt>
<dd class="fn-hide">
<p><a href="###">为我推荐</a></p>
<p><a href="###">视频购物</a></p>
<p><a href="###">京东社区</a></p>
<p><a href="###">校园频道</a></p>
<p><a href="###">在线读书</a></p>
<p><a href="###">装机大师</a></p>
<p><a href="###">礼品卡</a></p>
</dd>
</dl>
</li>
<li class="no-bd"><a href="">客户服务</a></li>
</ul>
</div>
</div>
</div>
<div class="hd-w">
<!-- header -->
<div id="header"><!--头部区-->
<div id="logo">
<a href="">
<img src="./images/logo.png" alt=""><!--log图片-->
</a>
<div class="logo-ads">
<a href="">
<img src="./images/logo_ads.png" alt=""><!--log广告图片-->
</a>
</div>
</div>
<div id="search"><!--索引项-->
<form action="" method="post">
<div id="search-form">
<div class="search-form-left"></div>
<div class="search-form-center">
<input type="text" name="keyword" default="搜索符合的商品和用户" value="搜索符合的商品和用户" id="keyword">
</div>
<div class="search-form-right"></div>
<div class="search-button">
<input type="button" value="搜索">
</div>
</div>
</form>
<div id="hot-keyword"><!--热键-->
<span>热门搜索：</span>
<a href="###" class="hot-words">新一代APU</a>
<a href="###">跑步机</a>
<a href="###">老板烟机</a>
<a href="###">和田新枣</a>
<a href="###">华为Y210</a>
<a href="###">聚焦十八大</a>
<a href="###">诺基亚800</a>
</div>
</div>
<div id="header-cart"><!--购物车-->
<div id="personal-cart"><!--个人购物车-->
<!-- class="hover" -->
<dl class="">
<dt>
<i class="icon-account"></i>
<a href="">我的京东</a>
<i class="icon-dropdown"></i>
</dt>
<dd>
<div class="cart-bar">
<span class="fn-left">你好，请登录</span>
<a href="" class="fn-right btn">登录</a>
</div>
<div style="clear:both;"></div>
<div class="cart-info"><!--购物车信息-->
<ul>
<li><a href="">待处理订单</a></li>
<li><a href="">咨询回复</a></li>
<li><a href="">降价商品</a></li>
<li><a href="">优惠券</a></li>
</ul>
<ul class="cart-order"><!--购物车顺序-->
<li><a href="">待处理订单></a></li>
<li><a href="">咨询回复></a></li>
<li><a href="">降价商品></a></li>
<li><a href="">优惠券></a></li>
</ul>
</div>
</dd>
</dl>
</div>
<div id="shopping-cart"><!--购物车结算-->
<!-- class="hover" -->
<dl>
<dt>
<i class="icon-account">
<span>2</span>
</i>
<a href="">去购物车结算</a>
<i class="icon-dropdown"></i>
</dt>
<dd>
购物单结算清单
</dd>
</dl>
</div>
</div>
</div><!-- /header -->
<div id="nav"><!--导航区-->
<div id="nav-bg-left"></div>
<div id="cate">
<h2><a href="">全部商品分类</a> </h2>
</div>
<ul id="nav-list"><!--导航列表-->
<li class="nav-activate" activate="true"><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>
<div id="nav-bg-right"></div>
<div id="nav-ads"><a href=""><img src="./images/nav-ads.gif" alt=""></a></div>
<div id="cate-list"><!--商品分类列表-->
<ul id="cate-list-show">
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像1</a>
<i></i>
</span>
<div class="item-list">
<div class="item-list-l">
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
</div>
<div class="item-list-r">
<dl>
<dt><a href="">促销活动</a> </dt>
<dd>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
</dd>
</dl>
<dl>
<dt><a href="">推荐品牌</a> </dt>
<dd>
<ul>
<li><a href="###">飞利浦旗舰店</a></li>
<li><a href="###">TCL</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>
<li><a href="###">小熊旗舰店</a></li>
<li><a href="###">格力</a></li>
<li><a href="###">ACA旗舰店</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>
<li><a href="###">万家乐</a></li>
</ul>
</dd>
</dl>
</div>
<div class="item-list-close"></div>
</div>
</li>
<!-- item-hover -->
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像2</a>
<i></i>
</span>
<div class="item-list">
<div class="item-list-l">
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
</div>
<div class="item-list-r">
<dl>
<dt><a href="">促销活动</a> </dt>
<dd>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
</dd>
</dl>
<dl>
<dt><a href="">推荐品牌</a> </dt>
<dd>
<ul>
<li><a href="###">飞利浦旗舰店</a></li>
<li><a href="###">TCL</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>
<li><a href="###">小熊旗舰店</a></li>
<li><a href="###">格力</a></li>
<li><a href="###">ACA旗舰店</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>
<li><a href="###">万家乐</a></li>
</ul>
</dd>
</dl>
</div>
<div class="item-list-close"></div>
</div>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像3</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像4</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像5</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像6</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像7</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像8</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像9</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像10</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像11</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像12</a>
<i></i>
</span>
</li>
<li class="item">
<span class="item-nav">
<a href="###">图书</a>、<a href="###">电子书刊</a>、<a href="###">音像13</a>
<i></i>
</span>
<div class="item-list">
<div class="item-list-l">
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
<dl>
<dt><a href="">生活电器</a></dt>
<dd>
<a href="###">取暖电器</a>
<a href="###">净化器</a>
<a href="###">加湿器</a>
<a href="###">吸尘器</a>
<a href="###">净水设备</a>
<a href="###">饮水机挂</a>
<a href="###">烫机/熨斗</a>
<a href="###">电话机</a>
<a href="###">插座</a>
<a href="###">收录/音机</a>
<a href="###">除湿/干衣机</a>
<a href="###">清洁机</a>
</dd>
</dl>
</div>
<div class="item-list-r">
<dl>
<dt><a href="">促销活动</a> </dt>
<dd>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
<a href=""><img src="./images/cate-mg.jpg" alt=""></a>
</dd>
</dl>
<dl>
<dt><a href="">推荐品牌</a> </dt>
<dd>
<ul>
<li><a href="###">飞利浦旗舰店</a></li>
<li><a href="###">TCL</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>
<li><a href="###">小熊旗舰店</a></li>
</ul>
</dd>
</dl>
</div>
<div class="item-list-close"></div>
</div>
</li>
</ul>
<div class="cate-all-link">
<a href="">全部商品分类</a>
</div>
</div>
</div><!-- /nav-->
<div id="top">
<!--news-->
<div id="news">
<div id="news-pic">
<a href=""><img src="./images/new-pic.jpg" alt=""></a>
</div>
<div class="module" id="new-list">
<h2 class="md-title">
<span>后盾播报</span>
<a href="">查看更多></a>
</h2>
<div class="md-content">
<ul>
<li><a href="###">戴尔灵越一体机新品首发！</a></li>
<li><a href="###">电子版十八大出版物开售！</a></li>
<li><a href="###">九牧王全场五折再满减</a></li>
<li><a href="###">新疆因雨雪配送延迟公告</a></li>
<li><a href="###">杉杉满减后送ipad</a></li>
<li><a href="###">京东与魅族达成战略合作</a></li>
<li><a href="###">名社TOP图书年终大让利！</a></li>
<li><a href="###">重返大航海充值返京券啦</a></li>
</ul>
</div>
</div>
<div class="module module-tabs" id="ticket">
<ul class="md-tabs"><!--tab选项-->
<li class="hover"><a href="">充值</a></li>
<li><a href="">旅游</a></li>
<li><a href="">彩票</a></li>
<li><a href="">游戏</a></li>
</ul>
<div class="md-content">
<div id="ticket-cz" class="fn-hide">
<form action="" method="get">
<table>
<tr>
<th>手机号：</th>
<td>
<input type="text" name="mobile" value="请输入手机号">
<p>支持移动、联通</p>
</td>
</tr>
<tr>
<th>面值：</th>
<td>
<select name="m" id="ticket-cz-select">
<option value="10">10元</option>
<option value="20">20元</option>
<option value="30">30元</option>
<option value="50">50元</option>
<option value="100">100元</option>
</select>
<span>109-232</span>
</td>
</tr>
<tr>
<th></th>
<td>
<button type="submit" class="btn">点击充值</button>
<a href="">香港旅游，返50%积分！ </a>
</td>
</tr>
</table>
</form><!--tab选项下的内容-->
</div>
<div id="ticket-tr" class="mt_s_2">
<div class="module module-tabs">
<ul class="md-tabs">
<li class="hover"><a href="">机票</a></li>
<li><a href="">酒店</a></li>
<li><a href="">旅游</a></li>
<li><a href="">租车</a></li>
</ul>
<div class="md-content">
<div class="">
<div class="tr-city">
<dl>
<dt>出发城市：</dt>
<dd>
<select name="" id="">
<option value="">B-北京</option>
<option value="">B-北京</option>
<option value="">B-北京</option>
<option value="">B-北京</option>
</select>
</dd>
</dl>
<dl>
<dt>到达城市：</dt>
<dd>
<select name="" id="">
<option value="">B-北京</option>
<option value="">B-北京</option>
<option value="">B-北京</option>
<option value="">B-北京</option>
</select>
</dd>
</dl>
</div>
<div class="tr-date">
<label for="">出发日期：</label>
<select name="" class="tr-date-y">
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<span>年</span>
<select name="" class="tr-date-m">
</select>
<span>月</span>
<select name="" class="tr-date-d">
</select>
<span>日</span>
</div>
<div class="tr-query">
<button class="btn">机票查询</button>
<a href="">购机票砸蛋中大奖！</a>
</div>
</div>
<!-- div2 -->
<div class="fn-hide">
<table>
<tr>
<th>入住城市：</th>
<td>
<select name="" id="">
<option value="">B-北京</option>
<option value="">S-上海</option>
</select>
</td>
</tr>
<tr>
<th>入住日期：</th>
<td>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>年</span>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>月</span>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>日</span>
</td>
</tr>
<tr>
<th>离店日期：</th>
<td>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>年</span>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>月</span>
<select name="" id="">
<option value="">2012</option>
<option value="">2013</option>
</select>
<span>日</span>
</td>
</tr>
<tr>
<th>
</th>
<td>
<button class="btn">酒店查询</button>
<a href="">抢购超值酒店！</a>
</td>
</tr>
</table>
</div>
<!-- /div2 -->
<!-- div3 -->
<div class="fn-hide">
<table>
<tr>
<td>
<a href=""><img src="./images/ky1.jpg" alt=""></a>
</td>
<td><a href=""><img src="./images/ky2.jpg" alt=""></a></td>
</tr>
<tr>
<td>
<button class="btn">度假查询</button>
</td>
<td>
<button class="btn">景区查询</button>
</td>
</tr>
</table>
</div>
<!-- /div3 -->
<!-- div4 -->
<div class="fn-hide">
<table>
<tr>
<th>
<a href=""><img src="./images/zc1.jpg" alt=""></a>
</th>
<td>
<button class="btn">租车</button>
<p><a href="">首日0租金</a></p>
</td>
</tr>
</table>
</div>
<!-- /div4 -->
</div>
</div>
</div>
<div id="ticket-cp" class="fn-hide">
<div id="ticket-cp-img" class="img-ssq">
<em class="fn-hide">双色球</em>
</div>
<div class="ticket-cp-info">
<div class="good">
<strong>买注</strong>
<select name="" id="goodlucky-sel">
<option value="ssq">双色球</option>
<option value="dlt">大乐透</option>
<option value="3d">3D</option>
<option value="kingfoot">竞足</option>
</select>
<strong>试试手气吧！</strong>
</div>
<div class="cp-numbers" id="cp-numbers">
<span class="num red">13</span>
<span class="num red">15</span>
<span class="num red">17</span>
<span class="num red">23</span>
<span class="num red">26</span>
<span class="num blue">04</span>
<span class="num blue">11</span>
</div>
<div id="ticket-jz" class="fn-hide">
<div>
<p><img src="./images/jz1.jpg" alt=""></p>
<p>帕尔马</p>
</div>
<div class="vs">
VS
</div>
<div>
<p><img src="./images/jz2.jpg" alt=""></p>
<p>国米</p>
</div>
</div>
<div class="goodlucky" id="goodlucky">
<a href="" id="goodlucky_1">[机选1注]</a>
<a href="">[自助选号]</a>
</div>
<div class="cp-btn">
<button class="btn">提交数据</button>
<a href="">买套餐送积分 睡觉中千万</a>
</div>
</div>
</div>
<div id="ticket-ga" class="mt_s_2 fn-hide">
<div class="module module-tabs">
<ul class="md-tabs">
<li class="hover"><a href="">点卡</a></li>
<li><a href="">QQ</a></li>
</ul>
<div class="md-content">
<div>
<table>
<tr>
<th>游戏：</th>
<td>
<select name="" id="">
<option value="">1233</option>
<option value="">2334</option>
</select>
</td>
</tr>
<tr>
<th>面值：</th>
<td>
<select name="" id="">
<option value="">1233</option>
<option value="">2334</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn">查看价格</button>
<a href="">火影2区邀您开启新征程！</a>
</td>
</tr>
</table>
</div>
<div class="fn-hide">
<table>
<tr>
<th>游戏：</th>
<td>
<select name="" id="">
<option value="">1233</option>
<option value="">2334</option>
</select>
</td>
</tr>
<tr>
<th>面值：</th>
<td>
<select name="" id="">
<option value="">1233</option>
<option value="">2334</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button class="btn">查看价格</button>
<a href="">火影2区邀您开启新征程！</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/news-->
<div id="top-slide" class="slide"><!--轮播图-->
<ul class="slide-ul">
<li class="slide-list">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_1.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_2_1.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_2_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_3_1.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
<li class="slide-list fn-hide">
<div>
<dl>
<dt>
<a href=""><img src="./images/slide_b_4_1.jpg" alt=""></a>
</dt>
<dd>
<a href=""><img src="./images/slide_b_1_1.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_2.jpg" alt=""></a>
<a href=""><img src="./images/slide_b_1_3.jpg" alt=""></a>
</dd>
</dl>
</div>
</li>
</ul>
<div class="slide-nav"><!--轮播切换导航点-->
<ul>
<li class="slide-nav-curr"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div><!--/top-slide-->
</div>
<div class="module module-tabs module-square" id="ads-tabs"><!--广告选项-->
<ul class="md-tabs">
<li class="hover"><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 class="md-content"><!--广告选项内容-->
<div id="ads-tabs-crezed">
<ul class="redu-goods">
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）1111</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）111</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
</ul>
</div>
<!-- div2 -->
<div class="fn-hide">
<ul class="redu-goods">
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）222</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）22</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
</ul>
</div>
<!-- /div2 -->
</div>
</div><!--ads-tabs-->
<!-- 京东首发 -->
<div class="module" id="starter">
<h2 class="md-title">
<span>京东首发</span>
<a href="">查看更多></a>
</h2>
<div class="md-content">
<div class="starter-item">
<div class="starter-img">
<a href="">
<img src="./images/starter1.jpg" alt="">
</a>
</div>
<div class="starter-con">
<div class="starer-con-title">
<h2>明基显示器</h2>
<span>首发</span>
</div>
<p>
无明基，不游戏！明基游戏显示器XL2411T为电竞而生！邀请世界电竞冠军亲自调试设计，专为游戏玩家量身打造。120Hz超快
</p>
</div>
</div>
<div class="starter-item starter-item2">
<div class="starter-img">
<a href="">
<img src="./images/starter1.jpg" alt="">
</a>
</div>
<div class="starter-con">
<div class="starer-con-title">
<h2>明基显示器</h2>
<span>首发</span>
</div>
<p>
无明基，不游戏！明基游戏显示器XL2411T为电竞而生！邀请世界电竞冠军亲自调试设计，专为游戏玩家量身打造。120Hz超快
</p>
</div>
</div>
</div>
</div>
<!-- /首发 -->
<!-- 限时抢购 -->
<div class="module" id="limit">
<h2 class="md-title">
<span>限时抢购</span>
</h2>
<div class="md-content">
<ul class="redu-goods">
<li>
<div class="limit-time" endtime="2012-11-12 09:10:23">
剩余 <span>1</span>小时<span>11</span>分<span>56</span>秒
</div>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="limit-time" endtime="2012-11-26 22:10:23">
剩余 <span>1</span>小时<span>11</span>分<span>56</span>秒
</div>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="limit-time" endtime="2012-12-02 09:10:23">
剩余 <span>1</span>小时<span>11</span>分<span>56</span>秒
</div>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="limit-time" endtime="2012-12-04 09:10:23">
剩余 <span>1</span>小时<span>11</span>分<span>56</span>秒
</div>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
<li>
<div class="limit-time" endtime="2012-12-27 09:10:23">
剩余 <span>1</span>小时<span>11</span>分<span>56</span>秒
</div>
<div class="rg-list">
<a href=""><img src="./images/c-aaa.jpg" alt=""></a>
<b>直降</b>
</div>
<div class="rg-name">
<a href="">艾薇儿：展翅高飞（CD）</a>
</div>
<div class="price">
<span>京东价：</span>
¥149.09
</div>
</li>
</ul>
</div>
</div>
<!-- /限时 -->
<div id="groupbuy">
<div id="gp-buy" class="module">
<h2 class="md-title">
<span>今日团购</span>
<a href="">更多团购</a>
</h2>
<div class="md-content">
<div class="gp-desc">
<a href="">感受甜蜜，品味醇香，专场优惠，限时促销。星巴克、八喜、味多美、金凤成祥、上岛等众多知名品牌，带您领略无法忘怀的甜苦美味。</a>
<p>原价：<span>¥<del>123.00</del></span> </p>
</div>
<div class="gp-img">
<a href=""><img src="./images/aa.jpg" alt=""></a>
</div>
<div class="gp-go">
<span>团购价：<b>¥22.00</b></span>
<a href="">
<em class="fn-hide">详情</em>
</a>
</div>
</div>
</div>
<div id="gp-ads">
<a href=""><img src="./images/g-a.jpg" alt=""></a>
</div>
</div><!--今日团购-->
<!-- category --><!--商品目录-->
<div class="category" id="pc-digit">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>电脑数码</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</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>
<li><a href="###"><b>·</b>显示器</a></li>
<li><a href="###"><b>·</b>鼠标</a></li>
<li><a href="###"><b>·</b>CPU</a></li>
<li><a href="###"><b>·</b>机箱</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/ci-ads.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item --><!--商品目录右边列举-->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div class="fn-hide">
<!-- slide --><!--中间轮播滑动-->
<div class="slide cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div>
<ul class="specials-goods goods-list">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module">
<h2 class="md-title"><span>品牌旗舰店</span><a href="">更多品牌</a></h2>
<div class="md-content">
<ul class="cate-com">
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
</ul>
</div>
</div>
<div class="cate-btn">
<a href="" class="cate-btn-diy">
<em class="fn-hide">diy装机大师</em>
</a>
<a href="" class="cate-btn-office">
<em class="fn-hide">办公直通车</em>
</a>
</div>
<div>
<a href=""><img src="./images/catead1.jpg" alt=""></a>
</div>
<div>
<a href=""><img src="./images/catead1.jpg" alt=""></a>
</div>
</div>
<!-- /category -->
<!-- 家电通讯 -->
<div class="category" id="home-dispath">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>家电通讯</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</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>
<li><a href="###"><b>·</b>显示器</a></li>
<li><a href="###"><b>·</b>鼠标</a></li>
<li><a href="###"><b>·</b>CPU</a></li>
<li><a href="###"><b>·</b>机箱</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/ci-ads.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item -->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div class="fn-hide">
<!-- slide -->
<div class="slide cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div>
<ul class="specials-goods goods-list">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module">
<h2 class="md-title"><span>品牌旗舰店</span><a href="">更多品牌</a></h2>
<div class="md-content">
<ul class="cate-com">
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
</ul>
</div>
</div>
<div class="cate-btn">
<a href="" class="cate-btn-diy">
<em class="fn-hide">diy装机大师</em>
</a>
<a href="" class="cate-btn-office">
<em class="fn-hide">办公直通车</em>
</a>
</div>
<div>
<a href=""><img src="./images/catead1.jpg" alt=""></a>
</div>
<div>
<a href=""><img src="./images/catead1.jpg" alt=""></a>
</div>
</div>
<!-- /家电通讯 -->
<!-- 丽人 -->
<div class="category category-vertical" id="beautiful-people">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>家电通讯</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</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>
<li><a href="###"><b>·</b>显示器</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/cate-ie1.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item -->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div>
<!-- slide -->
<div class="slide cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div class="fn-hide">
<ul class="specials-goods goods-list">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module">
<h2 class="md-title"><span>品牌旗舰店</span><a href="">更多品牌</a></h2>
<div class="md-content">
<ul class="cate-com">
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
</ul>
</div>
</div>
<div class="module cate-news">
<h2 class="md-title">
<span>时尚资讯</span>
</h2>
<div class="md-content">
<ul>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
<li><a href="###"><b>·</b>精品包包年度盘点，榜单揭秘！</a></li>
<li><a href="###"><b>·</b>一生一石感恩特惠季 优雅由你</a></li>
<li><a href="###"><b>·</b>泳衣低至25元，引爆温泉季！</a></li>
</ul>
</div>
</div>
<div>
<a href=""><img src="./images/nead.jpg" alt=""></a>
</div>
</div>
<!-- /丽人 -->
<!-- 名仕 -->
<div class="category category-vertical" id="popul">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>家电通讯</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</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>
<li><a href="###"><b>·</b>显示器</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/cate-ie1.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item -->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div>
<!-- slide -->
<div class="slide cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li class="slide-nav-curr"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div class="fn-hide">
<ul class="specials-goods goods-list">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module">
<h2 class="md-title"><span>品牌旗舰店</span><a href="">更多品牌</a></h2>
<div class="md-content">
<ul class="cate-com">
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
</ul>
</div>
</div>
<div class="module cate-news cate-news-no">
<div class="md-content">
<ul>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
</ul>
</div>
</div>
<div>
<a href=""><img src="./images/nead.jpg" alt=""></a>
</div>
<div><a href=""><img src="./images/ms1.jpg" alt=""></a></div>
</div>
<!-- /名仕 -->
<!-- 食品母婴 -->
<div class="category category-less" id="food">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>食品母婴</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</a></li>
<li><a href="###"><b>·</b>移动硬盘</a></li>
<li><a href="###"><b>·</b>数码配件</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/f1.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item -->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div>
<!-- slide -->
<div class="slide cate-slide" id="sp-cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li class="slide-nav-curr"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div class="fn-hide">
<ul class="specials-goods">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module">
<h2 class="md-title"><span>品牌旗舰店</span><a href="">更多品牌</a></h2>
<div class="md-content">
<ul class="cate-com">
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp1.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp2.gif" alt=""></a></li>
<li><a href=""> <img src="./images/pp3.gif" alt=""></a></li>
</ul>
</div>
</div>
<div class="module cate-news">
<h2 class="md-title">
<span>特价促销</span>
</h2>
<div class="md-content">
<ul>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
</ul>
</div>
</div>
</div>
<!-- /食品母婴 -->
<!-- 图像 -->
<div class="category category-less" id="pic-video">
<div class="category-item">
<div class="ci-nav">
<b></b>
<h2>图书音像</h2>
</div>
<div class="ci-content">
<ul>
<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>
<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>MP3/MP4</a></li>
<li><a href="###"><b>·</b>移动硬盘</a></li>
<li><a href="###"><b>·</b>数码配件</a></li>
</ul>
<div class="ci-ads">
<a href=""><img src="./images/f1.jpg" alt=""></a>
</div>
</div>
</div>
<!-- cate-list-item -->
<div class="module module-tabs module-square">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div class="fn-hide" >
<!-- slide -->
<div class="slide cate-slide">
<ul class="slide-ul">
<li class="slide-list">
<a href=""><img src="./images/cs1.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs2.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs3.jpg" alt=""></a>
</li>
<li class="slide-list">
<a href=""><img src="./images/cs4.jpg" alt=""></a>
</li>
</ul>
<div class="slide-nav">
<div class="slide-nav-opacity"></div>
<ul>
<li class="slide-nav-curr"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
</div>
<!-- /slide -->
<ul class="specials-goods">
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li class="sg-li-1">
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/sp-ads.jpg" alt=""></a>
</div>
</li>
</ul>
</div>
<!-- 笔记本 -->
<div >
<ul class="specials-goods goods-list specials-goods-less">
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as1.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as2.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as3.jpg" alt=""></a>
</div>
</li>
<li>
<div class="sg-info">
<p><a href="">下单立减，特价到High！</a></p>
<p class="price">¥4199.00</p>
</div>
<div class="sg-img">
<a href=""><img src="./images/as4.jpg" alt=""></a>
</div>
</li>
</ul>
<ul class="cate-link">
<li><a href="">林徽因传：你若安好便是晴天</a></li>
<li><a href="">马尔克斯：霍乱时期的爱情</a></li>
<li><a href="">宝宝视觉激发：彩色卡</a></li>
<li><a href="">宝宝视觉激发：彩色卡</a></li>
</ul>
</div>
<!-- /笔记本 -->
</div>
</div>
<!-- /cate-list-item -->
</div>
<div class="category-right">
<div class="module module-tabs news-tabs" id="news-tabs-book">
<ul class="md-tabs">
<li class="hover"><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 class="md-content">
<div>
<ul>
<li>
<span class="news-ti-1">1</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span class="news-ti-2">2</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span class="news-ti-3">3</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>4</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>5</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>6</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>7</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>8</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>9</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>10</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
</ul>
</div>
<div>
<ul>
<li>
<span class="news-ti-1">1</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span class="news-ti-2">2</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span class="news-ti-3">3</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>4</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>5</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>6</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>7</span>
<div class="news-title">
<a href="">2012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>8</span>
<div class="news-title">
<a href="">1212012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>9</span>
<div class="news-title">
<a href="">1212012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
<li>
<span>10</span>
<div class="news-title">
<a href="">1212012末日纪念版（BD）（特别赠送全球</a>
</div>
<div class="price">
￥49.00
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /图像 -->
<div id="club">
<div class="module" id="hot-share">
<h2 class="md-title">
<span>热门晒单</span>
</h2>
<div class="md-content">
<ul>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho1.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho2.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho3.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho1.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="module" id="hot-goout">
<h2 class="md-title">
<span>热门活动</span>
</h2>
<div class="md-content">
<ul>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho1.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho2.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho3.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
<li>
<div class="club-img">
<a href="">
<img src="./images/ho1.jpg" alt="">
<b></b>
</a>
</div>
<div class="club-info">
<p><a href="">很不错的一款电热壶哟</a></p>
<div>
<a href="">
速度很快。信号很好，而且设置方便。最关键的是，能看到流量使用了多少。
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div id="rss">
<div id="online-read" class="module cate-news">
<h2 class="md-title"><span>在线读书</span><a href="">更多在线读书</a></h2>
<div class="md-content">
<div class="cnew-img">
<a href=""><img src="./images/a1.jpg" alt=""></a>
</div>
<ul>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
<li><a href="###"><b>·</b>蜜丝佛陀满158送唇膏</a></li>
<li><a href="###"><b>·</b>美好家家具裸价到底，部分商品低至49元</a></li>
</ul>
</div>
</div>
<div id="rss-form">
<h2>订阅促销信息</h2>
<form action="">
<input type="text" name="" id="">
<button class="btn">订阅</button>
</form>
</div>
</div>
</div><!-- /hd-w-->
<div id="link" class="hd-w">
<div id="link-page">
<dl class="link-page-1">
<dt>
<b></b>
<h2>购物指南</h2>
</dt>
<dd>
<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>
<li><a href="###">联系客服</a></li>
</ul>
</dd>
</dl>
<dl class="link-page-2">
<dt>
<b></b>
<h2>购物指南</h2>
</dt>
<dd>
<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>
<li><a href="###">联系客服</a></li>
</ul>
</dd>
</dl>
<dl class="link-page-3">
<dt>
<b></b>
<h2>购物指南</h2>
</dt>
<dd>
<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>
<li><a href="###">联系客服</a></li>
</ul>
</dd>
</dl>
<dl class="link-page-4">
<dt>
<b></b>
<h2>购物指南</h2>
</dt>
<dd>
<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>
<li><a href="###">联系客服</a></li>
</ul>
</dd>
</dl>
<dl class="link-page-5">
<dt>
<b></b>
<h2>购物指南</h2>
</dt>
<dd>
<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>
<li><a href="###">联系客服</a></li>
</ul>
</dd>
</dl>
</div>
<div id="son-com">
<h2>京东商城各地分公司</h2>
<p class="com-desc">
京东商城已在全国360个城市建立了自己的分公司。提供上门自提、货到付款、POS机刷卡和售后上门服务。
</p>
<p class="com-link">
<a href="">查看各地分公司 ></a>
</p>
</div>
</div>
<div id="copy-right" class="hd-w">
<div class="copy-link">
<a href="###">关于我们</a>
|
<a href="###">联系我们</a>
|
<a href="###">人才招聘</a>
|
<a href="###">商家入驻</a>
|
<a href="###">迷你挑</a>
|
<a href="###">奢侈品网</a>
|
<a href="###">广告服务</a>
|
<a href="###">手机京东</a>
|
<a href="###">友情链接</a>
|
<a href="###">销售联盟</a>
|
<a href="###">京东社区</a>
|
<a href="###">京东公益</a>
|
<a href="###">english site</a>
</div>
<div class="cp-info">
<p>北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | <a href="###">互联网药品信息服务资格证编号(京)-非经营性-2011-0034</a></p>
<p>音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号</p>
<p>Copyright©2004-2012 360buy京东商城 版权所有</p>
</div>
<div class="cp-ba">
<a href=""><img src="./images/ba1.gif" alt=""></a>
<a href=""><img src="./images/ba2.gif" alt=""></a>
<a href=""><img src="./images/ba3.gif" alt=""></a>
<a href=""><img src="./images/ba4.gif" alt=""></a>
</div>
</div>
<script type="text/javascript" src="./public/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./js/HDslide.js"></script>
<script type="text/javascript" src="./js/HDbuslide.js"></script>
<script type="text/javascript" src="./js/HDtabs.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
</body>
</html>
/*index.css*/
.public-top{
height: 31px;
background: #efefef url('../images/top.png') repeat-x;
}
#shortcut{
width: 1210px;
height: 30px;
line-height: 30px;
margin: 0px auto;/*水平居中*/
}
#shortcut li{
float: left;
}
#shortcut li a{
padding: 0px 8px;
border-right: 1px #cccccc solid;
}
#shortcut .no-bd a{
border-right: none;
}
.icon-li{
position: relative;
z-index: 9999999;
}
.icon-li i{
display: block;
width: 10px;
height: 10px;
background: url('../images/top.png') no-repeat;
position: absolute;
}
#shortcut .icon-li a{
padding-left: 18px;
}
.icon-li .icon-fav{
background-position: -57px -289px;
left: 4px;
top: 10px;
}
.icon-li .icon-dropdown{
background-position: -35px -281px;
top: 13px;
right: 4px;
}
#shortcut .li-activate .icon-dropdown{
height: 4px;
*overflow: hidden;
background-position: -35px -275px;
}
#shortcut .li-dropdown a{
padding-left: 8px;
padding-right: 18px;
}
#shortcut .li-activate a{
background: #FFF;
border-right: none;
}
#shortcut .li-activate dl{
box-shadow: 0px 0px 5px #ddd;/*阴影,亮边框*/
overflow: hidden;
border: 1px #ccc solid;
margin-top: 3px;
}
#shortcut .li-activate dt{
background: #FFF;
margin-top: -4px;
}
#shortcut .li-activate dt a{
border-bottom: 1px #F3F3F3 solid;/*边框*/
padding:0px 12px 6px 1px;
margin: 0px 6px;/*左右空出距离*/
}
#shortcut .li-activate dd{
display: block;
background: #FFF;
position: absolute;
left: 0px;
border: #ccc solid;
border-width: 0px 1px 1px;
}
#shortcut .li-activate dd p{
line-height: 22px;
}
#shortcut .li-activate dd a{
padding-left: 7px;
line-height: 22px;
}
#header{
height: 90px;
}
.hd-w{
width: 1210px;
margin: 0px auto;
}
#logo{
width: 324px;
height: 68px;
position: relative;
margin-top: 20px;
float: left;
}
#logo .logo-ads{
position: absolute;
left: 187px;
top: 0px;
}
#search{
width: 500px;
height: 60px;
float: left;
margin-top: 20px;
margin-left: 20px;
}
#search-form{
position: relative;
height: 36px;
}
#search-form input{
height: 22px;
margin-top: 3px;
background: none;
border: none;
padding: 4px 5px;
}
#search-form #keyword{
width: 413px;
}
#search-form div{
float: left;
height: 36px;
background: url('../images/top.png') no-repeat -81px -470px;
}
#search-form .search-form-left{
width: 4px;
}
#search-form .search-form-center{
width: 493px;
background-position: 0px -357px;
background-repeat: repeat-x;
}
#search-form .search-form-right{
width: 3px;
background-position: 0px -470px;
}
#search-form .search-button{
width: 78px;
height: 30px;
line-height: 30px;
clear: both;
position: absolute;
right: 3px;
top: 3px;
font-weight: bold;
color: #000;
font-size: 14px;
background-position: 0px -395px;
text-align: center;
}
#search-form .search-button input{
width: 68px;
height: 22px;
cursor: pointer;
}
#hot-keyword{
height: 20px;
line-height: 20px;
overflow: hidden;
}
#hot-keyword a,#hot-keyword span{
color: #999999;
padding-right: 5px;
}
#hot-keyword .hot-words{
color: #c00;
}
.btn{
width: 73px;
height: 25px;
text-align: center;
line-height: 25px;
background: url('../images/buy.png') no-repeat -124px -220px;
border: none;
}
#header-cart{
width: 260px;
height: 45px;
float: right;
margin-top: 20px;
}
#personal-cart{
float: left;
}
#shopping-cart{
float: right;
}
#header-cart dl{
position: relative;
z-index: 999;
}
#header-cart dt{
width: 110px;
height: 29px;
text-align: center;
line-height: 29px;
background: url('../images/buy.png') no-repeat -65px -320px;
}
#shopping-cart dt{
background: url('../images/buy.png') no-repeat 0px -252px;
text-indent: 10px;
}
#header-cart dt i{
display: block;
position: absolute;
}
#header-cart dt .icon-account{
width: 24px;
height: 24px;
background: url('../images/buy.png') no-repeat -202px -176px;
left: 2px;
top: 2px;
}
#header-cart dt .icon-dropdown{
width: 12px;
height: 6px;
background: url('../images/top.png') no-repeat -15px -283px;
top: 10px;
right: 10px;
}
#shopping-cart dt{
width: 131px;
}
#header-cart dd{
display: none;
width: 290px;
padding: 8px;
border: 1px #ccc solid;
position: absolute;
top: 29px;
right: -2px;
background: #fff;
}
#header-cart dl .hover dt{
background: #FFF;
border: #ccc solid;
border-width: 1px 1px 0px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
position: absolute;
z-index: 120;
}
#header-cart dl .hover dd{
display: block;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
z-index: 100;
right: -112px;
right: 0px;
}
#header-cart .cart-info ul{
float: left;
width: 123px;
padding: 0px 10px;
}
#header-cart .cart-info ul li{
border-bottom: 1px #ccc dotted;
line-height: 30px;
}
#header-cart .cart-info ul li a{
color: #005ea7;
}
#header-cart .cart-info .cart-order{
border-left: 1px #ccc solid;
}
#shopping-cart dt .icon-account{
background: url('../images/top.png') no-repeat 0px -231px;
top: -13px;
left: 30px;
}
#shopping-cart dt .icon-account span{
height: 20px;
line-height: 16px;
color: #FFF;
text-indent: 0px;
margin-left: 8px;
background:url(../images/top.png) no-repeat 100% -595px;
position: absolute;
top: 0px;
left: -1px;
font-style: normal;
padding-right: 5px;
}
#shopping-cart dl .hover dt{
background: url('../images/buy.png') no-repeat 0px -284px;
}
#shopping-cart .hover dt{
right: 0px;
}
#shopping-cart .hover dd{
left: -308px;
right: 0px;
}
#nav{
height: 40px;
position: relative;
z-index: 900;
}
#cate{
width: 190px;
height: 40px;
padding-left: 10px;
line-height: 40px;
font-size: 16px;
background: url(../images/top.png) repeat-x 0px -427px;
}
#cate a{
font-weight: bold;
color: #FFF;
font-family: "微软雅黑";
}
#nav-list{
width: 990px;
height: 40px;
line-height: 40px;
background: url(../images/top.png) repeat-x 0px -315px;
}
#nav #nav-bg-left,#nav-list,#cate{
float: left;
}
#nav-bg-left,#nav-bg-right{
width: 10px;
height: 40px;
background: url(../images/top.png) no-repeat;
}
#nav-bg-left{
background-position: -75px -273px;
}
#nav-bg-right{
background-position: 0px -273px;
}
#nav-bg-right{
float: right;
}
#nav-list li{
float: left;
width: 83px;
text-align: center;
background: url(../images/top.png) no-repeat -83px -509px;
}
#nav-list .nav-activate{
background: url(../images/top.png) no-repeat 0px -161px;
}
#nav-list li a{
color: #FFF;
font-weight: bold;
font-size: 15px;
font-family: "微软雅黑";
}
#nav-ads{
position: absolute;
right: 0px;
top: 0px;
clear: both;
}
#cate-list{
width: 206px;
height: 423px;
padding-top: 5px;
border: #c00 solid;
border-width: 0px 2px 2px;
position: absolute;
left: 0px;
top: 40px;
background-color: #fcf4ea;
}
#cate-list-show{
height: 400px;
overflow: hidden;
}
#cate-list-show .item{
height: 30px;
*height:28px;
border-bottom: 1px #fff solid;
}
#cate-list-show .item span{
display: block;
width:180px;
padding-left: 20px;
line-height: 31px;
background:url(../images/top.png) no-repeat -75px -561px;
position: absolute;
}
#cate-list-show .item-list{
display: none;
width: 697px;
background: #FFF;
border: 1px #c00 solid;
}
#cate-list-show .item span i{
display: block;
width: 8px;
height: 10px;
overflow: hidden;
position: absolute;
right: 10px;
top: 10px;
background: url(../images/top.png) no-repeat -64px -275px;
}
#cate-list-show .item span a{
color:#333;
}
#cate-list-show .item-hover .item-nav{
background-color: #FFF;
border: #c00 solid;
width: 156px;
height: 29px;
line-height: 29px;
border-width: 1px 0px;
position: absolute;
z-index: 1300;
padding-right: 5px;
}
#cate-list-show .item-hover .item-list{
display: block;
position: absolute;
left: 180px;
top: 5px;
z-index: 999;
clear: both;
}
#cate-list-show .item-hover .item-nav i{
display: none;
}
#cate-list .cate-all-link{
line-height: 20px;
overflow: hidden;
background: #FDF1DE;
border-top: 1px solid #FDE6D2;
margin-top: -1px;
padding-left: 18px;
}
#cate-list .cate-all-link a{
color: #c00;
}
#cate-list-show .item-list-l{
width: 462px;
padding: 0px 10px;
float: left;
overflow: hidden;
border-right: 1px #fbe2c6 solid;
}
#cate-list-show .item-list-r{
width: 210px;
float: right;
background-color: #fcf4ea;
}
#cate-list-show .item-list-close{
position: absolute;
clear: left;
width: 19px;
height: 19px;
right: 2px;
top: 2px;
background:url(../images/top.png) no-repeat -55px -203px;
cursor: pointer;
}
#cate-list-show .item-list-l dl{
width: 100%;
border-top: 1px #eed6b7 dotted;
padding: 13px 0px;
margin-top: -1px;
overflow: hidden;
}
#cate-list-show .item-list-l dt{
width: 70px;
float: left;
text-align: center;
}
#cate-list-show dt a{
color: #c00;
font-weight: bold;
}
#cate-list-show .item-list-l dd{
width: 389px;
float: left;
margin-top: -8px;
}
#cate-list-show .item-list-l dd a{
display: block;
float: left;
padding: 0px 8px;
border-left: 1px #ccc solid;
margin-top: 8px;
white-space: nowrap;
}
#cate-list-show .item-list-r dt{
height: 30px;
line-height: 30px;
padding-left: 4px;
}
#cate-list-show .item-list-r li{
width: 90px;
height: 28px;
line-height: 28px;
padding-left: 10px;
float: left;
}
#cate-list-show .item-list-r ul{
overflow: hidden;
margin-bottom: 10px;
}
#cate-list-show .item-list-r li a{
color: #666;
}
#top{
height: 422px;
margin-top: 10px;
}
#top-slide{
width: 670px;
height: 420px;
float: right;
margin-right: 12px;
}
#news{
width: 310px;
height: 420px;
float: right;
}
#ticket-cp .good{
padding: 10px 0px;
}
#ticket-cp-img{
float: left;
width: 70px;
height: 70px;
background: url(../images/bg2.png) no-repeat;
margin: 15px 5px;
}
#ticket-jz{
background: #eee;
width: 140px;
height: 58px;
margin-top: -8px;
}
#ticket-jz div{
float: left;
}
#ticket-jz img{
margin: 2px;
}
#ticket-jz .vs{
color: #f60;
font-weight: bold;
font-size: 16px;
}
#ticket-cp .img-ssq{
background-position: -146px 0px;
}
#ticket-cp .img-dlt{
background-position: -74px 0px;
}
#ticket-cp .img-3d{
background-position: 0px 0px;
}
#ticket-cp .img-kingfoot{
background-position: -320px 0px;
}
#ticket-cp .ticket-cp-info{
float: left;
}
#ticket-cp .cp-btn{
margin-top: 5px;
}
#ticket-cp .goodlucky{
padding: 5px 0px;
clear: both;
margin-top: 5px;
}
.tr-city{
margin-top: 5px;
}
.tr-city dl{
width: 120px;
padding-left: 5px;
float: left;
}
.tr-date{
clear: both;
padding-left: 5px;
margin-bottom: 5px;
}
.tr-date select{
width: 55px;
}
.tr-query{
padding-left: 5px;
}
#ticket-tr .md-tabs .hover{
height: 22px;
line-height: 22px;
}
.slide{
position: relative;
z-index: 100;
}
#top-slide .slide-list{
height: 390px;
}
#top-slide .slide-list dt a{
display: block;
height: 240px;
}
#top-slide .slide-list dd{
height:150px;
}
.slide-list dd a{
float: left;
margin-left: 1px;
}
.slide-nav{
height: 30px;
background-color: #EEE;
clear: both;
position: absolute;
width: 100%;
bottom: 0px;
z-index: 90;
}
.slide-nav ul{
float: right;
margin-top: 5px;
}
.slide-nav li{
float: left;
}
.slide-nav li a{
display: block;
width: 22px;
height: 22px;
background-color: #999;
color: #FFF;
text-align: center;
line-height: 22px;
margin: 0px 5px;
border-radius: 12px;
}
.slide-nav li a:hover{
background-color: #c00;
text-decoration: none;
color: #FFF;
}
.slide-nav .slide-nav-curr a{
background-color: #c00;
text-decoration: none;
color: #FFF;
}
#new-lis{
height: 148px;
}
#new-list .md-content ul{
overflow: hidden;
margin:8px 0px;
}
#new-list .md-content li{
width: 125px;
height: 27px;
float: left;
line-height: 27px;
padding: 0px 10px;
overflow: hidden;
border-left: 1px #eee solid;
margin-left: -1px;
}
.module{
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px #ddd solid;
margin-bottom: 10px;
overflow: hidden;
}
.module-square{
border-top: 2px #c00 solid;
border-radius: 0px;
}
.module .md-title{
height: 29px;
line-height: 29px;
background-color: #F3F3F3;
padding: 0px 8px;
}
.module .md-tabs{
width: 100%;
height: auto;
overflow: hidden;
background: url(../images/top.png) repeat-x 0px -32px;
}
.module .md-tabs li{
border:#ddd solid;
border-width: 0px 0px 1px 1px;
margin-left: -1px;
float: left;
text-align: center;
height: 30px;
line-height: 30px;
}
.module .md-tabs .hover{
background:#FFF;
height: 31px;
line-height: 31px;
border-bottom: none;
}
.module .md-title span{
float: left;
color: #333;
font-weight: bold;
}
.module .md-title a{
float: right;
color: #005ea7;
}
.module .md-content{
width: 100%;
overflow: hidden;
}
#ticket .md-tabs li{
width: 77px;
}
#ticket .md-content{
height: 137px;
}
#ticket .md-content a{
color: #005EA7;
}
#ticket-cz table{
margin:10px 8px;
}
#ticket-cz table th{
color: #666;
}
#ticket-cz table tr{
vertical-align: top;
}
#ticket-cz table td span{
color: #CC3300;
font-weight: bold;
}
#ticket-cz table td{
padding-bottom: 10px;
}
#ticket-cz table input{
height: 23px;
color: #333;
padding-left: 5px;
}
.mt_s_2 .md-content a{
color: #005EA7;
}
.mt_s_2 .module-tabs{
margin: 3px;
border: none;
}
.mt_s_2 .module-tabs .md-tabs{
background: none;
border-bottom: 1px #dedede solid;
height: 22px;
}
.mt_s_2 .md-tabs{
margin-left: 3px;
}
.mt_s_2 .md-tabs li{
width: 44px;
margin-right: 3px;
border: #dedede solid;
border-width: 1px 1px 0px;
height: 21px;
line-height: 21px;
background: #fdfdfd;
margin-left: 0px;
}
.mt_s_2 .md-tabs .hover{
border-bottom: 1px white solid;
}
#ads-tabs{
width: 885px;
margin-top: 20px;
float: left;
}
#ads-tabs .md-tabs{
background-position:0px -32px;
}
#ads-tabs .md-tabs li{
width: 177px;
height: 37px;
line-height: 37px;
font-weight: bold;
font-size: 14px;
}
#ads-tabs .md-tabs li.hover{
height: 38px;
}
#ads-tabs .md-tabs .hover a{
color: #c00;
}
#ads-tabs .md-content{
height: 230px;
}
#ads-tabs .md-content li{
float: left;
width: 177px;
}
.redu-goods .rg-list{
position: relative;
width: 177px;
height: 130px;
padding-top: 30px;
}
.redu-goods .rg-list b{
position: absolute;
display: block;
width: 48px;
height: 41px;
background: url(../images/bg2.png) no-repeat -219px 0px;
top: 10px;
right: 12px;
color: #FFF;
text-align: center;
line-height: 41px;
}
.redu-goods .rg-name{
height: 25px;
padding: 10px;
}
.redu-goods .price{
padding:0px 10px;
}
.price span{
color: #999999;
font-weight: normal;
}
.price{
color: #c00;
font-weight: bold;
}
#starter{
width: 308px;
height: 270px;
float: right;
margin-top: 20px;
}
#starter .md-title{
height: 35px;
line-height: 35px;
}
#starter .md-content{
padding: 0px 10px 0px;
}
#starter .starter-img{
float: left;
width: 102px;
height: 105px;
}
#starter .starter-con{
float: left;
width: 160px;
padding:0px 10px;
}
#starter .starter-item2 .starter-img{
float: right;
}
#starter .starer-con-title{
padding: 5px 0px;
}
#starter .starer-con-title h2{
display: inline-block;
font-weight: bold;
font-size: 14px;
float: left;
}
#starter .starer-con-title span{
display: inline-block;
width: 35px;
height: 16px;
background: url(../images/c.png) no-repeat -266px -536px;
text-align: center;
color: #fff;
line-height: 16px;
}
#starter .starter-con p{
display: block;
height: 86px;
overflow: hidden;
color: #999;
line-height: 22px;
}
#starter .starter-item{
clear: both;
width: 287px;
overflow: hidden;
padding-bottom: 5px;
}
#starter .starter-item2{
border-top: 1px #cccccc dashed;
}
#limit{
clear: both;
width: 885px;
background:#f3f3f3 url(../images/c.png) no-repeat -86px -886px;
float: left;
}
#limit .md-title{
background: none;
height: 35px;
line-height: 35px;
font-size: 14px;
}
#limit .md-content{
width: 885px;
height: 266px;
}
#limit .md-content ul{
width: 885px;
padding-left: 6px;
}
#limit .md-content .limit-time{
height: 30px;
line-height: 30px;
border-bottom: 1px #ddd dashed;
text-align: center;
color: #999;
}
#limit .md-content .limit-time span{
font-weight: bold;
font-size: 14px;
}
#limit .redu-goods .rg-list{
width: 160px;
}
#limit .md-content li{
float: left;
width: 168px;
border: 1px #ddd solid;
margin-right: 6px;
background-color: #FFF;
}
#limit .md-content .price{
height: 27px;
line-height: 27px;
border-top: 1px #ddd dashed;
}
#groupbuy{
float: right;
}
#gp-buy{
width: 308px;
height:190px;
}
#gp-buy .md-title{
height: 39px;
line-height: 39px;
}
#gp-buy .md-content{
height: 140px;
padding:8px 15px 3px 0px;
}
#gp-buy .md-content .gp-desc{
width: 188px;
height:100px;
float: left;
padding-left: 10px;
}
#gp-buy .md-content .gp-desc a{
display: block;
height: 76px;
line-height: 19px;
overflow: hidden;
}
#gp-buy .md-content .gp-desc p{
color: #999;
}
#gp-buy .md-content .gp-img{
float: left;
width: 100px;
height: 100px;
}
#gp-buy .md-content .gp-go{
clear: left;
width: 296px;
height: 40px;
background: url(../images/c.png) no-repeat 0px -594px;
margin-left: 2px;
}
#gp-buy .md-content .gp-go span{
color: #FFF;
display: inline-block;
height: 20px;
line-height: 20px;
margin-left: 23px;
margin-top: 8px;
float: left;
}
#gp-buy .md-content .gp-go span b{
font-size: 16px;
}
#gp-buy .md-content .gp-go a{
display: block;
float: right;
width: 91px;
height: 33px;
background: url(../images/c.png) no-repeat -74px -636px;
margin-top: 5px;
margin-right: 7px;
}
.category{
width: 887px;
height: 432px;
float: left;
margin-bottom: 20px;
}
.category .category-item{
width: 210px;
height: 432px;
float: left;
}
.category .module-tabs{
float: left;
width: 676px;
margin-left: -1px;
}
.category .category-item .ci-nav{
height: 40px;
position: relative;
text-align: center;
line-height: 40px;
color: #FFF;
background-color: #2c81cf;
}
.category .category-item .ci-nav h2{
font-weight: bolder;
font-size: 18px;
}
.category .category-item .ci-nav b{
display: block;
width: 210px;
height: 40px;
position: absolute;
left: 0px;
background: url(../images/c.png) no-repeat 0px -342px;
}
.category .category-item .ci-content{
width: 208px;
position: relative;
height: 392px;
border: #2e82d0 solid;
border-width: 0px 1px 1px;
}
.category .md-content{
position: relative;
}
.category .cate-slide{
width: 225px;
position: absolute;
left: 225px;
height: 261px;
overflow: hidden;
}
.category .cate-slide .slide-nav{
height: 34px;
background: none;
_bottom:4px;
}
.category .cate-slide .slide-nav ul{
position: absolute;
z-index: 2;
left: 55px;
}
.category .cate-slide .slide-ul{
width: 900px;
height: 261px;
position: relative;
}
.category .cate-slide .slide-ul li{
float: left;
}
.category .cate-slide .slide-nav-opacity{
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
width: 100%;
height: 34px;
background-color: #FFF;
opacity: 0.7;
z-index: 1;
filter:alpha(opacity=70);
}
.category .category-item ul{
width: 198px;
padding: 5px;
position: absolute;
z-index: 90;
}
.category .category-item ul li{
float: left;
}
.category .category-item ul li a{
display: block;
width: 99px;
height: 29px;
line-height: 29px;
}
.category .category-item ul li b{
padding: 0px 5px;
}
.category .category-item ul li a:hover{
background: #1858a9;
color: #FFF;
text-decoration: none;
}
.category .category-item .ci-ads{
position: absolute;
bottom: 0px;
clear: both;
z-index: 80;
}
#pc-digit{
}
#pc-digit .module-square{
border-top-color: #2e82d0;
}
.category .module-square .md-tabs li{
width: 135px;
height: 37px;
line-height: 37px;
}
.category .module-square .md-tabs .hover{
height: 38px;
}
.specials-goods{
height: 392px;
position: relative;
}
.specials-goods li{
float: left;
width: 225px;
height: 131px;
overflow: hidden;
border: #eee solid;
border-width: 1px 0px 0px 1px;
margin-left: -1px;
position: relative;
margin-top: -1px;
}
.specials-goods .sg-info{
position: absolute;
width: 115px;
z-index: 90;
top: 10px;
left: 10px;
}
.specials-goods .sg-info .price{
padding-top: 5px;
}
.specials-goods .sg-img{
position: absolute;
right: 1px;
bottom: 0px;
z-index: 20;
}
.specials-goods .sg-li-1,.specials-goods .sg-li-3{
width: 224px;
margin-right: 225px;
border-right:1px #eee solid;
}
.goods-list li{
width: 169px;
height: 196px;
}
.goods-list .sg-img{
bottom: 55px;
right: 22px;
}
.goods-list .sg-info{
width: 150px;
height: 40px;
top: 150px;
}
.category-right{
width: 310px;
/*height: 432px;*/
height: auto;
overflow: hidden;
float: right;
}
.category-right .md-title{
height: 38px;
line-height: 38px;
}
.category-right .cate-com{
width: 100%;
height: auto;
overflow: hidden;
background-color: #f3f3f3;
padding: 5px;
}
.category-right .cate-com li{
float: left;
margin-top: 1px;
margin-left: 1px;
}
.category-right .cate-com a{
display: block;
width: 98px;
height: 35px;
}
.category-right .cate-btn{
height: 55px;
margin-bottom: 6px;
}
.category-right .cate-btn a{
display: block;
width: 150px;
height: 55px;
background: url(../images/c.png) no-repeat 0px -285px;
float: left;
}
.category-right .cate-btn .cate-btn-office{
background: url(../images/c.png) no-repeat -160px -285px;
margin-left: 10px;
}
.category-right .cate-btn .cate-btn-diy:hover{
background-position: 0px -228px;
}
.category-right .cate-btn .cate-btn-office:hover{
background-position: -160px -228px;
}
#home-dispath .category-item .ci-nav b{
background-position: 0px -384px;
}
#home-dispath .module-square{
border-top-color:#2E82D0;
}
#beautiful-people .category-item .ci-nav b{
background-position: 0px -426px;
}
#popul .category-item .ci-nav b{
background-position: 0px -468px;
}
.category-vertical .category-item .ci-ads{
right: 0px;
top: 2px;
}
.category-vertical .category-item .ci-content{
overflow: hidden;
}
.category-vertical .category-item ul li{
clear: both;
}
.category-vertical .category-item ul li a{
width: 80px;
}
.cate-news li{
height: 23px;
line-height: 23px;
overflow: hidden;
padding-left: 5px;
}
.cate-news li a b{
padding:0px 5px;
}
.cate-news a{
color: #2e82d0;
}
.cate-news-no{
border-radius: 0px;
}
.category-less{
height: 304px;
}
.category-less .category-item{
height: 304px;
}
.category-less .category-item .ci-content{
height: 262px;
border: #f28300 solid;
border-width: 0px 1px 1px;
}
.category-less .specials-goods{
height: 261px;
}
.category-less .specials-goods-less{
height: 196px;
}
.category-less .module-square{
border-top-color: #f28300;
}
#food .category-item .ci-nav b{
background-position: 0px -843px;
}
#pic-video .category-item .ci-nav b{
background-position: 0px -552px;
}
.cate-link li{
float: left;
border: #eee solid;
border-width: 1px 0px 0px 1px;
margin-left: -1px;
}
.cate-link li a{
display: block;
width: 328px;
height: 32px;
line-height: 32px;
padding-left: 10px;
}
.cate-link li a:hover{
background-color: #005ea7;
color: #FFF;
text-decoration: underline;
}
.news-tabs{
width: 305px;
height: 301px;
}
.news-tabs .md-tabs li{
width: 61px;
height: 38px;
line-height: 38px;
}
.news-tabs .md-tabs .hover{
height: 38px;
line-height: 38px;
}
.news-tabs .md-content ul{
padding:0px 5px 5px;
overflow: hidden;
}
.news-tabs .md-content li{
height: 26px;
line-height: 26px;
border-top: 1px #eee dashed;
margin-top: -1px;
_margin-top:-3px;
}
.news-tabs .md-content li span{
display:block;
float: left;
width: 20px;
height:22px;
line-height: 22px;
background: url(../images/buy.png) no-repeat -202px -220px;
text-align: center;
color: #fff;
}
.news-tabs .md-content li .news-ti-1,.news-tabs .md-content li .news-ti-2,.news-tabs .md-content li .news-ti-3{
background-position: -202px -244px;
}
.news-tabs .md-content li .news-title{
float: left;
width: 190px;
height: 26px;
overflow: hidden;
}
.news-tabs .md-content li .price{
float: right;
}
.cp-numbers .num{
display: inline-block;
width: 20px;
padding: 2px 3px;
font-weight: bold;
text-align: left;
}
.cp-numbers .red{
color: #C00;
}
.cp-numbers .blue{
color: #00f;
}
#club{
width: 888px;
height: 192px;
float: left;
position: relative;
overflow: hidden;
}
#club .module{
width: 441px;
height:190px;
float: left;
}
#hot-share{
border-top-right-radius: 0px;
float: left;
}
#hot-goout{
margin-left: -1px;
border-top-left-radius: 0px;
}
#club .module ul{
height: 161px;
padding: 0px 10px;
overflow: hidden;
}
#club .module li{
height: 53px;
padding: 15px 0px 13px 0px;
border-bottom: 1px #ddd dotted;
}
#club .module .club-img{
float: left;
width: 79px;
}
#club .module .club-img a{
display: block;
position: relative;
}
#club .module .club-img a b{
display: inline-block;
width: 17px;
height: 19px;
position: absolute;
background: url(../images/buy.png) no-repeat -203px -269px;
right: 5px;
top: 0px;
}
#club .module .club-info{
float: left;
width: 340px;
background: url(../images/buy.png) no-repeat 280px -325px;
}
#club .module .club-info p a{
color: #005ea7;
}
#club .module .club-info div{
width: 277px;
}
#club .module .club-info div a{
color: #999;
}
#rss{
width: 308px;
float: right;
margin-bottom: 20px;
}
.cate-news .cnew-img{
float: left;
margin: 5px 5px 0px;
}
#online-read{
margin-bottom: 1px;
}
#online-read ul{
margin-top: 6px;
}
#rss-form input{
width: 192px;
border-top: 1px #676767 solid;
border-left: 1px #676767 solid;
border-right: 1px #eee solid;
border-bottom: 1px #eee solid;
padding: 4px 0px 4px 28px;
background: url(../images/buy.png) no-repeat -208px -28px;
margin-right: 5px;
}
#rss-form .btn{
width: 63px;
background-position: -168px 0px;
}
#rss-form h2{
font-weight: bold;
}
#link{
clear: both;
height: 176px;
border: 1px #dddddd solid;
border-radius: 5px;
}
#link-page{
padding-left: 32px;
padding-top: 13px;
width: 970px;
float: left;
}
#link-page dl{
float: left;
width: 194px;
height: auto;
overflow: hidden;
}
#link-page dt{
height: 28px;
line-height: 28px;
}
#link-page dt h2{
font-weight: bold;
float: left;
padding-left: 10px;
}
#link-page dt b{
display: inline-block;
width: 28px;
height: 28px;
background: url(../images/buy.png) no-repeat 0px -176px;
float: left;
}
#link-page .link-page-2 dt b{
background-position: -30px -176px;
}
#link-page .link-page-3 dt b{
background-position: -60px -176px;
}
#link-page .link-page-4 dt b{
background-position: -90px -176px;
}
#link-page .link-page-5 dt b{
background-position: -120px -176px;
}
#link-page dd ul{
clear: both;
padding-left: 23px;
border-left: 1px #cfcfcf dashed;
margin-left: 14px;
margin-top: 7px;
}
#son-com{
float: left;
width: 178px;
height: 170px;
padding: 0px 12px;
background: url(../images/c.png) no-repeat 0px -673px;
}
#son-com h2{
font-weight: bold;
padding-top: 15px;
}
#son-com .com-desc{
color: #333;
padding: 5px 0px;
line-height: 23px;
}
#son-com .com-link{
text-align: right;
}
#son-com .com-link a{
color: #005ea7;
}
#copy-right{
margin-top: 23px;
text-align: center;
}
#copy-right .copy-link{
margin-bottom: 17px;
}
#copy-right .copy-link a{
margin: 0px 10px;
}
#copy-right .cp-info{
color: #333333;
line-height: 20px;
}
#copy-right .cp-ba{
margin-top: 10px;
}
#copy-right .cp-ba a{
margin-right: 10px;
}
/*base.css
2 */
3
4
5 @charset "utf-8";
6
7 /*
8 @名称: base
9 @功能: 重设浏览器默认样式
10 */
11
12 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
13 html{
14 color:#000;background:#fff;
15 -webkit-text-size-adjust: 100%;
16 -ms-text-size-adjust: 100%;
17 }
18
19 /* 内外边距通常让各个浏览器样式的表现位置不同 */
20 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
21 margin:0;padding:0;
22 z-index: 99999;
23 }
24
25 /* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
26 article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
27 display:block;
28 }
29
30 /* HTML5 媒体文件跟 img 保持一致 */
31 audio,canvas,video {
32 display: inline-block;
33
34 /* 要注意表单元素并不继承父级 font 的问题 */
35 body,button,input,select,textarea{
36 font:12px/1.5 tahoma,arial,\5b8b\4f53;
37 }
38 input,select,textarea{
39 font-size:100%;
40 }
41
42 /* 去掉各Table cell 的边距并让其边重合 */
43 table{
44 border-collapse:collapse;border-spacing:0;
45 }
46
47 /* IE bug fixed: th 不继承 text-align*/
48 th{
49 text-align:inherit;
50 }
51
52 /* 去除默认边框 */
53 fieldset,img{
54 border:0;
55 }
56
57 /* ie6 7 8(q) bug 显示为行内表现 */
58 iframe{
59 display:block;
60 }
61
62 /* 去掉 firefox 下此元素的边框 */
63 abbr,acronym{
64 border:0;font-variant:normal;
65 }
66
67 /* 一致的 del 样式 */
68 del {
69 text-decoration:line-through;
70 }
71
72 address,caption,cite,code,dfn,em,th,var {
73 font-style:normal;
74 font-weight:500;
75 }
76
77 /* 去掉列表前的标识, li 会继承 */
78 ol,ul {
79 list-style:none;
80 }
81
82 /* 对齐是排版最重要的因素, 别让什么都居中 */
83 caption,th {
84 text-align:left;
85 }
86
87 /* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
88 h1,h2,h3,h4,h5,h6 {
89 font-size:100%;
90 font-weight:500;
91 }
92
93 q:before,q:after {
94 content:'';
95 }
96
97 /* 统一上标和下标 */
98 sub, sup {
99 font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
100 }
101 sup {top: -0.5em;}
102 sub {bottom: -0.25em;}
103
104
105 a{
106 color: #333;
107 }
108 /* 让链接在 hover 状态下显示下划线 */
109 a:hover {
110 text-decoration:underline;
111 color: #c00;
112 }
113
114 /* 默认不显示下划线，保持页面简洁 */
115 ins,a {
116 text-decoration:none;
117 }
118
119 /* 清理浮动 */
120 .fn-clear:after {
121 visibility:hidden;
122 display:block;
123 font-size:0;
124 content:" ";
125 clear:both;
126 height:0;
127 }
128 .fn-clear {
129 zoom:1; /* for IE6 IE7 */
130 }
131
132 /* 隐藏, 通常用来与 JS 配合 */
133 body .fn-hide {
134 display:none;
135 }
136
137 /* 设置内联, 减少浮动带来的bug */
138 .fn-left,.fn-right {
139 display:inline;
140 }
141 .fn-left {
142 float:left;
143 }
144 .fn-right {
145 float:right;
146 }
最终实现效果如图：
![]()
浙公网安备 33010602011771号