console 命令行工具 X clear

console

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入网站描述 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 引入网站关键词 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
    <!-- 引入favicon图标 -->
    <!-- <link rel="shortcut icon" href="favicon.ico" /> -->
    <!-- 引入初始化样式文件 -->
    <!-- <link rel="stylesheet" href="css/base.css" /> -->
    <!-- 引入公共的样式文件 -->
    <!-- <link rel="stylesheet" href="css/common.css" /> -->
    <!-- 引入首页 index 的样式文件 -->
    <!-- <link rel="stylesheet" href="css/index.css" /> -->
    <!-- 引入动画 JS -->
    <!-- <script src="js/animate.js"></script> -->
    <!-- 引入首页 JS 轮播图 -->
    <!-- <script src="js/shopping.js"></script> -->
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>品优购商城-综合网购首选-正品低价、品质保障、配送及时、轻松购物</title>
</head> 

<body>
    <!-- 快捷导航栏 start-->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>品优购欢迎你！&nbsp;</li>
                    <li>
                        <a href="#">请登录</a>&nbsp;
                        <a href="register.html" class="style_red" id="top">免费注册</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li><a href="javascript:;">我的订单</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="javascript:;">我的品优购</a></li>
                    <li></li>
                    <li><a href="javascript:;">品优购会员</a></li>
                    <li></li>
                    <li><a href="javascript:;">企业采购</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="javascript:;">关注品优购</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="javascript:;">客户服务</a></li>
                    <li></li>
                    <li class="arrow-icon"><a href="javascript:;">网站导航</a></li>
                </ul>
            </div>
        </div>
    </section>
    <!-- 快捷导航栏 end-->

    <!-- header模块 start -->
    <div class="header w">
        <!-- logo模块 -->
        <div class="logo">
            <h1>
                <a href="https://jsrun.net/xgcKp" title="品优购商城">品优购商城</a>
            </h1>
        </div>
        <!-- 中间搜索模块 -->
        <div class="search">
            <input type="search" name="" id="" placeholder="语言开发">
            <button>搜索按钮</button>
        </div>
        <!-- hotwords模块制作 -->
        <div class="hotwords">
            <a href="#" class="style_red">优惠购首发</a>
            <a href="#">亿元优惠</a>
            <a href="#">9.9元团购</a>
            <a href="#">美满99减30</a>
            <a href="#">办公用品</a>
            <a href="#">电脑</a>
            <a href="#">通信</a>            
        </div>
        <!-- 购物车模块 -->
        <div class="shopcar">
            <i class="fa fa-cart-arrow-down fa-2x"></i>
            我的购物车
            <i class="fa fa-angle-right"></i>
            <i class="count">80</i>
        </div>
    </div>
    <!-- header模块 end -->

    <!-- nav 导航模块 start -->
    <nav class="nav">
        <div class="w">
            <!-- 左侧盒子 -->
            <div class="dropdown">
                <div class="dt">全部商品分类</div>
                <div class="dd">
                    <ul>
                        <li><a href="javascript:;">家用电器</a> </li>
                        <li><a href="https://jsrun.net/svcKp">手机、</a><a href="#">数码、</a><a href="#">通信</a> </li>
                        <li><a href="javascript:;">电脑、办公</a> </li>
                        <li><a href="javascript:;">家居、家具、家装、厨具</a> </li>
                        <li><a href="javascript:;">男装、女装、童装、内衣</a> </li>
                        <li><a href="javascript:;">个户化妆、清洁用品、宠物</a> </li>
                        <li><a href="javascript:;">鞋靴、箱包、珠宝、奢侈品</a> </li>
                        <li><a href="javascript:;">运动户外、钟表</a> </li>
                        <li><a href="javascript:;">汽车、汽车用品</a> </li>
                        <li><a href="javascript:;">母婴、玩具乐器</a> </li>
                        <li><a href="javascript:;">食品、酒类、生鲜、特产</a> </li>
                        <li><a href="javascript:;">医药保健</a> </li>
                        <li><a href="javascript:;">图书、音像、电子书</a> </li>
                        <li><a href="javascript:;">彩票、旅行、充值、票务</a> </li>
                        <li><a href="javascript:;">理财、众筹、白条、保险</a> </li>
                    </ul>
                </div>
            </div>
            <!-- 右侧盒子 -->
            <div class="navitems">
                <ul>
                    <li><a href="javascript:;">服装城</a></li>
                    <li><a href="javascript:;">美妆馆</a></li>
                    <li><a href="javascript:;">传智超市</a></li>
                    <li><a href="javascript:;">全球购</a></li>
                    <li><a href="javascript:;">闪购</a></li>
                    <li><a href="javascript:;">团购</a></li>
                    <li><a href="javascript:;">拍卖</a></li>
                    <li><a href="javascript:;">有趣</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- nav 导航模块 end -->

    <!-- 首页 main 专有模块 start -->
    <div class="w">
        <div class="main">
            <!-- 焦点图 -->
            <div class="focus">
                 <!-- 左按钮 -->
                <a href="javascript:;" class="arrow-l"> <i> &lt; </i></a>
                <!-- 右按钮 -->
                <a href="javascript:;" class="arrow-r"> <i> &gt; </i></a>
                <!-- 轮播图 -->
                <ul>
                    <li><a href="javascript:;"><img src="http://jxmc.gitee.io/pinyougou/upload/focus.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="https://img.alicdn.com/imgextra/i3/6000000007055/O1CN01xGSgCC21zF3G41uD3_!!6000000007055-2-octopus.png" alt=""></a></li>
                    <li><a href="javascript:;"><img src="https://img.alicdn.com/imgextra/i3/6000000002700/O1CN01MnM4XO1VoeBbCw88V_!!6000000002700-0-octopus.jpg" alt=""></a></li>
                    <li><a href="javascript:;"><img src="https://img.alicdn.com/imgextra/i1/6000000005433/O1CN01VAAmNk1q0MdRBlYKc_!!6000000005433-2-octopus.png" alt=""></a></li>
                </ul>
                <ol class="circle">
                    <li></li>
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            
            <!-- 新闻快报模块 -->
            <div class="newsflash">
                <!-- 快报模块 -->
                <div class="news">
                    <!-- 快报头部 -->
                    <div class="news-hd">
                        <h5>品优购快报</h5>
                        <a href="#" class="more">更多</a>
                    </div>
                    <!-- 快报内容 -->
                    <div class="news-bd">
                        <ul>
                            <li><a href="javascript:;">【特惠】爆款耳机5折秒！爆款耳机5折秒！爆款耳机5折秒！</a></li>
                            <li><a href="javascript:;">【特惠】母亲节，健康好礼低至5折！</a></li>
                            <li><a href="javascript:;">【特惠】爆款耳机5折秒！爆款耳机5折秒！爆款耳机5折秒！</a></li>
                            <li><a href="javascript:;">【特惠】9.9元洗100张照片！</a></li>
                            <li><a href="javascript:;">【特惠】长虹智能空调立省1000</a></li>
                        </ul>
                    </div>
                </div>

                <!-- 生活服务模块 -->
                <div class="lifeservice">
                    <ul>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_huafei"></i>
                                <p>话费</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_feiji"></i>
                                <p>机票</p>
                            </a>
                            <span class="hot"></span>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_dianying"></i>
                                <p>电影票</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_game"></i>
                                <p>游戏</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_caipiao"></i>
                                <p>彩票</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_jiayou"></i>
                                <p>加油卡</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_jiudian"></i>
                                <p>酒店</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_huoche"></i>
                                <p>火车票</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_zhongchou"></i>
                                <p>众筹</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_licai"></i>
                                <p>理财</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_lipin"></i>
                                <p>礼品卡</p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <i class="life_ico ico_baitiao"></i>
                                <p>白条</p>
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- 广告模块 -->
                <div class="bargain">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/bargain.jpg" alt="">
                </div>
            </div>
        </div>
    </div>
    <!-- 首页 main 专有模块 end -->

    <!-- 推荐模块 strat -->
    <div class="w recom">
        <!-- 推荐左侧盒子 -->
        <div class="recom_hd">
            <img src="http://jxmc.gitee.io/pinyougou/img/clock.png" alt="">
            <h3>今日推荐</h3>
        </div>
        <!-- 推荐右侧盒子 -->
        <div class="recom_bd">
            <ul>
                <li>
                    <div class="recom_msg">
                        <h5>优质好货</h5>
                        <p>满300减100</p>
                        <i>满500减200</i>
                    </div>
                    <img src="upload/recom01.png" alt="">
                </li>
                <li>
                    <div class="recom_msg">
                        <h5>品牌尾货</h5>
                        <p>满300减100</p>
                        <i>团购低至9.9</i>
                        <div>团购</div>
                    </div>
                    <img src="upload/recom02.png" alt="">
                </li>
                <li>
                    <div class="recom_msg">
                        <h5>时尚穿搭</h5>
                        <p>低至3.6折</p>
                        <i>暑期出游季</i>
                        <div>闪购</div>
                    </div>
                    <img src="upload/recom03.png" alt="">
                </li>
                <li>
                    <div class="recom_msg">
                        <h5>0点上新</h5>
                        <p>全场包邮</p>
                        <i>低至1折</i>
                        <div>闪购</div>
                    </div>
                    <img src="upload/recom04.png" alt="">
                </li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块 end -->

    <!-- 猜你喜欢模块 start -->
    <!-- 猜你喜欢模块 end -->

    <!-- 固定电梯导航 start -->
    <div class="fixedtool">
        <ul>
            <li class="current"><a href="#top">返回首页</a></li>
            <li><a href="#c1">家用电器</a></li>
            <li><a href="#c2">手机通讯</a></li>
            <li><a href="#c3">家具商城</a></li>
        </ul>
    </div>
    <!-- 固定电梯导航 start -->

    <!-- 楼层区域模块 start  注意这个 floor ，不要给高度，内容有多少，算多少 -->
    <div class="floor">
        <!-- 1楼家用电器 -->
        <div class="w jiandian">
            <!-- 头部 有高度 -->
            <div class="box_hd">
                <!-- 左侧标题 -->
                <h3>家用电器</h3>
                <!-- 右侧切换栏 -->
                <div class="tab_list">
                    <ul>
                        <li><a href="javascript:;" class="style_red" id="c1">热门</a></li>
                        <li><a href="javascript:;">大家电</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">厨房电器</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">个护健康</a></li>
                        <li><a href="javascript:;">应季电器</a></li>
                        <li><a href="javascript:;">空气/净化</a></li>
                        <li><a href="javascript:;">新奇特</a></li>
                        <li><a href="javascript:;">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <!-- 内容 -->
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <!-- 宽度为210 第一列 -->
                        <div class="col_210">
                            <!-- 列表项 -->
                            <ul>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                            </ul>
                            <!-- 第一列图片 -->
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为329 第二列 -->
                        <div class="col_329">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/pic1.jpg" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第三列 -->
                        <div class="col_221">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-2.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第四列 -->
                        <div class="col_221">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为219 第五列 -->
                        <div class="col_219">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-5.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2楼手机通讯 -->
        <div class="w jiandian">
            <!-- 头部 有高度 -->
            <div class="box_hd">
                <!-- 左侧标题 -->
                <h3>手机通讯</h3>
                <!-- 右侧切换栏 -->
                <div class="tab_list">
                    <ul>
                        <li><a href="javascript:;" class="style_red" id="c2">热门</a></li>
                        <li><a href="javascript:;">大家电</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">厨房电器</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">个护健康</a></li>
                        <li><a href="javascript:;">应季电器</a></li>
                        <li><a href="javascript:;">空气/净化</a></li>
                        <li><a href="javascript:;">新奇特</a></li>
                        <li><a href="javascript:;">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <!-- 内容 -->
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <!-- 宽度为210 第一列 -->
                        <div class="col_210">
                            <!-- 列表项 -->
                            <ul>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                            </ul>
                            <!-- 第一列图片 -->
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为329 第二列 -->
                        <div class="col_329">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/pic1.jpg" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第三列 -->
                        <div class="col_221">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-2.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第四列 -->
                        <div class="col_221">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为219 第五列 -->
                        <div class="col_219">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-5.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 3楼家具商场 -->
        <div class="w jiandian">
            <!-- 头部 有高度 -->
            <div class="box_hd">
                <!-- 左侧标题 -->
                <h3>家具商场</h3>
                <!-- 右侧切换栏 -->
                <div class="tab_list">
                    <ul>
                        <li><a href="javascript:;" class="style_red" id="">热门</a></li>
                        <li><a href="javascript:;">大家电</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">厨房电器</a></li>
                        <li><a href="javascript:;">生活电器</a></li>
                        <li><a href="javascript:;">个护健康</a></li>
                        <li><a href="javascript:;">应季电器</a></li>
                        <li><a href="javascript:;">空气/净化</a></li>
                        <li><a href="javascript:;">新奇特</a></li>
                        <li><a href="javascript:;">高端电器</a></li>
                    </ul>
                </div>
            </div>
            <!-- 内容 -->
            <div class="box_bd">
                <div class="tab_content">
                    <div class="tab_list_item">
                        <!-- 宽度为210 第一列 -->
                        <div class="col_210">
                            <!-- 列表项 -->
                            <ul>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                                <li><a href="javascript:;">节能补贴</a></li>
                            </ul>
                            <!-- 第一列图片 -->
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-1.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为329 第二列 -->
                        <div class="col_329">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/pic1.jpg" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第三列 -->
                        <div class="col_221">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-2.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-3.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为221 第四列 -->
                        <div class="col_221">
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-4.png" alt="">
                            </a>
                        </div>
                        <!-- 宽度为219 第五列 -->
                        <div class="col_219">
                            <a href="javascript:;" class="bb">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-5.png" alt="">
                            </a>
                            <a href="javascript:;">
                                <img src="http://jxmc.gitee.io/pinyougou/upload/floor-1-6.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </div>
    <!-- 楼层区域模块 end -->

    <!-- 底部模块的制作 start  -->
    <footer class="footer">
        <div class="w">
            <!-- 服务模块 -->
            <div class="mod_service">
                <ul>
                    <li>
                        <h5 class="service_icon service_zheng"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_icon service_kuai"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_icon service_bao"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_icon service_hua"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                    <li>
                        <h5 class="service_icon service_help"></h5>
                        <div class="service_txt">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>
                    </li>
                </ul>
            </div>

            <!-- 帮助模块 -->
            <div class="mod_help">
                <dl>
                    <dt>购物指南</dt>
                    <dd><a href="#">购物流程</a></dd>
                    <dd><a href="#">会员介绍</a></dd>
                    <dd><a href="#">生活旅行/团购</a></dd>
                    <dd><a href="#">常见问题</a></dd>
                    <dd><a href="#">购物指南</a></dd>
                    <dd><a href="#">联系客服</a></dd>
                </dl>
                <dl>
                    <dt>配送方式</dt>
                    <dd><a href="#">上门自提</a></dd>
                    <dd><a href="#">211限时达</a></dd>
                    <dd><a href="#">配送服务查询</a></dd>
                    <dd><a href="#">配送费收取标准</a></dd>
                    <dd><a href="#">海外配送</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="#">货到付款</a></dd>
                    <dd><a href="#">在线支付</a></dd>
                    <dd><a href="#">分期付款</a></dd>
                    <dd><a href="#">邮局汇款</a></dd>
                    <dd><a href="#">公司转账</a></dd>
                </dl>
                <dl>
                    <dt>售后服务</dt>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">价格保护</a></dd>
                    <dd><a href="#">退款说明</a></dd>
                    <dd><a href="#">返修/退换货</a></dd>
                    <dd><a href="#">取消订单</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="#">夺宝岛</a></dd>
                    <dd><a href="#">DIY装机</a></dd>
                    <dd><a href="#">延保服务</a></dd>
                    <dd><a href="#">品优购E卡</a></dd>
                    <dd><a href="#">品优购通信</a></dd>
                </dl>
                <dl>
                    <dt>帮助中心</dt>
                    <dd>
                        <img src="http://jxmc.gitee.io/pinyougou/upload/erweima.png" alt="">
                        品优购客户端
                    </dd>
                </dl>
            </div>

            <!-- 版权模块 -->
            <div class="mod_copyright">
                <div class="links">
                    <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> |
                    <a href="#"> Contact U</a>
                </div>
                <div class="copyright">
                    地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                    京ICP备08001421号京公网安备110108007702
                </div>
            </div>            
        </div>
    </footer>
    <!-- 底部模块的制作 end  -->
