仿京东静态页面

2019年11月26日 阅读数:123
这篇文章主要向大家介绍仿京东静态页面,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。
运用到的知识点儿: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="">待处理订单&gt;</a></li> <li><a href="">咨询回复&gt;</a></li> <li><a href="">降价商品&gt;</a></li> <li><a href="">优惠券&gt;</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="">查看更多&gt;</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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;149.09 </div> </li> </ul> </div> <!-- /div2 --> </div> </div><!--ads-tabs--> <!-- 京东首发 --> <div class="module" id="starter"> <h2 class="md-title"> <span>京东首发</span> <a href="">查看更多&gt;</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> &#165;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> &#165;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> &#165;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> &#165;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> &#165;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>&#165;<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>&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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">&#165;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&copy;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{