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>品优购欢迎你！ </li>
<li>
<a href="#">请登录</a>
<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> < </i></a>
<!-- 右按钮 -->
<a href="javascript:;" class="arrow-r"> <i> > </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;
}