</body>

</html>

/*---------------------------- base.css ---------------------------------*/
* {
  margin: 0;
  padding: 0;
  /* css3盒子模型 */
  box-sizing: border-box;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}
/* 去掉li 的小圆点 */
li {
  list-style: none;
}
img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}
button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}
a {
  color: #666;
  text-decoration: none;
}
a:hover {
  color: #c81623;
}
button,
input {
  /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
  /* 默认有灰色边框我们需要手动去掉 */
  border: 0;
  outline: none;
}
body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
  color: #666;
}
.hide,
.none {
  display: none;
}
/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}
.clearfix {
  *zoom: 1;
}
/*---------------------------- base.css ---------------------------------*/





/*---------------------------- common.css -------------------------------*/
/* 声明字体图标 注意路径的变化 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?8qckqg');
    src:  url('../fonts/icomoon.eot?8qckqg#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?8qckqg') format('truetype'),
    url('../fonts/icomoon.woff?8qckqg') format('woff'),
    url('../fonts/icomoon.svg?8qckqg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

/* 版心 */
.w {
    width: 1200px;
    margin: 0 auto;
}
/* 调用左浮动 */
.fl {
    float: left;
}
/* 调用右浮动 */
.fr {
    float: right;
}
/* 调用字体颜色为红色 */
.style_red {
    color: #c81623;
}

