标签：activate 超极本 排版 textarea detail back java 个人 装机
运用到的知识点儿：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 }
最终实现效果如图：
标签：activate 超极本 排版 textarea detail back java 个人 装机
原文地址：http://www.cnblogs.com/String-string/p/7294963.html
