SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE html>
<html lang="en">

<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">
    <title>商品列表-正品低价、品质保障、配送及时、轻松购物！</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" />
    <!-- 关键字 -->
    <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 列表页专有样式 -->
    <link rel="stylesheet" href="css/list.css">
    <!-- 引入字体图标 -->
    <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" />
</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="sk">
            <img src="http://jxmc.gitee.io/pinyougou/upload/sk.png" alt="">
        </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="sk_list">
                <ul>
                    <li><a href="#">品优购秒杀</a></li>
                    <li><a href="#">即将售尽</a></li>
                    <li><a href="#">品优购秒杀</a></li>
                </ul>
            </div>
            <!-- 右侧区域 -->
            <div class="sk_con">
                <ul>
                    <li><a href="#">女装</a></li>
                    <li><a href="#" class="style_red">女鞋</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>
            </div>
        </div>
    </nav>
    <!-- nav 导航模块 end -->

    <!-- 列表页主体部分 start -->
    <div class="w sk_container">
        <!-- 图片区域 -->
        <div class="sk_hd">
            <img src="http://jxmc.gitee.io/pinyougou/upload/bg_03.png" alt="">
        </div>
        <!-- 内容区域 因为没有高度记得清除浮动 -->
        <div class="sk_bd">
            <ul class="clearfix">
                <!-- 第1个 -->
                <li class="sk_goods">
                    <a href="javascript:;">
                        <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                        <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    </a>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第2个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第3个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第4个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第5个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第6个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第7个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第8个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第9个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第10个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第11个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
                <!-- 第12个 -->
                <li class="sk_goods">
                    <img src="http://jxmc.gitee.io/pinyougou/upload/mobile.jpg" alt="">
                    <h5 class="sk_goods_title">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信4G手机</h5>
                    <!-- 价格 -->
                    <p class="sk_goods_price">
                        <em>¥6088</em>
                        <del>¥6988</del>
                    </p>
                    <!-- 价格内容 -->
                    <div class="sk_goods_progress">
                        已售
                        <i>87%</i>
                        <!-- 样式条 -->
                        <div class="bar">
                            <div class="bar_in"></div>
                        </div>
                        剩余
                        <em>29</em>
                        件
                    </div>
                    <a href="javascript:;" class="sk_goods_buy">立即抢购</a>
                </li>
            </ul>
        </div>
        <!-- page 分页器 -->
        <div class="page">
            <!-- 分页器数字 -->
			<span class="page_num">
				<a href="#" class="pn_prev">&lt;&lt;上一页 </a>
				<a href="#">1</a>
				<a href="#" class="current">2</a>
				<a href="#">3</a>
				<a href="#">4</a>
				<a href="#">5</a>
				<a href="#" class="dotted">...</a>
				<a href="#" class="pn_next">下一页&gt;&gt;</a>
			</span>
			<span class="page_skip">
				共10页 到第
				<input type="text">
				页
				<button>确定</button>
			</span>                        
        </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 -------------------------------*/





/*---------------------------- list.css -------------------------------*/

/* 头部Logo 旁边的小字体 */
.sk {
    position: absolute;
    left: 190px;
    top: 40px;
    border-left: 1px solid #c81523;
    padding: 3px 0 0 14px;
}

/* 列表页头部导航栏 */
.nav {
    overflow: hidden;
    /* 因为右侧小li 行高超出了高度，但是小li 是浮动的，后面的文字会围绕，所以要切掉 */
}
/* 导航栏左侧区域 */
.sk_list {
    float: left;
}
.sk_list ul li {
    float: left;
}
.sk_list ul li a {
    display: block;
    line-height: 47px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 700;
    color: #000;
}
/* 导航栏右侧区域 */
.sk_con {
    float: left;
}
.sk_con ul li {
    float: left;
}
.sk_con ul li a {
    display: block;
    line-height: 49px;
    padding: 0 20px;
    font-size: 14px;
}
/* 最后一个小li 中的 a 后跟一个向下的箭头 */
.sk_con ul li:last-child a::after {
    /* content: '\e901'; */
    /* font-family: 'icomoon'; */
    content: '\2693';
    margin-left: 6px;
}

/* 列表页主体部分 */
/* .sk_container  */
.sk_bd {
    margin-top: 25px;
}
.sk_bd ul li {
    position: relative;
    float: left;
    width: 290px;
    height: 460px;
    margin-right: 13px;
    margin-bottom: 15px;
    /* 防止鼠标经过图片 不会抖动 */
    border: 1px solid transparent;
    overflow: hidden;
    transition: all .5s;
}
.sk_bd ul li:hover {
    border: 1px solid #c81523;
    transform: translateY(3px);
}
/* 让每列的第4个li 没有外边距 4的倍数 */
.sk_bd ul li:nth-child(4n) {
    margin-right: 0;
}
/* 价格标题 h5 */
.sk_goods_title {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    padding: 10px;
}
/* 价格内容区域 */
.sk_goods_price {
    padding: 0 10px;
}
/* 价格内容左边 */
.sk_goods_price em {
    font-size: 22px;
    color: #e60012;
}
/* 价格内容右边 */
.sk_goods_price del {
    font-size: 14px;
    font-weight: 700;
    color: #a4a4a4;
}
/* 价格底部 */
.sk_goods_progress {
    padding: 0 10px;
}
/* 价格底部数字改颜色 */
.sk_goods_progress em, 
.sk_goods_progress i {
    color: #f24349;
}
/* 价格样式条 */
.bar {
    display: inline-block;
    width: 130px;
    height: 10px;
    border: 1px solid #b1191a;
    vertical-align: middle;
    margin: 0 5px;
    border-radius: 5px;
}
/* 价格样式条里侧 */
.bar_in {
    width: 87%;
    height: 8px;
    background-color: #f24349;
    border-radius: 5px;
}
/* 立即抢购 */
.sk_goods_buy {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #b1191a;
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
}
/* page 分页器 */
.page {
    margin: 40px 0;
    text-align: center;
}
.page_num a {
	display: inline-block;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
}
/* page 上一页，下一页 */
.page_num .pn_prev,
.page_num .pn_next {
	width: 83px;
}
.page_num .dotted,
.page_num .current {
	border: 1px solid transparent;
	background-color: transparent;
}
.page_num .current:hover {
    color: #e33333;
}
.page_skip input {
	width: 46px;
	height: 36px;
	border: 1px solid #ccc;
	text-align: center;
	transition: all 0.3s;
}
/* 页码输入栏 */
.page_skip input:focus {
	width: 88px;
	border: 1px solid skyblue;
}
.page_skip button {
	width: 54px;
	height: 36px;
	border: 1px solid #ccc;
	background-color: #f7f7f7;
}