/*---------------------------顶部快捷导航栏--------------------------------*/

/* 快捷导航模块 */
.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}
/* 快捷导航栏中的每个小li */
.shortcut ul li {
    float: left;
}
/* 选择所有的偶数里面的小li 小竖线 */
.shortcut .fr ul li:nth-child(even) {
    width: 1px;
    height: 12px;
    background-color: #666;
    margin: 9px 15px 0;
}
/* 快捷导航栏 li 中的向下小箭头 */
.arrow-icon::after {
    content: '\25BC';
    /* font-family: 'icomoon'; */
    margin-left: 6px;
}

/*---------------------------头部制作--------------------------------*/

/* header 头部制作 */
.header {
    position: relative;
    height: 105px;
    /* background-color: pink; */
}
/* logo 模块 */
.logo {
    position: absolute;
    top: 25px;
    left: 0;
    width: 171px;
    height: 61px;
}
.logo a {
    /* 因为有宽度和高度，所以转换成块级元素 */
    display: block;
    width: 175px;
    height: 56px;
    background: url(http://ciweipaci.gitee.io/best-buy/images/logo.png) no-repeat;
    /* font-size: 0;  淘宝的做法*/
    /* 淘宝的文字隐藏文字 */
    text-indent: -9999px;
    overflow: hidden;
}

/* 搜索 */
.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 1px solid #b1191a;
}
/* 搜索 内容框 */
.search input {
    float: left;
    width: 455px;
    height: 34px;
    padding-left: 10px;
}
/* 搜索 按钮 */
.search button {
    float: right;
    width: 80px;
    height: 34px;
    background-color: #b1191a;
    color: #fff;
    font-size: 16px;
}

