文章目录
一、页面框架文件
1.1 首页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<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/index.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
<script>
// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()
</script>
</head>
<body>
<!-- (common 1)公共顶部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li><a href="login.html">请先登录</a></li>
<li><a href="register.html">免费注册</a></li>
<!-- 空链接 -->
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<!-- 页面不刷新 执行JS文件 -->
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">在线客服</a></li>
<!-- i 标签存放手机图片 -->
<li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li>
</ul>
</div>
</div>
<!-- (common 2)公共头部主导航 -->
<div class="xtx_header">
<div class="wrapper">
<!-- (2.1)网站 logo -->
<h1 class="xtx_logo"><a href="index.html">小兔鲜儿</a></h1>
<!-- (2.2)主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">生鲜</a></li>
<li><a href="product.html">美食</a></li>
<li><a href="product.html">餐厨</a></li>
<li><a href="product.html">电器</a></li>
<li><a href="product.html">居家</a></li>
<li><a href="product.html">洗护</a></li>
<li><a href="product.html">孕婴</a></li>
<li><a href="product.html">服装</a></li>
</ul>
</div>
<!-- (2.3)站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="#" class="xtx_search_cart sprites"><i>2</i></a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='#'">
</div>
</div>
</div>
</div>
<!-- (index 1)分类及焦点图 -->
<div class="xtx_entry">
<div class="wrapper">
<!-- (1.1)分类 -->
<div class="xtx_category">
<!-- 顶级分类 -->
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果</small>
<small>蔬菜</small>
</a>
<i class="sprites"></i>
</li>
<li class="active">
<a href="javascript:;">
美食
<small>面点</small>
<small>干果</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
电器
<small>数码产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
居家
<small>床品</small>
<small>四件套</small>
<small>被枕</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护</small>
<small>美妆</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉</small>
<small>玩具</small>
<small>辅食</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
餐橱
<small>餐橱产品</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
服饰
<small>女装</small>
<small>男装</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
杂货
<small>户外</small>
<small>图书</small>
</a>
<i class="sprites"></i>
</li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造</small>
</a>
<i class="sprites"></i>
</li>
</ul>
<!-- 子分类 -->
<div class="xtx_category_subset">
</div>
</div>
<!-- (1.2)焦点图 -->
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;"><img src="uploads/banner_1.png" alt=""></a>
</li>
</ul>
<!-- 切换按钮 -->
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
<!-- 指示器 -->
<div class="indicator">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</div>
<!-- (index 2)新鲜好物 -->
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<!-- (2.1)面板头部 -->
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱</small></h3>
<a href="#" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<!-- (2.2)商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8</span>
<span class="price"><small>￥</small>899</span>
</a>
<a href="javascript:;">
<img src="uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调</span>
<span class="price"><small>￥</small>1299</span>
</a>
<a href="javascript:;">
<img src="uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭</span>
<span class="price"><small>￥</small>129</span>
</a>
<a href="javascript:;">
<img src="uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表</span>
<span class="price"><small>￥</small>3399</span>
</a>
</div>
</div>
</div>
<!-- (index 3)人气推荐 -->
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<!-- (3.1)面板头部 -->
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过</small></h3>
</div>
<!-- (3.2)商品列表 -->
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="uploads/popular_1.jpg">
<span class="title">特惠推荐</span>
<span class="alt">我猜得到 你的需要</span>
</a>
<a href="javascript:;">
<img src="uploads/popular_2.jpg">
<span class="title">爆款推荐</span>
<span class="alt">人气好物推荐</span>
</a>
<a href="javascript:;">
<img src="uploads/popular_3.jpg">
<span class="title">场景使用一站买全</span>
<span class="alt">编辑精心整理推荐</span>
</a>
<a href="javascript:;">
<img src="uploads/popular_4.jpg">
<span class="title">领券中心</span>
<span class="alt">发现更多超值优惠券</span>
</a>
</div>
</div>
</div>
<!-- (index 4)热门品牌 -->
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<!-- (4.1)面板头部 -->
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证</small></h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites"></a>
<a href="javascript:;" class="next sprites"></a>
</div>
</div>
<!-- (4.2)商品列表 -->
<div class="xtx_goods">
<ul>
<li>
<a href="javascript:;"><img src="uploads/brand_goods_1.jpg" alt=""></a>
<a href="javascript:;"><img src="uploads/brand_goods_2.jpg" alt=""></a>
<a href="javascript:;"><img src="uploads/brand_goods_3.jpg" alt=""></a>
<a href="javascript:;"><img src="uploads/brand_goods_4.jpg" alt=""></a>
<a href="javascript:;"><img src="uploads/brand_goods_5.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
</div>
<!-- (index 5)分类商品 -->
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<!-- (5.1)生鲜 -->
<div class="xtx_panel_header">
<h3>生鲜</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- (5.1)商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;"><img src="uploads/fresh_goods_cover.jpg" alt=""></a>
<div class="label"><span>生鲜馆</span><span>全场3件8折</span></div>
</li>
<li>
<!-- 商品图片 1 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_1.jpg" alt=""></div>
</a>
<!-- 商品信息 1 -->
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 1 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 2 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_2.jpg" alt=""></div>
</a>
<!-- 商品信息 2 -->
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只</p>
<p class="flag">火锅食材</p>
<p class="price"><small>￥</small>71.9</p>
</div>
<!-- 其它 2 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 3 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_3.jpg" alt=""></div>
</a>
<!-- 商品信息 3 -->
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>49.9</p>
</div>
<!-- 其它 3 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 4 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_4.jpg" alt=""></div>
</a>
<!-- 商品信息 4 -->
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>899</p>
</div>
<!-- 其它 4 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 5 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_5.jpg" alt=""></div>
</a>
<!-- 商品信息 5 -->
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g </p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 5 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 6 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_6.jpg" alt=""></div>
</a>
<!-- 商品信息 6 -->
<div class="meta">
<p class="name">广西沃柑 柑橘1.5kg</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>59</p>
</div>
<!-- 其它 6 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 7 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_7.jpg" alt=""></div>
</a>
<!-- 商品信息 7 -->
<div class="meta">
<p class="name">进口 牛油果 6个装 单果重约130-180g</p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>39.9</p>
</div>
<!-- 其它 7 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 8 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/fresh_goods_8.jpg" alt=""></div>
</a>
<!-- 商品信息 8 -->
<div class="meta">
<p class="name">泰国进口山竹5A级 500g </p>
<p class="flag">新鲜水果</p>
<p class="price"><small>￥</small>29.9</p>
</div>
<!-- 其它 8 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- (5.2)服饰 -->
<div class="xtx_panel_header">
<h3>服饰</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">行李箱</a>
<a href="javascript:;">男士包袋</a>
<a href="javascript:;">女士包袋</a>
<a href="javascript:;">钱包及小提袋</a>
<a href="javascript:;">男鞋</a>
<a href="javascript:;">女鞋</a>
<a href="javascript:;">拖鞋</a>
</div>
</div>
<!-- (5.2)商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;"><img src="uploads/clothes_goods_cover.jpg" alt=""></a>
<div class="label">
<span>服饰馆</span>
<span>3折狂欢</span>
</div>
</li>
<li>
<!-- 商品图片 1 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_1.jpg" alt=""></div>
</a>
<!-- 商品信息 1 -->
<div class="meta">
<p class="name">人本秋季厚底帆布鞋 韩版低帮增高学生</p>
<p class="flag"></p>
<p class="price"><small>￥</small>55</p>
</div>
<!-- 其它 1 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 2 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_2.jpg" alt=""></div>
</a>
<!-- 商品信息 2 -->
<div class="meta">
<p class="name">迪士尼真皮针扣表带宽度 14-16mm规格双色压纹 女表带</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 2 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 3 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_3.jpg" alt=""></div>
</a>
<!-- 商品信息 3 -->
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装</p>
<p class="flag">海鲜水产</p>
<p class="price"><small>￥</small>209</p>
</div>
<!-- 其它 3 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 4 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_4.jpg" alt=""></div>
</a>
<!-- 商品信息 4 -->
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 4 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 5 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_5.jpg" alt=""></div>
</a>
<!-- 商品信息 5 -->
<div class="meta">
<p class="name">拉夫劳伦t恤男正品 </p>
<p class="flag">圆领短袖</p>
<p class="price"><small>￥</small>99</p>
</div>
<!-- 其它 5 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 6 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_6.jpg" alt=""></div>
</a>
<!-- 商品信息 6 -->
<div class="meta">
<p class="name">李宁跑步鞋男鞋空气 弧2018春季款</p>
<p class="flag"></p>
<p class="price"><small>￥</small>79</p>
</div>
<!-- 其它 6 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 7 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_7.jpg" alt=""></div>
</a>
<!-- 商品信息 7 -->
<div class="meta">
<p class="name">Dickies男鞋2020春季 英伦休闲工装鞋低帮</p>
<p class="flag"></p>
<p class="price"><small>￥</small>179</p>
</div>
<!-- 其它 7 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 8 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/clothes_goods_8.jpg" alt=""></div>
</a>
<!-- 商品信息 8 -->
<div class="meta">
<p class="name">北极绒春夏季纯棉背心 男士修身纯色打底</p>
<p class="flag"></p>
<p class="price"><small>￥</small>69</p>
</div>
<!-- 其它 8 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- (5.3)餐厨 -->
<div class="xtx_panel_header">
<h3>餐厨</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果</a>
<a href="javascript:;">蔬菜</a>
<a href="javascript:;">肉禽蛋</a>
<a href="javascript:;">裤装</a>
<a href="javascript:;">衬衫</a>
<a href="javascript:;">内衣</a>
</div>
</div>
<!-- (5.3)商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;"><img src="uploads/kitchen_goods_cover.jpg" alt=""></a>
<div class="label">
<span>餐厨馆</span>
<span>大额优惠<br>等你来拿</span>
</div>
</li>
<li>
<!-- 商品图片 1 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_1.jpg" alt=""></div>
</a>
<!-- 商品信息 1 -->
<div class="meta">
<p class="name">创意可爱不锈钢便携餐具 套装筷子便携三件套</p>
<p class="flag"></p>
<p class="price"><small>￥</small>5.9</p>
</div>
<!-- 其它 1 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 2 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_2.jpg" alt=""></div>
</a>
<!-- 商品信息 2 -->
<div class="meta">
<p class="name">三金西瓜霜竹炭牙刷软毛 成人家用家庭装</p>
<p class="flag"></p>
<p class="price"><small>￥</small>20.9</p>
</div>
<!-- 其它 2 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 3 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_3.jpg" alt=""></div>
</a>
<!-- 商品信息 3 -->
<div class="meta">
<p class="name">朴（TOPOTO）大卫免手 洗平板拖把拓扑懒人木地 板刮刮乐桶拖布</p>
<p class="flag"></p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 3 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 4 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_4.jpg" alt=""></div>
</a>
<!-- 商品信息 4 -->
<div class="meta">
<p class="name">ONLY夏季新款高腰宽松 七分阔腿裙裤休闲裤</p>
<p class="flag"></p>
<p class="price"><small>￥</small>274.5</p>
</div>
<!-- 其它 4 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 5 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_5.jpg" alt=""></div>
</a>
<!-- 商品信息 5 -->
<div class="meta">
<p class="name">金纺不伤手柔顺剂 妈妈的选择</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 6 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_6.jpg" alt=""></div>
</a>
<!-- 商品信息 6 -->
<div class="meta">
<p class="name">洁成绵柔抹布洗碗巾超 值5片装 洗锅刷碗</p>
<p class="flag"></p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 6 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 7 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_7.jpg" alt=""></div>
</a>
<!-- 商品信息 7 -->
<div class="meta">
<p class="name">大卫双驱动旋转拖把桶 免手洗拓扑拖布地拖墩布 </p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 7 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 8 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/kitchen_goods_8.jpg" alt=""></div>
</a>
<!-- 商品信息 8 -->
<div class="meta">
<p class="name">斧头牌（AXE）去污地板 清洁剂2L 柠檬清香 </p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
<!-- (5.4)居家 -->
<div class="xtx_panel_header">
<h3>居家</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
<div class="tabs-bar">
<a href="javascript:;" class="active">咖啡具</a>
<a href="javascript:;">水具酒具</a>
<a href="javascript:;">锅具</a>
<a href="javascript:;">餐具</a>
<a href="javascript:;">功能厨具</a>
<a href="javascript:;">茶具</a>
<a href="javascript:;">清洁保鲜</a>
</div>
</div>
<!-- (5.4)商品列表 -->
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;"><img src="uploads/home_goods_cover.jpg" alt=""></a>
<div class="label">
<span>居家馆</span>
<span>全场满减</span>
</div>
</li>
<li>
<!-- 商品图片 1 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_1.jpg" alt=""></div>
</a>
<!-- 商品信息 1 -->
<div class="meta">
<p class="name">菜鸟异常专用链接 非请 勿拍</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>8999</p>
</div>
<!-- 其它 1 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 2 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_2.jpg" alt=""></div>
</a>
<!-- 商品信息 2 -->
<div class="meta">
<p class="name">【中盐软水盐】汉斯希 尔家用软水机适配</p>
<p class="flag"></p>
<p class="price"><small>￥</small>65</p>
</div>
<!-- 其它 2 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 3 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_3.jpg" alt=""></div>
</a>
<!-- 商品信息 3 -->
<div class="meta">
<p class="name">云米净水壶家用直饮台式 净水机渗透过滤自来水</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 3 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 4 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_4.jpg" alt=""></div>
</a>
<!-- 商品信息 4 -->
<div class="meta">
<p class="name">ztk恒温调奶器配件玻璃壶 炖盅</p>
<p class="flag">海鲜年货</p>
<p class="price"><small>￥</small>129</p>
</div>
<!-- 其它 4 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 5 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_5.jpg" alt=""></div>
</a>
<!-- 商品信息 5 -->
<div class="meta">
<p class="name">荞麦枕头单人枕芯双人 护颈椎枕头芯</p>
<p class="flag"></p>
<p class="price"><small>￥</small>29</p>
</div>
<!-- 其它 5 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 6 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_6.jpg" alt=""></div>
</a>
<!-- 商品信息 6 -->
<div class="meta">
<p class="name">Bear/小熊 LLJ-B04G1 家用多功能切碎机 电动</p>
<p class="flag">料理机</p>
<p class="price"><small>￥</small>10.9</p>
</div>
<!-- 其它 6 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 7 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_7.jpg" alt=""></div>
</a>
<!-- 商品信息 7 -->
<div class="meta">
<p class="name">荣事达薄饼机春饼春卷皮 家用博饼机电饼铛 </p>
<p class="flag"></p>
<p class="price"><small>￥</small>159</p>
</div>
<!-- 其它 7 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
<li>
<!-- 商品图片 8 -->
<a href="javascript:;">
<div class="img-box"><img src="uploads/home_goods_8.jpg" alt=""></div>
</a>
<!-- 商品信息 8 -->
<div class="meta">
<p class="name">美式双人实木床 红实木 显档次</p>
<p class="flag"></p>
<p class="price"><small>￥</small>22.9</p>
</div>
<!-- 其它 -->
<div class="extra">
<a href="javascript:;">
<span>找相似</span>
<span>发现现多宝贝></span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- (index 6)最新主题 -->
<div class="xtx_goods_topic xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>最新专题</h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites"></i>
</a>
</div>
<div class="xtx_topic">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="uploads/topic_goods_1.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like"><i class="sprites"></i>1220</span>
<span class="view"><i class="sprites"></i>1800</span>
<span class="reply"><i class="sprites"></i>1220</span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="uploads/topic_goods_2.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like"><i class="sprites"></i>1220</span>
<span class="view"><i class="sprites"></i>1800</span>
<span class="reply"><i class="sprites"></i>1220</span>
</div>
</li>
<li>
<a href="javascript:;">
<img src="uploads/topic_goods_3.jpg" alt="">
<div class="meta">
<p class="title">
吃这些美食才不算辜负自己<small>餐厨起居洗护好物</small>
</p>
<span class="price"><small>￥</small>29.9起</span>
</div>
</a>
<div class="social">
<span class="like"><i class="sprites"></i>1220</span>
<span class="view"><i class="sprites"></i>1800</span>
<span class="reply"><i class="sprites"></i>1220</span>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- (common 3)公共底部 -->
<div class="xtx_footer clearfix">
<!-- (3.1)联系我们 -->
<div class="wrapper">
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode"><img src="uploads/qrcode.jpg"></dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- (3.2)其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
1.2 登录页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="shortcut icon" href="favicon.ico">
<!-- 基础样式 -->
<link rel="stylesheet" href="css/base.css">
<!-- 专属样式 -->
<link rel="stylesheet" href="css/login.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- (login 1)登录头部 -->
<div class="xtx-login-header">
<h1 class="logo"></h1>
<a class="home" href="index.html">进入网站首页</a>
</div>
<!-- (login 2)登录内容 -->
<div class="xtx-login-main">
<div class="wrapper">
<form action="">
<div class="box">
<div class="tab-nav">
<a href="javascript:;" class="active" data-id="0">账户登录</a>
<a href="javascript:;" data-id="1">二维码登录</a>
</div>
<!-- 手机登录展示 -->
<div class="tab-pane">
<div class="link"><a href="javascript:;">手机验证码登录</a></div>
<div class="input">
<span class="iconfont icon-zhanghao"></span>
<input required type="text" placeholder="请输入用户名称/手机号码" name="username">
</div>
<div class="input">
<span class="iconfont icon-suo"></span>
<input required type="password" placeholder="请输入密码" name="password">
</div>
<div class="agree">
<label for="my-checkbox">
<input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
<span class="iconfont icon-xuanze"></span>
</label>
我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
</div>
<div class="button clearfix">
<button type="submit" class="dl">登 录</button>
<a class="fl" href="#">忘记密码？</a>
<a class="fr" href="register.html">免费注册</a>
</div>
</div>
<!-- 二维码登录展示 -->
<div class="tab-pane" style="display: none;">
<img class="code" src="images/code.png" alt="">
</div>
</div>
</form>
</div>
</div>
<!-- (login 3)登录底部 -->
<div class="xtx-login-footer">
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
1.3 注册页
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<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/register.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
</head>
<body>
<!-- (common 1)公共顶部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li><a href="login.html">请先登录</a></li>
<li><a href="register.html">免费注册</a></li>
<!-- 空链接 -->
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<!-- 页面不刷新 执行JS文件 -->
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">在线客服</a></li>
<!-- i 标签存放手机图片 -->
<li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li>
</ul>
</div>
</div>
<!-- (common 2)公共头部主导航 -->
<div class="xtx_header">
<div class="wrapper">
<!-- (2.1)网站 logo -->
<h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
<!-- (2.2)主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li><a href="index.html">首页</a></li>
<li><a href="product.html">生鲜</a></li>
<li><a href="product.html">美食</a></li>
<li><a href="product.html">餐厨</a></li>
<li><a href="product.html">电器</a></li>
<li><a href="product.html">居家</a></li>
<li><a href="product.html">洗护</a></li>
<li><a href="product.html">孕婴</a></li>
<li><a href="product.html">服装</a></li>
</ul>
</div>
<!-- (2.3)站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="#" class="xtx_search_cart sprites"><i>2</i></a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='#'">
</div>
</div>
</div>
</div>
<!-- (register)注册页面 -->
<div class="xtx-wrapper">
<div class="container">
<!-- 卡片 -->
<div class="xtx-card">
<h3>新用户注册</h3>
<form class="xtx-form">
<div data-prop="username" class="xtx-form-item">
<span class="iconfont icon-zhanghao"></span>
<input name="username" type="text" placeholder="设置用户名称">
<span class="msg"></span>
</div>
<div data-prop="phone" class="xtx-form-item">
<span class="iconfont icon-shouji"></span>
<input name="phone" type="text" placeholder="输入手机号码">
<span class="msg"></span>
</div>
<div data-prop="code" class="xtx-form-item">
<span class="iconfont icon-zhibiaozhushibiaozhu"></span>
<input name="code" type="text" placeholder="短信验证码">
<span class="msg"></span>
<a class="code" href="javascript:;">发送验证码</a>
</div>
<div data-prop="password" class="xtx-form-item">
<span class="iconfont icon-suo"></span>
<input name="password" type="password" placeholder="设置6至20位字母、数字和符号组合">
<span class="msg"></span>
</div>
<div data-prop="confirm" class="xtx-form-item">
<span class="iconfont icon-suo"></span>
<input name="confirm" type="password" placeholder="请再次输入上面密码">
<span class="msg"></span>
</div>
<div class="xtx-form-item pl50">
<i class="iconfont icon-queren"></i>
已阅读并同意<i>《用户服务协议》</i>
</div>
<div class="xtx-form-item">
<button class="submit">下一步</button>
</div>
</form>
</div>
</div>
</div>
<!-- (common 3)公共底部 -->
<div class="xtx_footer clearfix">
<!-- (3.1)联系我们 -->
<div class="wrapper">
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode"><img src="uploads/qrcode.jpg"></dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- (3.2)其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
</body>
</html>
1.4 产品页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="fonts/iconfont.css">
<!-- 基础模块 -->
<link rel="stylesheet" href="css/base.css">
<!-- 公共模块 -->
<link rel="stylesheet" href="css/common.css">
<!-- 专属模块 -->
<link rel="stylesheet" href="css/product.css">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1939705_bgtmkonu28.css">
</head>
<body>
<!-- (common 1)公共顶部导航 -->
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li><a href="login.html">请先登录</a></li>
<li><a href="register.html">免费注册</a></li>
<!-- 空链接 -->
<li><a href="#">我的订单</a></li>
<li><a href="#">会员中心</a></li>
<!-- 页面不刷新 执行JS文件 -->
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">在线客服</a></li>
<!-- i 标签存放手机图片 -->
<li><a href="javascript:;"><i class="mobile sprites"></i>手机版</a></li>
</ul>
</div>
</div>
<!-- (common 2)公共头部主导航 -->
<div class="xtx_header">
<div class="wrapper">
<!-- (2.1)网站 logo -->
<h1 class="xtx_logo"><a href="index.html">小兔鲜儿</a></h1>
<!-- (2.2)主导航 -->
<div class="xtx_navs">
<ul class="clearfix">
<li><a href="index.html">首页</a></li>
<li><a href="producthtml">生鲜</a></li>
<li><a href="producthtml">美食</a></li>
<li><a href="producthtml">餐厨</a></li>
<li><a href="producthtml">电器</a></li>
<li><a href="producthtml">居家</a></li>
<li><a href="producthtml">洗护</a></li>
<li><a href="producthtml">孕婴</a></li>
<li><a href="producthtml">服装</a></li>
</ul>
</div>
<!-- (2.3)站内搜索 -->
<div class="xtx_search clearfix">
<!-- 购物车 -->
<a href="#" class="xtx_search_cart sprites"><i>2</i></a>
<!-- 搜索框 -->
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜" onclick="location.href='#'">
</div>
</div>
</div>
</div>
<!-- (product 1)头部 sticky 定位 -->
<div class="sticky">
<div class="header-sticky container">
<div class="sticky-logo">
<h1><a href="index.html"></a></h1>
</div>
<ul class="sticky-nav">
<li><a href="#">首页</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">服饰</a></li>
<li><a href="#">母婴</a></li>
<li><a href="#">个护</a></li>
<li><a href="#">严选</a></li>
<li><a href="#">数码</a></li>
<li><a href="#">运动</a></li>
<li><a href="#">杂项</a></li>
</ul>
<div class="sticky-right">
<a href="#">品牌</a>
<a href="#">专题</a>
</div>
</div>
</div>
<!-- (product 2)返回顶部 -->
<div class="backTop">
<i class="backIcon"></i>
<p>顶部</p>
</div>
<!-- (product 3)主体内容 -->
<div class="xtx-wrapper">
<div class="container">
<!-- (3.1)展示商品 -->
<div class="xtx-bread">
<a href="javascript:;"> 首页 > </a>
<a href="javascript:;"> 电子产品 > </a>
<a href="javascript:;"> 电视 > </a>
<span>小米电视4A 32英寸</span>
</div>
<!-- (3.1)商品信息 -->
<div class="xtx-product-info">
<!-- 左边 -->
<div class="left">
<div class="pictrue">
<div class="middle">
<img src="images/1.jpg" alt="">
<div class="layer"></div>
</div>
<div class="small">
<ul>
<li class="active"><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
</ul>
</div>
<div class="large"></div>
</div>
<div class="other">
<ul>
<li>
<p>销量人气</p>
<p>1999+</p>
<p>销量人气</p>
</li>
<li>
<p>商品评价</p>
<p>999+</p>
<p>查看评价</p>
</li>
<li>
<p>收藏人气</p>
<p>299+</p>
<p><a href="javascript:;">收藏商品</a></p>
</li>
<li>
<p>品牌信息</p>
<p>小米</p>
<p><a href="javascript:;">品牌主页</a></p>
</li>
</ul>
</div>
</div>
<!-- 右边 -->
<div class="right">
<h3 class="name">小米电视4A 32英寸</h3>
<p class="desc">全面屏设计 / 高清分辨率 / 海量内容 / 1G+4G大内存 / 多核处理器</p>
<p class="price"><span class="now">¥1899</span><span class="old">¥2999</span></p>
<div class="address">
<div class="item">
<div class="dt">促销</div>
<div class="dd">12月好物放送，App领券购买直降120元</div>
</div>
<div class="item">
<div class="dt">配送</div>
<div class="dd">至
<div class="box">
<span>陕西 西安 <i></i></span>
</div>
</div>
</div>
<div class="item">
<div class="dt">服务</div>
<div class="dd">
<span class="fw">无忧退货</span>
<span class="fw">快速退款</span>
<span class="fw">免费包邮</span>
<a href="#" class="lj">了解详情</a>
</div>
</div>
</div>
<div class="attrs">
<div class="item">
<div class="dt">颜色</div>
<div class="dd" id="color">
<img src="uploads/cate-01.png" alt="">
<img src="uploads/cate-02.png" alt="">
<img src="uploads/cate-03.png" alt="">
<img src="uploads/cate-04.png" alt="">
<img src="uploads/cate-05.png" alt="">
<img src="uploads/cate-06.png" alt="">
<img src="uploads/cate-07.png" alt="">
</div>
</div>
<div class="item">
<div class="dt">尺寸</div>
<div class="dd" id="size">
<span class="size">22英寸</span>
<span class="size">42英寸</span>
<span class="size">52英寸</span>
<span class="size">62英寸</span>
</div>
</div>
<div class="item">
<div class="dt">数量</div>
<div class="dd">
<div class="num">
<a href="javascript:;">-</a>
<input type="text" value="1">
<a href="javascript:;">+</a>
</div>
</div>
</div>
<div class="item">
<a class="buy" href="javascript:;">立即购买</a>
</div>
</div>
</div>
</div>
<!-- (3.2)同类产品推荐 -->
<div class="xtx-relevant-product">
<h3>同类产品推荐</h3>
<ul>
<li>
<a href="#">
<img src="uploads/history_goods_1.jpg" alt="">
<p class="name">USB Type C数据线</p>
<p class="desc">快速充电，稳定传输</p>
<p class="price">¥39</p>
</a>
</li>
<li>
<a href="#">
<img src="uploads/history_goods_2.jpg" alt="">
<p class="name">红米Note 5A 高配版</p>
<p class="desc">1600万像素柔光自拍</p>
<p class="price">¥1899</p>
</a>
</li>
<li>
<a href="#">
<img src="uploads/history_goods_3.jpg" alt="">
<p class="name">VGA网口多功能转接器</p>
<p class="desc">小巧便携，节省桌面空间</p>
<p class="price">¥19</p>
</a>
</li>
<li>
<a href="#">
<img src="uploads/history_goods_4.jpg" alt="">
<p class="name">笔记本Pro 15.6"</p>
<p class="desc">全金属强化机身搭配独显</p>
<p class="price">¥4899</p>
</a>
</li>
</ul>
<a href="javascript:;" class="prev"><span class="iconfont icon-angle-left"></span></a>
<a href="javascript:;" class="next"><span class="iconfont icon-angle-right"></span></a>
</div>
<!-- (3.2)商品详情 -->
<div class="xtx-product-detail">
<!-- 主展示栏 -->
<div class="main">
<!-- 商品详情 -->
<div class="cont">
<div class="tab-head">
<a href="javascript:;" class="active" data-id="2">商品详情</a>
<a href="javascript:;" data-id="3">商品评价<span>（998+）</span></a>
</div>
<div class="tab-pane" style="display: block;">
<!-- 静态属性 -->
<div class="attrs">
<div class="item"><span>商品名称：</span><span>小米L32M5-AZ </span></div>
<div class="item"><span>商品编号：</span><span>4620979 </span></div>
<div class="item"><span>商品毛重：</span><span>8.0kg </span></div>
<div class="item"><span>商品产地：</span><span>中国大陆 </span></div>
<div class="item"><span>屏幕尺寸：</span><span>32英寸及以下 </span></div>
<div class="item"><span>能效等级：</span><span>三级能效 </span></div>
<div class="item"><span>电视类型：</span><span>人工智能 </span></div>
<div class="item"><span>选购指数：</span><span>6.9-6.0 </span></div>
<div class="item"><span>观看距离：</span><span>2m以下（≤32英寸）</span></div>
</div>
<!-- 详情内容 -->
<div class="detail">
<img src="https://yanxuan-item.nosdn.127.net/39d7f2407c90d0442566a719146ee9c1.jpg" alt="">
<img src="https://yanxuan-item.nosdn.127.net/7dfee58e7c6b3996badf368610ed62b1.jpg" alt="">
<img src="https://yanxuan-item.nosdn.127.net/d1acff1a29bddd21c2ad337d892a9f7c.jpg" alt="">
<img src="https://yanxuan-item.nosdn.127.net/ac722b04b2014ac337d8db695ee46f0c.jpg" alt="">
<img src="https://yanxuan-item.nosdn.127.net/c63e36faa0848ee37c825897f5cec179.jpg" alt="">
<img src="https://yanxuan-item.nosdn.127.net/e0f13dbf14c8a2f07e86bf3df3ca002b.jpg" alt="">
</div>
</div>
<div class="tab-pane" style="display: none;">
<div class="goods-tabs">
<div class="tabs-hd">
<span>排序：</span>
<ul>
<li class="active"><a href="#">默认</a></li>
<li><a href="#">最新</a></li>
<li><a href="#">最热</a></li>
</ul>
</div>
<div class="tabs-bd">
<!-- 默认评论模块 -->
<div class="tabs tabs-default show">
<!-- tabs-item 每一个评论列表 -->
<div class="tabs-item">
<div class="userInfo">
<span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
<span class="username">兔****y</span>
</div>
<div class="tbs-body">
<div class="score">
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing1"></i>
<i class="iconfont icon-xingxing1"></i>
<span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
</div>
<div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
<div class="comment-image">
<div class="list">
<a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a>
</div>
</div>
<div class="time">
<span>2021-04-03 13:20:32</span>
<span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
</div>
</div>
</div>
<!-- tabs-item 每一个评论列表 -->
<div class="tabs-item">
<div class="userInfo">
<span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
<span class="username">兔****y</span>
</div>
<div class="tbs-body">
<div class="score">
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing1"></i>
<i class="iconfont icon-xingxing1"></i>
<span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
</div>
<div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
<div class="comment-image">
<div class="list">
<a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a>
</div>
</div>
<div class="time">
<span>2021-04-03 13:20:32</span>
<span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
</div>
</div>
</div>
<!-- tabs-item 每一个评论列表 -->
<div class="tabs-item">
<div class="userInfo">
<span class="userpic"><img src="./uploads/avatar_1.png" alt=""></span>
<span class="username">兔****y</span>
</div>
<div class="tbs-body">
<div class="score">
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing"></i>
<i class="iconfont icon-xingxing1"></i>
<i class="iconfont icon-xingxing1"></i>
<span class="attr">颜色：白色 尺寸：10cm 产地：美国</span>
</div>
<div class="text">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
<div class="comment-image">
<div class="list">
<a class="" href="javascript:;"><img src="./uploads/1.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/2.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/3.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/4.webp" alt=""></a>
<a class="" href="javascript:;"><img src="./uploads/5.webp" alt=""></a>
</div>
</div>
<div class="time">
<span>2021-04-03 13:20:32</span>
<span class="zan"><i class="iconfont icon-dianzan"></i>74</span>
</div>
</div>
</div>
</div>
<!-- 最新评论模块 -->
<div class="tabs tabs-new"></div>
<!-- 最热评论模块 -->
<div class="tabs tabs-hot"></div>
</div>
<!-- 翻页 -->
<div class="xtx-pagination">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 注意事项 -->
<div class="warn">
<h3>注意事项</h3>
<p class="tit">• 购买运费如何收取？</p>
<p>
单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。
（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
</p>
<br><br>
<p class="tit">• 使用什么快递发货? </p>
<p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
<p>配送范围覆盖全国大部分地区(港澳台地区除外）。</p>
<br><br>
<p class="tit">• 如何申请退货? </p>
<p>1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
<p>2.内裤和食品等特殊商品无质量问题不支持退货； </p>
<p>3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
<p>4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。</p>
</div>
</div>
<!-- 侧展示栏 -->
<div class="aside">
<div class="tit">24小时热销榜</div>
<div class="product">
<img src="./uploads/fresh_goods_1.jpg" alt="">
<p class="name">USB Type C数据线</p>
<p class="desc">快速充电，稳定传输</p>
<p class="price">¥29</p>
</div>
<div class="product">
<img src="./uploads/fresh_goods_2.jpg" alt="">
<p class="name">USB Type C数据线</p>
<p class="desc">快速充电，稳定传输</p>
<p class="price">¥29</p>
</div>
<div class="product">
<img src="./uploads/fresh_goods_3.jpg" alt="">
<p class="name">USB Type C数据线</p>
<p class="desc">快速充电，稳定传输</p>
<p class="price">¥29</p>
</div>
<div class="tit">专题推荐</div>
<div class="special">
<img src="uploads/discuss_goods_1.jpg" alt="">
<p class="name">一往无前，诞生于崛起</p>
</div>
<div class="special">
<img src="uploads/discuss_goods_2.jpg" alt="">
<p class="name">一往无前，诞生于崛起</p>
</div>
<div class="special">
<img src="uploads/discuss_goods_3.jpg" alt="">
<p class="name">一往无前，诞生于崛起</p>
</div>
</div>
</div>
</div>
</div>
<!-- (common 3)公共底部 -->
<div class="xtx_footer clearfix">
<!-- (3.1)联系我们 -->
<div class="wrapper">
<div class="contact clearfix">
<dl>
<dt>客户服务</dt>
<dd class="chat">在线客服</dd>
<dd class="feedback">问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd class="weixin">公众号</dd>
<dd class="weibo">微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode"><img src="uploads/qrcode.jpg"></dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">
400-0000-000
<small>周一至周日 8:00-18:00</small>
</dd>
</dl>
</div>
</div>
<!-- (3.2)其它 -->
<div class="extra">
<div class="wrapper">
<!-- 口号 -->
<div class="slogan">
<a href="javascript:;" class="price">价格亲民</a>
<a href="javascript:;" class="express">物流快捷</a>
<a href="javascript:;" class="quality">品质新鲜</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</div>
<script src="js/product.js"></script>
</body>
</html>
二、样式文件
2.1 基础样式
@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* (1)Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* (2)Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* (3)Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* (4)Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* (5)Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* (6)Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
overflow: visible;
/* 1 */
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
text-transform: none;
/* 1 */
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
appearance: none;
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
appearance: none;
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* (7)Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* (8)Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* (9)Other common format
========================================================================== */
* {
box-sizing: border-box;
}
body {
color: #333;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
}
ul,
h1,
h3,
h4,
p,
dl,
dd {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
i {
font-style: normal;
}
input {
outline: none;
padding: 0;
border: none;
}
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
ul {
list-style: none;
}
button {
border: none;
padding: 0;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.wrapper {
width: 1240px;
margin: 0 auto;
}
.sprites {
background-image: url(../images/sprites.png);
background-size: 400px 400px;
background-repeat: no-repeat;
}
.fl {
float: left;
}
.fr {
float: right;
}
.tc {
text-align: center;
}
.green {
color: #27BA9B;
}
.red {
color: #CF4444;
}
.mb10 {
margin-bottom: 10px;
}
.fz20 {
font-size: 20px;
}
.fz18 {
font-size: 18px;
}
.fz16 {
font-size: 16px;
}
2.2 共用样式
/** (1)顶部导航 **/
.xtx_topnav {
background-color: #333;
}
.xtx_topnav .xtx_navs {
height: 53px;
text-align: right;
line-height: 53px;
font-size: 0;
}
.xtx_topnav .xtx_navs li {
display: inline-block;
font-size: 14px;
}
.xtx_topnav .xtx_navs li:last-child a {
border-right: none;
}
.xtx_topnav .xtx_navs .mobile {
display: inline-block;
width: 20px;
height: 16px;
position: relative;
top: 3px;
background-position: -160px -70px;
}
.xtx_topnav .xtx_navs a {
display: inline-block;
line-height: 1;
padding: 0 15px;
border-right: 2px solid #666666;
color: #dcdcdc;
}
.xtx_topnav .xtx_navs a:hover {
color: #27BA9B;
}
/** (2)头部主导航 **/
.xtx_header .wrapper {
display: flex;
align-items: center;
}
.xtx_header .xtx_logo {
width: 200px;
height: 132px;
text-indent: -999px;
background-image: url(../images/logo.png);
background-size: contain;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: 20px;
}
.xtx_header .xtx_navs {
padding-left: 50px;
}
.xtx_header .xtx_navs li {
line-height: 1;
font-size: 16px;
margin-right: 50px;
position: relative;
float: left;
}
.xtx_header .xtx_navs li:after {
content: '';
display: none;
width: 30px;
height: 2px;
background-color: #27BA9B;
position: absolute;
left: 1px;
bottom: -7px;
}
.xtx_header .xtx_navs li:hover a,
.xtx_header .xtx_navs li.active a {
color: #27BA9B;
}
.xtx_header .xtx_navs li:hover:after,
.xtx_header .xtx_navs li.active:after {
display: block;
}
.xtx_header .xtx_search {
height: 38px;
padding-left: 20px;
}
.xtx_header .xtx_search_wrapper {
width: 175px;
height: 38px;
padding-left: 39px;
border-bottom: 1px solid #e7e7e7;
position: relative;
float: right;
}
.xtx_header .xtx_search_wrapper:before {
content: '';
display: block;
width: 17px;
height: 17px;
position: absolute;
left: 5px;
top: 10px;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
background-position: -80px -70px;
}
.xtx_header .xtx_search_wrapper input {
width: 100%;
height: 100%;
font-size: 15px;
color: #999;
}
.xtx_header .xtx_search_wrapper input::-webkit-input-placeholder {
color: #ccc;
}
.xtx_header .xtx_search_cart {
display: block;
width: 22px;
height: 22px;
position: relative;
margin: 8px 12px 0 12px;
float: right;
background-position: -120px -70px;
}
.xtx_header .xtx_search_cart i {
position: absolute;
top: -5px;
left: 16px;
line-height: 1;
padding: 1px 6px;
font-style: normal;
font-size: 13px;
background-color: #E26237;
border-radius: 15px;
color: #fff;
}
/** (3)公共底部 **/
/* (3.1)联系我们 */
.xtx_footer .contact {
padding: 60px 0 40px 25px;
}
.xtx_footer .contact dl {
height: 150px;
text-align: center;
padding: 0 72px;
border-right: 1px solid #f2f2f2;
color: #999;
float: left;
}
.xtx_footer .contact dl:first-child {
padding-left: 0;
}
.xtx_footer .contact dl:last-child {
border-right: none;
padding-right: 0;
}
.xtx_footer .contact dt {
line-height: 1;
font-size: 18px;
}
.xtx_footer .contact dd {
margin: 36px 12px 0 0;
float: left;
}
.xtx_footer .contact dd:last-child {
margin-right: 0;
}
.xtx_footer .contact .chat,
.xtx_footer .contact .feedback,
.xtx_footer .contact .weixin,
.xtx_footer .contact .weibo {
width: 92px;
height: 92px;
padding-top: 20px;
border: 1px solid #ededed;
}
.xtx_footer .contact .chat:before,
.xtx_footer .contact .feedback:before,
.xtx_footer .contact .weixin:before,
.xtx_footer .contact .weibo:before {
content: '';
display: block;
width: 40px;
height: 30px;
margin: 0 auto 8px;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
}
.xtx_footer .contact .chat:before {
background-position: -245px -70px;
}
.xtx_footer .contact .chat:hover:before {
background-position: -200px -70px;
}
.xtx_footer .contact .feedback:before {
background-position: -345px -70px;
}
.xtx_footer .contact .feedback:hover:before {
background-position: -295px -70px;
}
.xtx_footer .contact .weixin:before {
background-position: -247px -15px;
}
.xtx_footer .contact .weixin:hover:before {
background-position: -202px -15px;
}
.xtx_footer .contact .weibo:before {
background-position: -347px -15px;
}
.xtx_footer .contact .weibo:hover:before {
background-position: -297px -15px;
}
.xtx_footer .contact .qrcode {
width: 92px;
height: 92px;
padding: 7px;
border: 1px solid #ededed;
}
.xtx_footer .contact .download {
padding-top: 5px;
font-size: 14px;
}
.xtx_footer .contact .download span {
display: block;
}
.xtx_footer .contact .download a {
display: block;
line-height: 1;
padding: 10px 25px;
margin-top: 5px;
color: #fff;
border-radius: 2px;
background-color: #27BA9B;
}
.xtx_footer .contact .hotline {
padding-top: 20px;
font-size: 22px;
color: #666;
}
.xtx_footer .contact .hotline small {
display: block;
font-size: 15px;
color: #999;
}
/* (3.2)其他 */
.xtx_footer .extra {
background-color: #333;
}
.xtx_footer .slogan {
height: 140px;
line-height: 58px;
padding: 40px 100px;
border-bottom: 1px solid #434343;
text-align: justify;
}
.xtx_footer .slogan:after {
content: '';
display: inline-block;
width: 100%;
height: 0;
}
.xtx_footer .slogan a {
display: inline-block;
height: 58px;
line-height: 58px;
color: #fff;
font-size: 28px;
}
.xtx_footer .slogan a:before {
content: '';
width: 58px;
height: 58px;
margin-right: 10px;
float: left;
background-image: url(../images/sprites.png);
background-size: 400px 400px;
}
.xtx_footer .slogan .price:before {
background-position: 0 0;
}
.xtx_footer .slogan .express:before {
background-position: -65px 0;
}
.xtx_footer .slogan .quality:before {
background-position: -130px 0;
}
.xtx_footer .copyright {
height: 120px;
padding-top: 40px;
text-align: center;
color: #999;
font-size: 15px;
}
.xtx_footer .copyright p {
line-height: 1;
margin-bottom: 20px;
}
.xtx_footer .copyright a {
color: #999;
line-height: 1;
padding: 0 10px 0 6px;
border-right: 1px solid #999;
}
.xtx_footer .copyright a:last-child {
border-right: none;
}
2.3 首页样式
@charset "UTF-8";
/** (1)分类及焦点图 **/
.xtx_entry {
height: 500px;
background-color: #f2f2f2;
position: relative;
}
.xtx_category {
width: 250px;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 9;
}
.xtx_category:hover .xtx_category_subset {
display: block;
}
.xtx_category_super li {
height: 50px;
padding: 0 20px 0 40px;
transition: background-color 0.25s;
cursor: pointer;
}
.xtx_category_super li:hover,
.xtx_category_super li.active {
background-color: #27BA9B;
}
.xtx_category_super a {
color: #fff;
font-size: 16px;
line-height: 50px;
}
.xtx_category_super a small {
font-size: 14px;
}
.xtx_category_super i {
display: block;
width: 12px;
height: 12px;
margin-top: 20px;
background-position: -75px -110px;
float: right;
}
.xtx_category_subset {
width: 990px;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
display: none;
position: absolute;
top: 0;
left: 250px;
}
.xtx_banner {
width: 1240px;
height: 500px;
overflow: hidden;
position: relative;
}
.xtx_banner:hover a {
opacity: 1;
}
.xtx_banner>a {
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
margin-top: -22px;
opacity: 0;
transition: opacity 0.5s;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
}
.xtx_banner>a.prev {
left: 270px;
background-position: 14px -59px;
}
.xtx_banner>a.next {
right: 20px;
background-position: -24px -59px;
}
.xtx_banner .indicator {
width: 990px;
text-align: center;
font-size: 0;
position: absolute;
left: 250px;
bottom: 22px;
}
.xtx_banner .indicator span {
display: inline-block;
width: 9px;
height: 9px;
margin: 0 8px;
cursor: pointer;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.43);
}
.xtx_banner .indicator span.active {
background-color: black;
}
/** (通用)公共面板 **/
/* (通用 1)头部模块 1 */
.xtx_panel .xtx_panel_header {
height: 115px;
padding: 40px 0;
}
.xtx_panel .xtx_panel_header h3 {
height: 35px;
line-height: 35px;
margin-left: 6px;
font-size: 32px;
font-weight: 400;
color: #333;
float: left;
}
.xtx_panel .xtx_panel_header small {
margin-left: 22px;
font-size: 16px;
color: #999;
}
.xtx_panel .xtx_panel_header .more {
line-height: 1;
margin-top: 14px;
font-size: 16px;
color: #999;
float: right;
}
.xtx_panel .xtx_panel_header .more i {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
top: 1px;
background-position: 8px -106px;
}
/* (通用 2)头部模块 2 */
.xtx_panel .xtx_panel_header .tabs-bar {
height: 35px;
padding-top: 13px;
font-size: 16px;
margin-right: 80px;
float: right;
}
.xtx_panel .xtx_panel_header .tabs-bar a {
padding: 2px 8px;
margin-left: 5px;
border-radius: 2px;
}
.xtx_panel .xtx_panel_header .tabs-bar a:hover,
.xtx_panel .xtx_panel_header .tabs-bar a.active {
background-color: #27BA9B;
color: #fff;
}
/* (通用 3)主体模块 1 */
.xtx_panel .xtx_panel_goods_1 {
text-align: justify;
font-size: 0;
}
.xtx_panel .xtx_panel_goods_1:after {
content: "";
display: inline-block;
width: 306px;
height: 0;
}
.xtx_panel .xtx_panel_goods_1 a {
display: inline-block;
width: 306px;
height: 406px;
text-align: center;
}
.xtx_panel .xtx_panel_goods_1 img {
width: 306px;
height: 306px;
}
/* (通用 4)主体模块 2 */
.xtx_panel .xtx_panel_goods_2 {
height: 610px;
}
.xtx_panel .xtx_panel_goods_2 li {
width: 240px;
height: 300px;
padding-top: 10px;
margin-left: 10px;
background-color: #fff;
border: 1px solid #fff;
overflow: hidden;
transition: 0.3s;
position: relative;
float: left;
}
.xtx_panel .xtx_panel_goods_2 li:hover {
border-color: #27BA9B;
}
.xtx_panel .xtx_panel_goods_2 li:hover .extra {
bottom: 0;
}
.xtx_panel .xtx_panel_goods_2 li:first-child {
height: 610px;
padding-top: 0;
margin-left: 0;
border: 0;
}
.xtx_panel .xtx_panel_goods_2 li:nth-last-child(-n + 4) {
margin-top: 10px;
}
.xtx_panel .xtx_panel_goods_2 a {
display: block;
}
.xtx_panel .xtx_panel_goods_2 .img-box {
width: 240px;
height: 160px;
padding: 0 33px;
text-align: center;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
.xtx_panel .xtx_panel_goods_2 .meta {
height: 130px;
line-height: 1.3;
padding: 10px 22px 0;
font-size: 19px;
position: relative;
}
.xtx_panel .xtx_panel_goods_2 .name {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
}
.xtx_panel .xtx_panel_goods_2 .price {
font-size: 22px;
color: #CF4444;
position: absolute;
bottom: 10px;
}
.xtx_panel .xtx_panel_goods_2 .price small {
font-size: 17px;
}
.xtx_panel .xtx_panel_goods_2 .extra {
width: 100%;
height: 86px;
padding-top: 10px;
transition: bottom 0.3s;
background-color: #27BA9B;
position: absolute;
bottom: -86px;
}
.xtx_panel .xtx_panel_goods_2 .extra span {
display: block;
width: 124px;
line-height: 1;
padding: 9px 0 8px;
margin: 0 auto;
text-align: center;
font-size: 19px;
color: #fff;
}
.xtx_panel .xtx_panel_goods_2 .extra span:last-child {
font-size: 13px;
border-top: 1px solid #fff;
}
.xtx_panel .xtx_panel_goods_2 .label {
position: absolute;
left: 0;
bottom: 266px;
width: 188px;
height: 66px;
text-align: center;
line-height: 66px;
color: #fff;
font-size: 17px;
border-radius: 0 2px 2px 0;
background-color: rgba(0, 0, 0, 0.8);
position: relative;
}
.xtx_panel .xtx_panel_goods_2 .label span:first-child {
display: block;
width: 76px;
background-color: #000;
}
.xtx_panel .xtx_panel_goods_2 .label span:last-child {
width: 112px;
line-height: 1.4;
transform: translate(0, -50%);
position: absolute;
left: 76px;
right: 0;
top: 50%;
}
/** (2)新鲜好物 **/
.xtx_goods_new .xtx_panel_goods_1 a {
background-color: #f0f9f4;
transition: 0.5s;
position: relative;
top: 0;
}
.xtx_goods_new .xtx_panel_goods_1 a:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
top: -3px;
}
.xtx_goods_new .xtx_panel_goods_1 .name {
display: inline-block;
width: 100%;
margin: 12px 0 10px;
font-size: 22px;
}
.xtx_goods_new .xtx_panel_goods_1 .price {
font-size: 23px;
color: #CF4444;
}
.xtx_goods_new .xtx_panel_goods_1 small {
font-size: 16px;
}
/** (3)人气推荐 **/
.xtx_goods_popular {
padding-bottom: 42px;
}
.xtx_goods_popular .xtx_panel_goods_1 a {
transition: 0.5s;
}
.xtx_goods_popular .xtx_panel_goods_1 a:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
}
.xtx_goods_popular .xtx_panel_goods_1 .title {
display: inline-block;
width: 100%;
line-height: 1;
margin: 20px 0 16px;
font-size: 22px;
}
.xtx_goods_popular .xtx_panel_goods_1 .alt {
font-size: 18px;
color: #999;
}
/** (4)热门品牌 **/
.xtx_goods_brand {
padding-bottom: 32px;
background-color: #f5f5f5;
}
.xtx_goods_brand .page-bar {
float: right;
}
.xtx_goods_brand .page-bar a {
display: inline-block;
width: 20px;
height: 20px;
line-height: 1;
margin-top: 10px;
background-color: #e2e2e2;
}
.xtx_goods_brand .page-bar a:hover,
.xtx_goods_brand .page-bar a.active {
background-color: #27BA9B;
}
.xtx_goods_brand .page-bar .prev {
margin-right: 5px;
background-position: -32px -106px;
transform: rotate(180deg);
}
.xtx_goods_brand .page-bar .next {
background-position: -32px -106px;
}
.xtx_goods_brand .xtx_goods {
height: 305px;
}
.xtx_goods_brand .xtx_goods li {
float: left;
font-size: 0;
}
.xtx_goods_brand .xtx_goods a {
margin-right: 10px;
}
.xtx_goods_brand .xtx_goods a img {
width: 240px;
height: 305px;
}
.xtx_goods_brand .xtx_goods a:last-child {
margin-right: 0;
}
/** (5)分类商品 **/
.xtx_goods_category {
padding-bottom: 80px;
}
/** (6)最新主题 **/
.xtx_goods_topic {
background-color: #f5f5f5;
padding-bottom: 52px;
}
.xtx_goods_topic li {
width: 406px;
margin-left: 11px;
transition: 0.5s;
float: left;
background: white;
}
.xtx_goods_topic li:hover {
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
transform: translate(0, -3px);
}
.xtx_goods_topic li:first-child {
margin-left: 0;
}
.xtx_goods_topic li a {
display: block;
height: 287px;
position: relative;
}
.xtx_goods_topic .meta {
width: 100%;
height: 100%;
color: #fff;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 50%);
position: absolute;
bottom: 0;
}
.xtx_goods_topic .meta .title {
height: 70px;
padding-left: 16px;
font-size: 22px;
position: absolute;
bottom: 0px;
}
.xtx_goods_topic .meta .title small {
display: block;
font-size: 19px;
color: #999;
}
.xtx_goods_topic .meta .price {
position: absolute;
bottom: 25px;
right: 16px;
display: block;
line-height: 1;
padding: 4px 8px 4px 7px;
color: #CF4444;
font-size: 17px;
background-color: #fff;
border-radius: 2px;
}
.xtx_goods_topic .meta .price small {
font-size: 15px;
}
.xtx_goods_topic .social {
height: 70px;
line-height: 70px;
padding: 0 20px;
font-size: 16px;
}
.xtx_goods_topic .social i {
display: inline-block;
width: 15px;
height: 14px;
margin-right: 5px;
position: relative;
top: 2px;
}
.xtx_goods_topic .social .like,
.xtx_goods_topic .social .liked,
.xtx_goods_topic .social .view {
float: left;
margin-right: 25px;
}
.xtx_goods_topic .social .reply {
float: right;
}
.xtx_goods_topic .social .like i {
background-position: -120px -110px;
}
.xtx_goods_topic .social .liked i {
background-position: -240px -110px;
}
.xtx_goods_topic .social .view i {
background-position: -160px -110px;
}
.xtx_goods_topic .social .reply i {
width: 17px;
height: 16px;
top: 4px;
background-position: -200px -110px;
}
2.4 登录页样式
/* (1)登录头部 */
.xtx-login-header {
width: 1170px;
height: 100px;
margin: 0 auto;
}
.xtx-login-header .logo {
width: 200px;
height: 100px;
text-indent: -999px;
background-image: url(../images/logo.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
float: left;
}
.xtx-login-header .home {
float: right;
margin-top: 50px;
font-size: 16px;
padding-right: 24px;
background: url(../images/login-enter.png) no-repeat right;
}
/* (2)登录内容 */
.xtx-login-main {
height: 488px;
background: url(../images/login-bg.png) no-repeat center/cover;
}
.xtx-login-main .wrapper {
width: 1170px;
height: 100%;
margin: 0 auto;
position: relative;
}
.xtx-login-main .wrapper .box {
width: 380px;
box-shadow: 0px 0px 25px 0px rgba(3, 3, 3, 0.14);
position: absolute;
top: 60px;
right: 100px;
background: #fff;
padding: 20px 40px;
}
.xtx-login-main .wrapper .box .tab-nav {
display: flex;
justify-content: space-between;
position: relative;
}
.xtx-login-main .wrapper .box .tab-nav::before {
content: "";
position: absolute;
left: 50%;
top: 8px;
width: 1px;
height: 20px;
background: #ededed;
}
.xtx-login-main .wrapper .box .tab-nav a {
font-size: 18px;
height: 35px;
line-height: 35px;
}
.xtx-login-main .wrapper .box .tab-nav a.active {
border-bottom: 2px solid #17bb9b;
}
.xtx-login-main .wrapper .box .tab-pane .code {
display: block;
margin: 44px auto;
}
.xtx-login-main .wrapper .box .tab-pane .link {
text-align: right;
padding-top: 12px;
}
.xtx-login-main .wrapper .box .tab-pane .link a {
color: #17bb9b;
}
.xtx-login-main .wrapper .box .tab-pane .input {
border: 1px solid #17bb9b;
width: 100%;
height: 36px;
margin-top: 17px;
display: flex;
background: #CFCDCD;
}
.xtx-login-main .wrapper .box .tab-pane .input .iconfont {
color: #fff;
width: 34px;
height: 34px;
text-align: center;
line-height: 34px;
font-size: 20px;
}
.xtx-login-main .wrapper .box .tab-pane .input input {
flex: 1;
padding-left: 15px;
background: #fff;
}
.xtx-login-main .wrapper .box .tab-pane .input input::placeholder {
color: #B3B3B3 !important;
}
.xtx-login-main .wrapper .box .tab-pane .agree {
color: #B3B3B3;
padding: 17px 0;
}
.xtx-login-main .wrapper .box .tab-pane .agree a {
color: #0673B1;
}
.xtx-login-main .wrapper .box .tab-pane .agree > label input:checked + span {
color: #17bb9b;
}
.xtx-login-main .wrapper .box .tab-pane .button {
margin-bottom: 15px;
}
.xtx-login-main .wrapper .box .tab-pane .button .dl {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: #17bb9b;
color: #fff;
display: block;
font-size: 16px;
margin-bottom: 17px;
}
/* (3)登录底部 */
.xtx-login-footer .copyright {
height: 115px;
padding-top: 40px;
text-align: center;
color: #999;
font-size: 15px;
}
.xtx-login-footer .copyright p {
line-height: 1;
margin-bottom: 20px;
}
.xtx-login-footer .copyright a {
color: #999;
line-height: 1;
padding: 0 10px 0 6px;
border-right: 1px solid #999;
}
.xtx-login-footer .copyright a:last-child {
border-right: none;
}
2.5 注册页样式
.xtx-wrapper {
background: #f5f5f5;
line-height: 1.4;
}
.xtx-wrapper .container {
width: 1240px;
margin: 0 auto;
padding: 20px 0;
}
.xtx-card {
width: 100%;
height: 600px;
background: #fff;
}
.xtx-card h3 {
font-size: 26px;
font-weight: normal;
color: #999999;
padding-left: 50px;
height: 100px;
line-height: 100px;
}
.xtx-form {
padding-left: 460px;
}
.xtx-form .xtx-form-item {
position: relative;
padding-bottom: 24px;
}
.xtx-form .xtx-form-item .msg {
color: #ff4d4f;
position: absolute;
left: 2px;
bottom: 2px;
}
.xtx-form .xtx-form-item.pl50 {
padding-left: 40px;
cursor: pointer;
}
.xtx-form .xtx-form-item span.iconfont {
position: absolute;
left: 15px;
top: 13px;
color: #666;
font-size: 18px;
}
.xtx-form .xtx-form-item i {
color: #27BA9B;
font-size: 14px;
}
.xtx-form .xtx-form-item input {
width: 300px;
height: 50px;
border: 1px solid #e4e4e4;
padding-left: 40px;
}
.xtx-form .xtx-form-item.error input {
border-color: #ff4d4f;
}
.xtx-form .xtx-form-item input::placeholder {
color: #cccccc !important;
}
.xtx-form .xtx-form-item .submit {
width: 300px;
height: 50px;
background: #27BA9B;
border-radius: 4px;
display: block;
font-size: 16px;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.xtx-form .xtx-form-item .code {
position: absolute;
left: 190px;
top: 16px;
width: 100px;
color: #27BA9B;
text-align: right;
}
.xtx-form .xtx-form-item .code.ing {
color: #cccccc;
}
2.6 产品样式
/* (1)头部 sticky 定位 */
.sticky {
width: 100%;
position: fixed;
height: 80px;
left: 0;
top: -80px;
z-index: 10;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
transition: all .3s;
}
.header-sticky {
display: flex;
height: 80px;
background-color: #fff;
}
.sticky-logo a {
display: block;
width: 200px;
height: 80px;
background: url("../images/logo.png") no-repeat center;
background-size: 160px auto;
}
.sticky-nav {
display: flex;
align-items: center;
margin-left: 20px;
}
.sticky-nav li {
margin: 0 20px;
}
.sticky-nav li a {
padding: 8px 0;
font-size: 16px;
color: #333;
}
.sticky-nav li a:hover {
color: #27ba9b;
border-bottom: 1px solid #27ba9b;
}
.sticky-right {
position: relative;
display: flex;
align-items: center;
margin-left: 20px;
padding-left: 20px;
}
.sticky-right::before {
content: "";
position: absolute;
left: 0;
top: 50%;
margin-top: -8px;
width: 2px;
height: 16px;
background-color: #27ba9b;
}
.sticky-right a {
margin: 0 20px;
}
.sticky-right a:hover {
color: #27ba9b;
}
/* (2)返回顶部 */
.backTop {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 60px;
height: 80px;
position: fixed;
left: 50%;
bottom: 200px;
margin-left: 630px;
background-color: #fff;
cursor: pointer;
}
.backIcon {
width: 24px;
height: 24px;
background: url("../images/sprites.png") no-repeat;
background-position: 0 -220px;
transform: rotate(-90deg);
}
/* (3)主体内容 */
.xtx-wrapper {
background: #f5f5f5;
line-height: 1.4;
}
.xtx-wrapper .container {
width: 1240px;
margin: 0 auto;
padding: 20px 0 40px;
}
/* (3.1)展示商品 */
.xtx-bread {
padding: 10px 0 25px 25px;
}
.xtx-bread a {
color: #999;
padding-right: 5px;
}
.xtx-bread a:hover {
color: #27BA9B;
}
/* (3.1)商品信息 */
.xtx-product-info {
background: #fff;
display: flex;
min-height: 580px;
}
.xtx-product-info .left {
width: 580px;
padding: 30px 50px;
}
.xtx-product-info .left .pictrue {
width: 480px;
height: 400px;
display: flex;
position: relative;
}
.xtx-product-info .left .pictrue .middle {
width: 400px;
height: 400px;
position: relative;
}
.xtx-product-info .left .pictrue .middle .layer {
display: none;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
top: 0;
cursor: move;
}
.xtx-product-info .left .pictrue .large {
width: 400px;
height: 400px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: absolute;
left: 412px;
top: 0;
z-index: 999;
background-color: #fff;
display: none;
background-image: url(../images/1.jpg);
background-size: 800px 800px;
}
.xtx-product-info .left .pictrue .middle img {
width: 100%;
height: 100%;
}
.xtx-product-info .left .pictrue .small {
width: 80px;
height: 400px;
}
.xtx-product-info .left .pictrue .small ul li {
width: 68px;
height: 68px;
margin-bottom: 15px;
margin-left: 12px;
border: 2px solid transparent;
}
.xtx-product-info .left .pictrue .small ul li img {
width: 100%;
height: 100%;
}
.xtx-product-info .left .pictrue .small ul li.active,
.xtx-product-info .left .pictrue .small ul li:hover {
border-color: #27BA9B;
}
.xtx-product-info .left .other {
margin-top: 20px;
}
.xtx-product-info .left .other ul {
display: flex;
width: 400px;
}
.xtx-product-info .left .other ul li {
flex: 1;
text-align: center;
position: relative;
line-height: 32px;
}
.xtx-product-info .left .other ul li::before {
content: "";
position: absolute;
top: 15px;
right: 0;
height: 70px;
border-right: 1px solid #e4e4e4;
}
.xtx-product-info .left .other ul li:last-child::before {
display: none;
}
.xtx-product-info .left .other ul li p:first-child {
color: #999;
}
.xtx-product-info .left .other ul li p:nth-child(2) {
color: #CF4444;
}
.xtx-product-info .right {
width: 660px;
padding-top: 30px;
}
.xtx-product-info .right h3 {
font-size: 22px;
font-weight: normal;
}
.xtx-product-info .right .desc {
padding-top: 10px;
color: #999;
}
.xtx-product-info .right .price {
padding: 10px 0;
}
.xtx-product-info .right .price .now {
color: #CF4444;
margin-right: 5px;
font-size: 22px;
}
.xtx-product-info .right .price .old {
color: #999;
text-decoration: line-through;
font-size: 18px;
}
.xtx-product-info .right .address {
width: 510px;
background: #f9f9f9;
padding: 0 10px 20px;
}
.xtx-product-info .right .address .fw {
position: relative;
padding: 0 15px 0 10px;
}
.xtx-product-info .right .address .fw::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 3px;
height: 3px;
border-radius: 50%;
background: #27BA9B;
}
.xtx-product-info .right .address .lj {
color: #27BA9B;
}
.xtx-product-info .right .address .box {
width: 150px;
height: 28px;
border: 1px solid #e4e4e4;
display: inline-block;
line-height: 26px;
text-align: center;
margin-left: 10px;
background: #fff;
}
.xtx-product-info .right .attrs {
padding: 0 10px;
}
.xtx-product-info .right .attrs img {
width: 50px;
height: 50px;
margin-right: 10px;
border: 1px dashed transparent;
cursor: pointer;
}
.xtx-product-info .right .attrs img.active,
.xtx-product-info .right .attrs img:hover {
border-color: #27BA9B;
}
.xtx-product-info .right .attrs .size {
border: 1px solid #e4e4e4;
padding: 5px 25px;
display: inline-block;
margin-right: 6px;
cursor: pointer;
}
.xtx-product-info .right .attrs .size.active,
.xtx-product-info .right .attrs .size:hover {
border-color: #27BA9B;
}
.xtx-product-info .right .attrs .num {
width: 116px;
height: 28px;
border: 1px solid #e4e4e4;
display: flex;
}
.xtx-product-info .right .attrs .num input {
border-left: 1px solid #e4e4e4;
border-right: 1px solid #e4e4e4;
width: 60px;
line-height: 26px;
text-align: center;
color: #979797;
}
.xtx-product-info .right .attrs .num a {
width: 28px;
text-align: center;
line-height: 26px;
color: #979797;
}
.xtx-product-info .right .item {
color: #999;
display: flex;
padding-top: 20px;
align-items: center;
}
.xtx-product-info .right .item .dt {
width: 50px;
}
.xtx-product-info .right .item .dd {
flex: 1;
color: #666;
}
.xtx-product-info .right .buy {
width: 220px;
height: 50px;
background: #27BA9B;
border-radius: 4px;
display: block;
color: #fff;
font-size: 16px;
text-align: center;
line-height: 50px;
}
/* (2)同类产品推荐 */
.xtx-relevant-product {
background: #fff;
margin: 20px 0;
padding: 30px 28px;
position: relative;
}
.xtx-relevant-product h3 {
font-weight: normal;
font-size: 20px;
padding-bottom: 8px;
padding-left: 25px;
}
.xtx-relevant-product .prev,
.xtx-relevant-product .next {
position: absolute;
top: 200px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #dbdbdb;
}
.xtx-relevant-product .prev span,
.xtx-relevant-product .next span {
font-size: 30px;
}
.xtx-relevant-product .prev {
left: 0;
}
.xtx-relevant-product .next {
right: 0;
}
.xtx-relevant-product ul {
display: flex;
justify-content: space-between;
}
.xtx-relevant-product ul li {
width: 278px;
height: 360px;
text-align: center;
}
.xtx-relevant-product ul li img {
width: 190px;
height: 190px;
margin-top: 25px;
}
.xtx-relevant-product ul li .name {
font-size: 16px;
line-height: 40px;
}
.xtx-relevant-product ul li .desc {
color: #999;
line-height: 50px;
}
.xtx-relevant-product ul li .price {
color: #CF4444;
font-size: 18px;
line-height: 50px;
}
/* 商品详情 */
.xtx-product-detail {
display: flex;
justify-content: space-between;
}
.xtx-product-detail .main {
width: 942px;
}
.xtx-product-detail .main .cont {
background: #fff;
}
.xtx-product-detail .main .cont .tab-head {
height: 70px;
line-height: 70px;
border-bottom: 1px solid #f5f5f5;
font-size: 18px;
padding: 0 20px;
position: relative;
}
.xtx-product-detail .main .cont .tab-head a {
margin-right: 80px;
}
.xtx-product-detail .main .cont .tab-head a span {
color: #CF4444;
}
.xtx-product-detail .main .cont .tab-head::before {
content: "";
position: absolute;
height: 70px;
width: 1px;
background: #f5f5f5;
top: 0;
left: 135px;
}
/* 模块1 */
.xtx-product-detail .main .cont .tab-pane .attrs {
padding: 20px;
display: flex;
flex-wrap: wrap;
}
.xtx-product-detail .main .cont .tab-pane .attrs .item {
width: 25%;
display: flex;
padding-bottom: 10px;
}
.xtx-product-detail .main .cont .tab-pane .attrs .item span:first-child {
width: 75px;
color: #999;
}
.xtx-product-detail .main .cont .tab-pane .attrs .item span:last-child {
flex: 1;
color: #666;
}
.xtx-product-detail .main .cont .tab-pane .detail {
padding: 25px;
text-align: center;
}
/* 模块2 */
.goods-tabs {
width: 940px;
padding: 0 20px;
background-color: #fff;
}
.tabs-hd {
height: 60px;
line-height: 60px;
display: flex;
font-size: 14px;
border-bottom: 1px solid #f5f5f5;
}
.tabs-hd span {
margin-left: 20px;
}
.tabs-hd ul {
display: flex;
}
.tabs-hd ul li {
margin-left: 30px;
}
.tabs-hd ul li.active a {
color: #27ba9b;
}
.tabs-hd ul li:hover a {
color: #27ba9b;
}
.tabs-bd {
min-height: 500px;
}
.tabs {
display: none;
}
.tabs-item {
display: flex;
align-items: flex-start;
padding: 25px 10px;
border-bottom: 1px solid #f5f5f5;
}
.userInfo {
width: 160px;
display: flex;
align-items: center;
}
.userpic {
width: 40px;
height: 40px;
}
.userpic img {
width: 100%;
height: 100%;
}
.username {
margin-left: 10px;
color: #666;
font-size: 14px;
}
.tbs-body {
flex: 1;
}
.score {
line-height: 40px;
font-size: 14px;
color: #666;
}
.score .icon-xingxing,
.score .icon-xingxing1 {
color: #ff9240;
font-size: 16px;
padding: 0 1.5px;
}
.score .attr {
padding-left: 10px;
}
.tbs-body .text {
line-height: 24px;
font-size: 14px;
color: #666;
}
.comment-image .list {
display: flex;
flex-wrap: wrap;
}
.comment-image .list a {
width: 120px;
height: 120px;
margin-right: 20px;
border: 1px solid #e4e4e4;
}
.comment-image .list a img {
width: 100%;
height: 100%;
}
.tbs-body .time {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #999;
margin-top: 10px;
}
.show {
display: block !important;
}
/* 翻页 */
.xtx-pagination {
padding: 30px;
}
.xtx-pagination ul {
display: flex;
justify-content: center;
}
.xtx-pagination ul li {
width: 30px;
height: 30px;
line-height: 30px;
margin: 0 5px;
text-align: center;
border: 1px solid #e4e4e4;
}
.xtx-product-detail .main .warn {
margin-top: 20px;
background: #fff;
padding-bottom: 40px;
}
.xtx-product-detail .main .warn h3 {
height: 80px;
line-height: 80px;
border-bottom: 1px solid #f5f5f5;
padding-left: 50px;
font-size: 18px;
font-weight: normal;
margin-bottom: 10px;
}
.xtx-product-detail .main .warn p {
line-height: 40px;
padding-left: 25px;
color: #666;
}
.xtx-product-detail .main .warn p.tit {
color: #333;
}
.xtx-product-detail .aside {
width: 278px;
}
.xtx-product-detail .aside .tit {
width: 278px;
height: 70px;
background: #E26237;
color: #fff;
font-size: 18px;
line-height: 70px;
padding-left: 25px;
margin-bottom: 10px;
}
.xtx-product-detail .aside .product {
margin-bottom: 10px;
background: #fff;
width: 278px;
height: 360px;
text-align: center;
}
.xtx-product-detail .aside .product img {
width: 190px;
height: 190px;
margin-top: 25px;
}
.xtx-product-detail .aside .product .name {
font-size: 16px;
line-height: 40px;
}
.xtx-product-detail .aside .product .desc {
color: #999;
line-height: 50px;
}
.xtx-product-detail .aside .product .price {
color: #CF4444;
font-size: 18px;
line-height: 50px;
}
.xtx-product-detail .aside .special {
background: #fff;
text-align: center;
margin-bottom: 10px;
}
.xtx-product-detail .aside .special img {
width: 278px;
height: 212px;
}
.xtx-product-detail .aside .special .name {
font-size: 18px;
padding: 24px 0;
}
三、事件文件
3.1 主页事件
// (index 1)焦点图
const base = "./uploads/banner_"
const banner_img = document.querySelector(".xtx_banner img")
// 更新图片
let move = function (idx) {
document.querySelector(`.xtx_banner .indicator .active`).classList.remove('active')
banner_img.src = base + idx + ".png"
document.querySelector(`.xtx_banner .indicator span:nth-child(${idx})`).classList.add('active')
}
let banner_i = 0
// 下一张
const banner_next = document.querySelector('.xtx_banner .next')
banner_next.addEventListener('click', function () {
banner_i = (banner_i + 1) % 5
move(banner_i + 1)
})
// 上一张
const banner_prev = document.querySelector('.xtx_banner .prev')
banner_prev.addEventListener('click', function () {
banner_i = (banner_i - 1 + 5) % 5
move(banner_i + 1)
})
// 轮播图
let timeId = setInterval(function () {
banner_next.click()
}, 1000)
// 鼠标经过停止
const slider = document.querySelector('.xtx_banner')
slider.addEventListener('mouseenter', function () {
clearInterval(timeId)
})
// 鼠标离开继续
slider.addEventListener('mouseleave', function () {
timeId = setInterval(function () {
banner_next.click()
}, 1000)
})
// (index 4)热门品牌
let start_idx = 0
const goods_img = document.querySelectorAll(".xtx_goods img")
const goods_prev = document.querySelector(".xtx_panel_header .prev")
const goods_next = document.querySelector(".xtx_panel_header .next")
let option = function () {
for (let i = 0; i < goods_img.length; i++) {
let idx = (start_idx + i) % goods_img.length + 1
goods_img[i].src = "uploads/brand_goods_" + idx + ".jpg"
}
}
goods_prev.addEventListener("click", function () {
start_idx = (start_idx + 1) % goods_img.length
option()
})
goods_next.addEventListener("click", function () {
start_idx = (start_idx - 1 + goods_img.length) % goods_img.length
option()
})
3.2 注册页事件
// 登录内容切换
const tabNav = document.querySelectorAll('.tab-nav a');
const tabPane = document.querySelectorAll('.tab-pane')
tabNav[0].addEventListener("click", function (e) {
if (e.target.tagName == 'A') {
const active = document.querySelector('.tab-nav .active');
if (active) active.classList.remove('active');
e.target.classList.add('active')
tabPane[0].style.display = 'block'
tabPane[1].style.display = 'none'
}
})
tabNav[1].addEventListener("click", function (e) {
if (e.target.tagName == 'A') {
const active = document.querySelector('.tab-nav .active');
if (active) active.classList.remove('active');
e.target.classList.add('active')
tabPane[0].style.display = 'none'
tabPane[1].style.display = 'block'
}
})
3.3 产品事件
//顶部导航栏自动滑出
(function () {
const sticky = document.querySelector('.sticky');
const header = document.querySelector('.xtx_header .wrapper');
const headerTop = header.offsetTop;
const heaerHeight = header.clientHeight;
const top = headerTop + heaerHeight;
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop;
if (n >= top) {
sticky.style.top = '0px';
} else {
sticky.style.top = '-80px';
}
})
})();
(function () {
// 1. 获取三个盒子
// 2. 小盒子 图片切换效果
const small = document.querySelector('.small')
// 中盒子
const middle = document.querySelector('.middle')
// 大盒子
const large = document.querySelector('.large')
// 2. 事件委托
small.addEventListener('mouseover', function (e) {
if (e.target.tagName === 'IMG') {
// console.log(111)
// 排他 干掉以前的 active li 上面
this.querySelector('.active').classList.remove('active')
// 当前元素的爸爸添加 active
e.target.parentNode.classList.add('active')
// 拿到当前小图片的 src
// console.log(e.target.src)
// 让中等盒子里面的图片，src 更换为 小图片src
middle.querySelector('img').src = e.target.src
// 大盒子更换背景图片
large.style.backgroundImage = `url(${e.target.src})`
}
})
// 3. 鼠标经过中等盒子， 显示隐藏 大盒子
middle.addEventListener('mouseenter', show)
middle.addEventListener('mouseleave', hide)
let timeId = null
// 显示函数 显示大盒子
function show() {
// 先清除定时器
clearTimeout(timeId)
large.style.display = 'block'
}
// 隐藏函数 隐藏大盒子
function hide() {
timeId = setTimeout(function () {
large.style.display = 'none'
}, 200)
}
// 4. 鼠标经过大盒子， 显示隐藏 大盒子
large.addEventListener('mouseenter', show)
large.addEventListener('mouseleave', hide)
// 5. 鼠标经过中等盒子，显示隐藏 黑色遮罩层
const layer = document.querySelector('.layer')
middle.addEventListener('mouseenter', function () {
layer.style.display = 'block'
})
middle.addEventListener('mouseleave', function () {
layer.style.display = 'none'
})
// 6.移动黑色遮罩盒子
middle.addEventListener('mousemove', function (e) {
// let x = 10, y = 20
// console.log(11)
// 鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标
// console.log(e.pageX)鼠标在页面中的坐标
// middle 中等盒子的坐标
// console.log(middle.getBoundingClientRect().left)
let x = e.pageX - middle.getBoundingClientRect().left
let y = e.pageY - middle.getBoundingClientRect().top - document.documentElement.scrollTop
// console.log(x, y)
// 黑色遮罩移动 在 middle 盒子内 限定移动的距离
if (x >= 0 && x <= 400 && y >= 0 && y <= 400) {
// 黑色盒子不是一直移动的
// 声明2个变量 黑色盒子移动的 mx my变量
let mx = 0, my = 0
if (x < 100) mx = 0
if (x >= 100 && x <= 300) mx = x - 100
if (x > 300) mx = 200
if (y < 100) my = 0
if (y >= 100 && y <= 300) my = y - 100
if (y > 300) my = 200
layer.style.left = mx + 'px'
layer.style.top = my + 'px'
// 大盒子的背景图片要跟随 中等盒子移动 存在的关系是 2倍
large.style.backgroundPositionX = -2 * mx + 'px'
large.style.backgroundPositionY = -2 * my + 'px'
}
})
})();
//商品详情和商品评价切换
(function () {
const tabHead = document.querySelector('.tab-head');
tabHead.addEventListener('click', function (e) {
if (e.target.tagName == 'A') {
const active = document.querySelector('.tab-head .active');
if (active) active.classList.remove('active');
e.target.classList.add('active');
const id = e.target.dataset.id;
const a = id == 2 ? 3 : 2;
document.querySelector('.main .cont>div:nth-child(' + id + ')').style.display = 'block';
document.querySelector('.main .cont>div:nth-child(' + a + ')').style.display = 'none';
}
})
})();
//点击尺寸
(function () {
const dd = document.querySelector('.item #size');
dd.addEventListener('click', function (e) {
if (e.target.tagName == 'SPAN') {
const active = document.querySelector('.item #size .active');
if (active) active.classList.remove('active');
e.target.classList.add('active');
}
});
})();
//点击颜色
(function () {
const dd = document.querySelector('.item #color');
dd.addEventListener('click', function (e) {
if (e.target.tagName == 'IMG') {
const active = document.querySelector('.item #color img.active');
if (active) active.classList.remove('active');
e.target.classList.add('active');
}
});
})();
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