/* 热点词hotwords模块 */
.hotwords {
    position: absolute;
    top: 66px;
    left: 346px;
}
.hotwords a {
    /* 行内元素可以指定左右的外边距 */
    margin: 0 10px;
}

/* shopcar购物车模块 */
.shopcar {
    position: absolute;
    top: 25px;
    right: 60px;
    width: 140px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #dfdfdf;
    background-color: #f7f7f7;
}
/* 购物车左边字体图标 */
.shopcar .fa:nth-of-type(1) {
    position: relative;
    top: 3px;
    left: 0px;
    margin-right: 5px;
    color: #e60012;
}
.shopcar::before {
    content: '';
}
/* 购物车右边字体图标 */
.shopcar .fa:nth-of-type(2) {
    margin-left: 10px;
}
.shopcar::after {
    content: '';
}
/* 购物车右上角气球 */
.count {
    position: absolute;
    top: -8px;
    /* 小技巧：让文字可以左对齐 */
    left: 105px;
    padding: 0 5px;
    height: 14px;
    line-height: 14px;
    color: #fff;
    background-color: #e60012;
    border-radius: 7px 7px 7px 0;
}

/*---------------------------头部导航栏--------------------------------*/

/* 头部 nav 模块 */
.nav {
    height: 47px;
    border-bottom: 2px solid #b1191a;
}
/* nav 导航栏左侧 */
.nav .dropdown {
    float: left;
    width: 210px;
    height: 46px;
    background-color: #e60012;
}
/* nav 导航栏左侧标题 */
.nav .dropdown .dt {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 16px;
    line-height: 45px;
    text-align: center;
    background-color: #b1191a;
}
/* nav 导航栏左侧内容 */
.nav .dropdown .dd {
    margin-top: 1px; 
    height: 465px;
    background-color: #c81623;
    /* display: none; */
}
.nav .dropdown .dd ul li {
    position: relative;
    /* 让每个li 距离左侧有一定距离 美观作用 */
    margin-left: 2px;
    padding-left: 10px;
    height: 31px;
    line-height: 31px;
    transition: all .5s;
}
.nav .dropdown .dd ul li:hover {
    background-color: #fff;
    padding-left: 20px;
}
/* 鼠标经过li 里面的 a 变颜色*/
.nav .dropdown .dd ul li:hover a {
    color: #c81623;
}
/* 头部 nav 左边下拉内容 li 小箭头 */
.nav .dropdown .dd ul li::after {
    position: absolute;
    top: 1px;
    right: 5px;
    color: #fff;
    font-size: 14px;
    content: '\25BA';
}
.nav .dropdown .dd ul li a {
    color: #fff;
    font-size: 14px; 
}

/* nav 导航栏右侧 */
.nav .navitems {
    float: left;
}
.nav .navitems ul li {
    float: left;
}
.nav .navitems ul li a {
    display: block;
    /* 因为字数不一样多 所以不能加宽度 直接用Padding 挤开 */
    padding: 0 25px; 
    height: 45px;
    line-height: 45px;
    font-size: 16px;
}

/*---------------------------底部footer制作--------------------------------*/
.footer {
    padding-top: 30px;
    height: 415px;
    background-color: #f5f5f5;
}
/* 底部 服务模块 */
.mod_service {
    height: 80px;
    border-bottom: 1px solid #ccc;
}
.mod_service ul li {
    float: left;
    padding-left: 35px;
    width: 240px;
    height: 50px;
}
/* 底部 服务模块 图标  */
/* 因为浮动后，另一侧的元素盒子被遮挡，但内容会围绕图片 文字模块不用左浮动 */
.service_icon {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: 8px;
    background: url(https://img-blog.csdnimg.cn/2ddb4fbf3eae4b8c82664e2b1a6dfa65.png) no-repeat;
}
/* 底部 服务模块 图标定位  */
.service_zheng {
    background-position: -252px -3px;
}
.service_kuai {
    background-position: -255px -54px;
}
.service_bao {
    background-position: -257px -105px;
}
.service_hua {
    background-position: -257px -156px;
}
.service_help {
    background-position: -257px -208px;
}
/* 文字描述盒子 */
.service_txt {
    margin-top: 6px;
}
/* 文字描述标题 */
.mod_service .service_txt h4 {
    font-size: 14px;
}
/* 文字表述段落 */
.mod_service .service_txt p {
    font-size: 12px;
}

/* 底部帮助模块 */
.mod_help {
    padding-top: 20px;
    padding-left: 50px;
    height: 185px;
    border-bottom: 1px solid #ccc;
}
.mod_help dl {
    float: left;
    width: 200px;
}
/* 最后一列 */
.mod_help dl:last-child {
    width: 90px;
    text-align: center;
}
.mod_help dl dt {
    margin-bottom: 10px;
    font-size: 16px;
}

/* 底部版权模块 */
.mod_copyright {
    padding-top: 20px;
    text-align: center;
}
.mod_copyright .links {
    padding-bottom: 15px;
}
.mod_copyright .links a {
    margin: 0 3px;
}
.mod_copyright .copyright {
    line-height: 20px;
}
/*---------------------------- common.css -------------------------------*/





/*---------------------------- index.css -------------------------------*/
/*----- 首页模块 -----*/
.main {
    width: 980px;
    /* 此处有高度 不用清除浮动 */
    height: 455px;
    /* 挤到右侧 让左边的详细分类留空间 */
    margin-left: 220px;
    margin-top: 10px;
}
/*----- 首页焦点图 -----*/
/* 焦点图 */
.focus {
    position: relative;
    float: left;
    width: 721px;
    height: 455px;
    overflow: hidden;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}
.focus ul li {
    float: left;
}
/* 轮播图左右按钮 模块 */
.arrow-l,
.arrow-r {
    /* display: none; */
    position: absolute;
    top: 50%;
    border-radius: 0;
    width: 25px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    background-color: rgba(0, 0, 0, .15);
    color: rgba(255, 255, 255, 0.8);
    margin-top: -20px;
    font-size: 20px;
    z-index: 2;
    border: none;
    outline: none;
}
/* 轮播图左按钮 */
.arrow-l {
    left: 0;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}
.arrow-l i {
    position: absolute;
    left: 2px;
}
/* 轮播图右按钮 */
.arrow-r {
    right: 0;
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}
.arrow-r i {
    position: absolute;
    right: 2px;
}
/* 轮播图下方圆点 */
.circle {
    position: absolute;
    bottom: 10px;
    left: 30px;
}
.circle li {
    float: left;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.7);
    margin: 0 3px;
    border-radius: 50%;
    cursor: pointer;
}
.circle .current {
    background-color: #fff;
}

/* 新闻快报 */
.newsflash {
   float: right;
   width: 250px;
   height: 455px;
}
/* 快播模块 */
.news {
    height: 165px;
    border: 1px solid #e4e4e4;
}
/* 快报的头部 */
.news-hd {
    height: 33px;
    line-height: 33px;
    border-bottom: 1px dotted #e4e4e4;
    padding: 0 15px;
}
/* 快报头部左侧 */
.news-hd h5 {
    float: left;
    font-size: 14px;
}
/* 快报头部右侧 */
.news-hd .more {
    float: right;
}
/* 快报头部右侧 箭头 */
.news-hd .more::after {
    content: '\e903';
    font-family: 'icomoon';
    margin-left: 5px;
}
/* 快报中间内容部分 */
.news-bd {
    padding: 5px 0 0 15px;
}
.news-bd ul li {
    height: 24px;
    line-height: 24px;
    /* 超出的部分隐藏 */
    overflow: hidden;
    /* 不允许换行 */
    white-space: nowrap;
    /* 文字溢出的部分... */
    text-overflow: ellipsis;
}
/* 生活服务模块 */
.lifeservice {
    height: 209px;
    border: 1px solid #e4e4e4;
    border-top: 0;
    /* 为了配合每个小盒子一行放4个 并且让超出的部分隐藏 */
    overflow: hidden;
}
.lifeservice ul {
    /* 整个大盒子的宽度是 252px 为了一行能放下4个小li  */
    width: 252px;
}
/* 生活服务每个小 li */
.lifeservice ul li {
    /* 配合第二个小 li 右上角小图标 */
    position: relative;
    float: left;
    width: 63px;
    height: 71px;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    text-align: center;
}
.lifeservice li a {
    display: block;
    overflow: hidden;
    height: 100%;
}
/* 每个 i 中放置的精灵图 通过定位来找到位置 */
.life_ico  {
    display: inline-block;
    width: 24px;
    height: 28px;
    background-color: pink;
    margin-top: 12px;
    background: url(https://img-blog.csdnimg.cn/2ddb4fbf3eae4b8c82664e2b1a6dfa65.png) no-repeat;
}
.ico_huafei {
    background-position: -17px -16px;
}
.ico_feiji {
    background-position: -79px -16px;
}
.ico_dianying {
    background-position: -141px -16px;
}
.ico_game {
    background-position: -206px -16px;
}
.ico_caipiao {
    background-position: -16px -87px;
}
.ico_jiayou {
    background-position: -76px -87px;
}
.ico_jiudian {
    background-position: -141px -87px;
}
.ico_huoche {
    background-position: -206px -87px;
}
.ico_zhongchou {
    background-position: -17px -159px;
}
.ico_licai {
    background-position: -79px -159px;
}
.ico_lipin {
    background-position: -141px -155px;
}
.ico_baitiao {
    background-position: -206px -159px;
}
/* 第二个小 li 右上角小图标 */
.hot {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 15px;
    background: url(http://jxmc.gitee.io/pinyougou/img/jian.jpg) no-repeat;
}
/* 广告 模块 */
.bargain {
    margin-top: 5px;
}

/*----- 推荐模块 -----*/
.recom {
    margin-top: 12px;
    height: 163px;
}
/* 推荐左侧盒子 */
.recom_hd {
    float: left;
    width: 205px;
    height: 100%;
    background-color: #5c5251;
    text-align: center;
    padding-top: 30px;
}
.recom_hd h3 {
    padding-top: 10px;
    font-size: 18px;
    color: #fff;
    font-weight: normal;
}
/* 推荐右侧盒子 */
.recom_bd {
    float: left;  
}
.recom_bd ul li {
    position: relative;
    float: left;
    width: 245px;
    height: 163px;
    padding: 22px 22px 0 22px;
}
/* 图片部分 */
.recom_bd ul li img {
    float: right;
    width: 100px;
    height: 120px;
}
/* 文字部分 */
.recom_bd ul li .recom_msg {
    float: left;
}
/* 文字标题 */
.recom_msg h5 {
    font-size: 16px;
    color: #333;
}
/* 价格描述 */
.recom_msg i {
    font-size: 12px;
    color: #7c7c7c;
}
/* 带背景的段落 */
.recom_msg p {
    margin-top: 12px;
    font-size: 14px;
    color: #fff;
}
.recom_bd ul li:nth-child(1) .recom_msg p {
    background-color: #00a0e8;
    border-left: 3px solid #00a0e8;
    border-right: 3px solid #00a0e8;
}
.recom_bd ul li:nth-child(2) .recom_msg p {
    background-color: #5fb200;
    border-left: 3px solid #5fb200;
    border-right: 3px solid #5fb200;
}
.recom_bd ul li:nth-child(3) .recom_msg p {
    background-color: #e2162f;
    border-left: 3px solid #e2162f;
    border-right: 3px solid #e2162f;
}
.recom_bd ul li:nth-child(4) .recom_msg p {
    background-color: #0085fb;
    border-left: 3px solid #0085fb;
    border-right: 3px solid #0085fb;
}
/* 最后一个段落p 团购 闪购 */
.recom_msg div {
    width: 57px;
    height: 18px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 18px;
    margin-top: 21px;
    border-radius: 9px;
}
.recom_bd ul li:nth-child(2) .recom_msg div {
    background-color: #5fb200;
}
.recom_bd ul li:nth-child(3) .recom_msg div {
    background-color: #e2162f;
}
.recom_bd ul li:nth-child(4) .recom_msg div {
    background-color: #0085fb;
}
/* 小竖线利用 nth-child(-n+3) 前3个 */
.recom_bd ul li:nth-child(-n+3)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10px;
    width: 1px;
    height: 145px;
    background-color: #ddd;
}

/*----- 固定电梯导航栏 -----*/
.fixedtool {
    position: fixed;
    top: 183px;
    left: 50%;
    margin-left: -675px;
    width: 66px;
    background-color: #fff;
}
.fixedtool .current {
    background-color: #c81623;
}
.fixedtool .current a {
    color: #fff;
}
.fixedtool li {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

/*----- 楼层爬楼模块 -----*/
.floor .w {
    margin-top: 30px;
}
/* 楼层爬楼头部 */
.box_hd {
    height: 30px;
    border-bottom: 2px solid #c81623;
}
/* 头部左侧标题 */
.box_hd h3 {
    float: left;
    font-size: 18px;
    font-weight: 400;
    color: #c81623;
}
/* 头部右侧浮动列表 */
.tab_list {
    float: right;
    line-height: 30px;
}
.tab_list ul li {
    float: left;
}
/* 列表中每个 a 后面跟一个 | 符号 */
.tab_list ul li a::after {
    content: "|";
    padding: 0 10px;
}
/* 列表中最后一个列 里面a 不要小竖线 */
.tab_list ul li:last-child a::after {
    content: '';
}
/* 中间内容父盒子 */
.box_bd {
    height: 361px;
}
/* 子代选择器 内容区域子盒子 */
.tab_list_item>div {
    float: left;
    height: 361px;
    overflow: hidden;
}
.tab_list_item>div:nth-child(n+2) {
    border-bottom: 1px solid #ccc;
}
.col_210 {
    width: 210px;
    height: 361px;
    background-color: #f9f9f9;
    text-align: center;
}
.col_210 ul {
    padding-left: 12px;
}
.col_210 ul li {
    float: left;
    width: 85px;
    height: 34px;
    margin-right: 10px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 33px;
}
.col_329 {
    width: 329px;
}
.col_221 {
    width: 221px;
    border-right: 1px solid #ccc;
}
.col_219 {
    width: 219px;
    border-right: 1px solid #ccc;
}
/* 列表中的小横线 */
.bb {
    /* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */
    display: block;
    border-bottom: 1px solid #ccc;
}
/* 让楼层里面所有图片都带有动画效果 */
.box_bd img {
    transition: all .2s; 
}
.box_bd img:hover {
    margin-left: 8px;
}