首先是要创建相关的文件目录
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。"><meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物"><title>小兔鲜儿-新鲜、惠民、快捷！</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/common.css">
</head>
<body><!-- 快捷导航 --><div class="shortcut"><div class="wrapper"><ul><li><a href="#" class="login">请先登录</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="#"><span class="iconfont icon-mobile-phone"></span>手机版</a></li></ul></div></div><!-- 头部区域 --><div class="header wrapper"><!-- logo --><div class="logo"><h1><a href="#">小兔鲜儿</a></h1></div><!-- 导航 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">生鲜</a></li><li><a href="#">美食</a></li><li><a href="#">餐厨</a></li><li><a href="#">电器</a></li><li><a href="#">居家</a></li><li><a href="#">洗护</a></li><li><a href="#">孕婴</a></li><li><a href="#">服装</a></li></ul></div><!-- 搜索 --><div class="search"><span class="iconfont icon-search"></span><input type="text" placeholder="搜一搜"></div><!-- 购物车 --><div class="cart"><span class="iconfont icon-cart-full"></span><i>12</i></div></div><!-- banner --><div class="banner"><div class="wrapper"><!-- 图片 --><ul class="pic"><li><a href="#"><img src="../xtx-pc/uploads/banner1.png"></a></li><li><a href="#"><img src="../xtx-pc/uploads/banner1.png"></a></li><li><a href="#"><img src="../xtx-pc/uploads/banner1.png"></a></li></ul><!-- 测导航 --><div class="subnav"><ul><li><div><a href="#" class="classify">生鲜</a><a href="#">水果</a><a href="#">蔬菜</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">美食</a><a href="#">面点</a><a href="#">干果</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">餐厨</a><a href="#">数码产品</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">电器</a><a href="#">床品</a><a href="#">四件套</a><a href="#">被套</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">居家</a><a href="#">奶粉</a><a href="#">玩具</a><a href="#">辅食</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">洗护</a><a href="#">洗发</a><a href="#">洗护</a><a href="#">美妆</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">孕婴</a><a href="#">奶粉</a><a href="#">玩具</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">服饰</a><a href="#">女装</a><a href="#">男装</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">杂货</a><a href="#">户外</a><a href="#">图书</a></div><span class="iconfont icon-arrow-right-bold "></span></li><li><div><a href="#" class="classify">品牌</a><a href="#">品牌制造</a></div><span class="iconfont icon-arrow-right-bold "></span></li></ul></div><!-- 圆点指示器 --><ol><li class="current"><i></i></li><li><i></i></li><li><i></i></li></ol></div></div><!-- 新鲜好物 --><div class="goods wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>新鲜好物</h3><p>新鲜出炉 品质靠谱</p></div><div class="right"><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div><!-- 内容 --><!-- 好物内容 --><div class="bd"><ul><li><a href="#"><div class="pic"><img src="./uploads/goods1.png"></div><div class="txt"><h4>KN95级莫兰迪色口罩</h4><p>&<span>79</span></p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/goods2.png"></div><div class="txt"><h4>紫檀外独板三层普洱盒 </h4><p>&<span>566</span></p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/goods3.png"></div><div class="txt"><h4>法拉蒙高颜值笔记本可定制</h4><p>&<span>58</span></p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/goods4.png"></div><div class="txt"><h4>科技布艺沙发</h4><p>&<span>3579</span></p></div></a></li></ul></div></div><!-- 人气推荐 --><div class="recommend wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>新鲜好物</h3><p>新鲜出炉 品质靠谱</p></div></div><!-- 内容 --><!-- 好物内容 --><div class="bd"><ul><li><a href="#"><div class="pic"><img src="./uploads/recommend1.png"></div><div class="txt"><h4>特惠推荐</h4><p>我猜得到 你的需求</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/recommend2.png"></div><div class="txt"><h4>爆款推荐</h4><p>人气好物推荐</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/recommend3.png"></div><div class="txt"><h4>节日礼品一站买全</h4><p>编辑尽心推荐整理</p></div></a></li><li><a href="#"><div class="pic"><img src="./uploads/recommend4.png"></div><div class="txt"><h4>鲜花园艺</h4><p>给生活增加仪式感</p></div></a></li></ul></div></div><!-- 热门品牌 --><div class="brand"><div class="wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>热门品牌</h3><p>国际经典 品质认证</p></div><div class="button"><a href="#" class="prv"><i class="iconfont icon-arrow-left-bold"></i></a><a href="#" class="next"><i class="iconfont icon-arrow-right-bold"></i></a></div></div><!-- 内容 --><div class="bd"><ul><li><a href="#"><img src="./uploads/hot1.png"></a></li><li><a href="#"><img src="./uploads/hot2.png"></a></li><li><a href="#"><img src="./uploads/hot3.png"></a></li><li><a href="#"><img src="./uploads/hot4.png"></a></li><li><a href="#"><img src="./uploads/hot5.png"></a></li></ul></div> </div></div><!-- 生鲜 --><div class="fresh wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>生鲜</h3></div><div class="right"><ul><li><a href="#" class="active">热门</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><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div><!-- 内容 --><div class="content"><div class="left"><a href="#"><img src="../xtx-pc/uploads/fresh_left.png"></a></div><div class="right"><ul><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh1.png"></div><div class="txt"><div class="info"><h4>双味千层，手抓饼烤肉组合</h4><p>240g/袋 4片装</p><p>加热即食</p></div><p class="price">$<span>89.9</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh2.png"></div><div class="txt"><div class="info"><h4>云南甘蔗黑糖红枣馒头</h4><p>220g/盒 5个装</p><p>加热即食</p></div><p class="price">$<span>9.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div> </li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh3.png"></div><div class="txt"><div class="info"><h4>日式风味小圆饼</h4><p>圆脆【鲜蛋黄味】</p><p>浓郁酥心 口感酥脆</p></div><p class="price">$<span>588.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh4.png"></div><div class="txt"><div class="info"><h4>全麦奶油浓芯小面包</h4><p>50g*12袋</p><p>美味西点</p></div><p class="price">$<span>69.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh5.png"></div><div class="txt"><div class="info"><h4>缤纷/豆沙五福捧寿大福点心</h4><p>150g/盒</p><p>美味西点</p></div><p class="price">$<span>39.90</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh6.png"></div><div class="txt"><div class="info"><h4>水果果园鲜蜂蜜柚子茶</h4><p>240g/袋</p><p>美味茶点</p></div><p class="price">$<span>49.99</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh7.png"></div><div class="txt"><div class="info"><h4>浓醇比利时巧克力礼盒</h4><p>205g/盒</p><p>美味茶点</p></div><p class="price">$<span>120.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/fresh8.png"></div><div class="txt"><div class="info"><h4>抹茶奶幼小蛋糕礼盒</h4><p>220g/盒</p><p>美味西点</p></div><p class="price">$<span>60.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li></ul></div></div></div><!-- 服饰 --><div class="clothe wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>服饰</h3></div><div class="right"><ul><li><a href="#" class="active">热门</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="#">T恤</a></li><li><a href="#">内衣</a></li></ul><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div><!-- 内容 --><div class="content"><div class="left"><a href="#"><img src="../xtx-pc/uploads/colthes_left.png"></a></div><div class="right"><ul><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes1.png"></div><div class="txt"><div class="info"><h4>男女情侣抗夜蓝视休闲跑鞋</h4><p>36/37/38码</p><p>新款服饰</p></div><p class="price">$<span>719.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes2.png"></div><div class="txt"><div class="info"><h4>jessyline2022秋装专柜款</h4><p>M码</p><p>新款服饰</p></div><p class="price">$<span>699.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div> </li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes3.png"></div><div class="txt"><div class="info"><h4>高领纯羊毛针织打底衫毛衣</h4><p>S/M/L码</p><p>新款服饰</p></div><p class="price">$<span>229.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes4.png"></div><div class="txt"><div class="info"><h4>潮流文艺袜子纯棉袜</h4><p>36-38</p><p>居家日用</p></div><p class="price">$<span>14.50</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes5.png"></div><div class="txt"><div class="info"><h4>新款韩系设计想要青衬衫裙</h4><p>M码 黑色</p><p>新款服饰</p></div><p class="price">$<span>179.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes6.png"></div><div class="txt"><div class="info"><h4>头层牛皮真皮百搭个性腰带</h4><p>120cm</p><p>个性佩饰</p></div><p class="price">$<span>565.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes7.png"></div><div class="txt"><div class="info"><h4>束念帆布ins潮搭板鞋子</h4><p>36/36/38码</p><p>新款服饰</p></div><p class="price">$<span>99.99</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/clothes8.png"></div><div class="txt"><div class="info"><h4> Descente迪桑特训练运动裤</h4><p>标码 墨绿色/白色/蓝色</p><p>新款服饰</p></div><p class="price">$<span>269.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li></ul></div></div></div><!-- 餐厨 --><div class="kitchen wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>餐厨</h3></div><div class="right"><ul><li><a href="#" class="active">热门</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><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div></div><!-- 内容 --><div class="content wrapper"><div class="left"><a href="#"><img src="../xtx-pc/uploads/kitchen_left.png"></a></div><div class="right"><ul><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen1.png"></div><div class="txt"><div class="info"><h4>紫砂茶圣茶渣茶叶过滤器</h4><p>【禅意大号】</p><p>居家好物</p></div><p class="price">$<span>210.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen2.png"></div><div class="txt"><div class="info"><h4>简约贝壳果盘 零食收纳盘</h4><p>【灰色】</p><p>居家好物</p></div><p class="price">$<span>32.99</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div> </li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen3.png"></div><div class="txt"><div class="info"><h4>电动奶打泡器咖啡奶泡机</h4><p>KJBQ-4</p><p>居家好物</p></div><p class="price">$<span>30.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen4.png"></div><div class="txt"><div class="info"><h4>哈尔斯保温壶大容量家用</h4><p>304不锈钢</p><p>居家好物</p></div><p class="price">$<span>69.99</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen5.png"></div><div class="txt"><div class="info"><h4>龙泉青瓷碗碟盘餐具套装</h4><p>【碗+盘+杯子】</p><p>厨房好物</p></div><p class="price">$<span>99.90</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen6.png"></div><div class="txt"><div class="info"><h4>戚风蛋糕模具家用套装</h4><p>26/8胚子4寸</p><p>厨房好物</p></div><p class="price">$<span>35.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen7.png"></div><div class="txt"><div class="info"><h4>托盘家用放茶杯水杯茶盘</h4><p>水果餐盘</p><p>居家好物</p></div><p class="price">$<span>12.99</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/kitchen8.png"></div><div class="txt"><div class="info"><h4>哈尔斯双层隔热便携水杯</h4><p>橙色/绿色</p><p>居家好物</p></div><p class="price">$<span>56.69</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li></ul></div></div><!-- 居家 --><div class="home wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>居家</h3></div><div class="right"><ul><li><a href="#" class="active">热门</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><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div><!-- 内容 --><div class="content"><div class="left"><a href="#"><img src="../xtx-pc/uploads/home_left.png"></a></div><div class="right"><ul><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home1.png"></div><div class="txt"><div class="info"><h4>北极极房间的彩虹全棉床单</h4><p>《房间的彩虹》</p><p>床上用品</p></div><p class="price">$<span>59.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home2.png"></div><div class="txt"><div class="info"><h4>沃特曼毛绒玩具玩偶抱枕</h4><p>23cm小号粉色70332</p><p>创意礼品</p></div><p class="price">$<span>9.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div> </li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home3.png"></div><div class="txt"><div class="info"><h4>水培植物玻璃花瓶大</h4><p>水养花瓶1903</p><p>鲜花生活</p></div><p class="price">$<span>19.90</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home4.png"></div><div class="txt"><div class="info"><h4>韩版网红仙女生发圈小皮筋</h4><p>森系头绳（三件套）</p><p>个性配饰</p></div><p class="price">$<span>29.90</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home5.png"></div><div class="txt"><div class="info"><h4>缤纷/竖纹透明仿真干花插花花瓶</h4><p>竖纹玻璃花瓶【透明】</p><p>鲜花生活</p></div><p class="price">$<span>29.90</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home6.png"></div><div class="txt"><div class="info"><h4>折叠简约家用简易书桌</h4><p>1.22米折叠桌二档【白色】</p><p>生活日用</p></div><p class="price">$<span>79.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home7.png"></div><div class="txt"><div class="info"><h4>自动吸水懒人花盆</h4><p>直径15cm</p><p>鲜花生活</p></div><p class="price">$<span>29.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/home8.png"></div><div class="txt"><div class="info"><h4>百富帝byford碳化竹席枕套</h4><p>单只装48-74cm</p><p>床上用品</p></div><p class="price">$<span>39.00</span></p></div></a><div class="cover"><p>找相似</p><p></p><p>发现更多宝贝<span class="iconfont icon-arrow-right-bold"></span></p></div></li></ul></div></div></div><!-- 最新专题 --><div class="topic wrapper"><!-- 标题 --><div class="title"><div class="left"><h3>最新专题</h3></div><div class="right"><a href="#" class="more">查看全部 <span class="iconfont icon-arrow-right-bold"></span></a></div></div><!-- 内容 --><div class="topic-bd"><ul><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/topic1.png"><!-- 定位区域 --><div class="cover"><div class="left"><h4>吃这些没事才算不辜负自己</h4><p>餐厨起居洗护好物</p></div><div class="right">$ <span>29.9</span><span>起</span></div></div></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/topic2.png"><!-- 定位区域 --><div class="cover"><div class="left"><h4>吃这些没事才算不辜负自己</h4><p>餐厨起居洗护好物</p></div><div class="right">$ <span>29.9</span><span>起</span></div></div></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li><li><a href="#"><div class="pic"><img src="../xtx-pc/uploads/topic3.png"><!-- 定位区域 --><div class="cover"><div class="left"><h4>吃这些没事才算不辜负自己</h4><p>餐厨起居洗护好物</p></div><div class="right">$ <span>29.9</span><span>起</span></div></div></div><div class="txt"><div class="left"><p><i class="iconfont icon-favorites-fill"></i><span>1220</span></p><p><i class="iconfont icon-browse"></i><span>1800</span></p></div><div class="right"><p><i class="iconfont icon-comment"></i><span>246</span></p></div></div></a></li></ul></div></div><!-- 底部区域 --><div class="footer"><div class="wrapper"><!-- 服务 --><div class="service"><ul><li><h5></h5><p>价格亲民</p></li><li><h5></h5><p>物流快捷</p></li><li><h5></h5><p>品质新鲜</p></li><li><h5></h5><p>售后无忧</p></li></ul></div><!-- 帮助中心 --><div class="help"><div class="left"><dl><dt>购物指南</dt><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></dl><dl><dt>关于我们</dt><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></dl><dl><dt>服务热线</dt><dd><a href="#"><span class="iconfont icon-customer-service"></span></a></dd><dd><a href="#">客服电话 1234567</a></dd><dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd></dl></div><div class="right"><ul><li><div class="pic"><img src="../xtx-pc/images/wechat.png"></div><p>微信公众号</p> </li><li><div class="pic"><img src="../xtx-pc/images/app.png"></div><p>APP下载二维码</p></li></ul></div></div><!-- 版权 --><div class="copyright"><p><a href="#">关于我们</a>|<a href="#">帮助中心</a>|<a href="#">售后服务</a>|<a href="#">配送与验收</a>|<a href="#">商务合作</a>|<a href="#">搜索推荐</a>|<a href="#">友情链接</a></p><p>CopyRight 小兔鲜</p></div></div></div>
</body>
</html>
/* 首页内容的样式 */
/* banner */
.banner{height: 500px;background-color: #f5f5f5;
}
.banner .wrapper{position: relative;height: 500px;background-color: pink;overflow: hidden;
}
/* flex布局，父级宽度不够，又不想缩小子级，可以按需增大腹父级的宽度 */
.banner .pic{display: flex;width: 3720px;
}
/* 测导航区域 */
.banner .subnav{position: absolute;left: 0;top: 0;width: 250px;height: 500px;background-color: rgb(0,0,0,0.42);
}
.subnav li{display: flex;justify-content: space-between;padding-left: 30px;padding-right: 12px;height: 50px;line-height: 50px;/* background-color: pink; */color: #fff;
}.subnav li a{margin-right: 5px;font-size: 14px;color: #fff
}
.subnav li .classify{margin-right: 14px;font-size: 16px;
}
.subnav li .iconfont{font-size: 14px;
}
.subnav li:hover{background-color: #00be9a;
}
/* 圆点指示器 */
.banner ol{position: absolute;bottom: 17px;right: 16px;display: flex;
}
.banner ol li{margin-left: 8px;width: 22px;height: 22px;/* background-color: pink; */border-radius: 50%;
}
.banner ol i{display: block;margin: 4px;width: 14px;height: 14px;background-color: rgb(255,255,255,0.5);border-radius: 50%;cursor: pointer;
}
/* 选中：li半透明，i白色 */
.banner ol .current{background-color: rgb(255,255,255,0.5);
}
.banner ol .current i{background-color: #fff;
}
/* 新鲜好物 */
/* 标题 公共样式 */
.title{display: flex;justify-content: space-between;margin-top: 40px;margin-bottom: 30px;height: 42px;/* background-color: pink; */
}.title .left{display: flex;
}
.title .left h3{margin-right: 35px;font-size: 30px;
}
.title .left p{align-self: flex-end;color: #a1a1a1;
}
.title .right .more{line-height: 42px;color: #a1a1a1;
}
.title .right .iconfont{margin-left: 10px;
}
/* 好物内容 公共内容 */
.bd ul{display: flex;justify-content: space-between;
}
.bd li{width: 304px;height: 404px;background-color: #eef9f4;
}
.bd li .pic{width: 304px;height: 304px;
}
.bd ul li .txt{text-align: center;
}.bd li h4{margin-top: 18px;margin-bottom: 8px;font-size: 20px;
}
.goods .bd p{font-size: 18px;color: #aa2113;
}
.goods .bd p span{margin-left: 3px;font-size: 22px;
}
/* 人气推荐 */
.recommend .bd li{background-color: #fff;
}
.recommend .bd p{color:#a1a1a1 ;
}
/* 热门品牌 */
.brand{margin-top: 60px;height: 468px;background-color: #f5f5f5;
}
.brand .wrapper{overflow: hidden;height: 468px;/* background-color: pink; */
}
.brand .title{position: relative;margin-bottom: 40px;
}
.brand .button{position: absolute;right: 0;bottom: -25px;
}
.brand .button a{margin-left: 12px;width: 20px;height: 20px;text-align: center;line-height: 20px;
}
.brand .button .prv{background-color: #ddd;
}
.brand .button .next{background-color: #00be9a;
}
.brand .bd li{width: 244px;height: 306px;
}
/* 生鲜 */
.title{margin-top: 60px;margin-bottom: 20px;
}
.title .right{display: flex;
}
.title .right ul{display: flex;margin-top: 10px;margin-right: 58px;
}
.title .right ul a{display: block;padding: 0 7px;margin-left: 6px;height: 20px;line-height: 20px;
}
.fresh .title .right ul .active{background-color: #00be9a;color: #fff;
}
/* 生鲜内容 */
.content{display: flex;justify-content: space-between;
}
.content .left{width: 248px;height: 610px;/* background-color: pink; */
}
.content .right{width: 968px;height: 610px;/* background-color: pink; */
}
.content .right ul{display: flex;flex-wrap: wrap;
}
.content .right ul li{overflow: hidden;position: relative;padding: 10px 21px 0;width: 242px;height: 305px;/* border: 2px solid skyblue; */
}
/* 产品内容 */
.content .pic{width: 200px;height: 180px;
}
.content .info{margin-top: 14px;margin-bottom: 5px;height: 60px;line-height: 19px;
}
.content .price{color: #aa2113;
}
.content .price span{margin-left: 5px;font-size: 22px;
}
/* 产品底部绿色区域 */
.content li .cover{position: absolute;left: 0;/* bottom: 0; */bottom: -86px;padding-top: 15px;width: 242px;height: 84px;background-color: #00be9a;text-align: center;color: #fff;transition: all 0.5s;
}
.content .cover p:nth-child(1){font-size: 18px;
}
.content .cover p:nth-child(2){margin: 3px auto 6px;width: 120px;height: 1px;background-color: rgb(255,255,255,0.11 );
}
.content .cover p:nth-child(3){font-size: 13px;
}
.content .cover p:nth-child(3) .iconfont{font-size: 14px;
}
/* 鼠标悬停到li时，显示被隐藏的cover，即改变cover的位置 */
.content .right li:hover .cover{bottom: 0;
}/* 最新专题 */
.topic{margin-bottom: 40px;
}
.topic .title{margin-top: 100px;
}
.topic-bd ul{display: flex;justify-content: space-between;
}
.topic-bd li{width: 405px;height: 355px;/* background-color: pink; */
}.topic-bd li .pic{ position: relative;width: 405px; height: 288px;
}
.topic-bd li .txt{display: flex;justify-content: space-between;padding: 0 15px;align-items: center;width: 405px;height: 67px;/* background-color: skyblue; */font-size: 14px;color: #666;
}
.topic-bd li .txt .left{display: flex;
}
.topic-bd li .txt .left p{margin-right: 20px;
}
.topic-bd li .txt .left p:nth-child(1) i{color: #aa2113;
}
/* 定位区域--文字 */
.topic-bd .cover{position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;padding: 0 15px;align-items: center;width: 405px;height: 90px;background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);
}
.topic-bd .cover .left{color: #fff;
}
.topic-bd .cover .left h4{margin-bottom: 6px;font-size: 20px;
}
.topic-bd .cover .right{padding: 0 7px;height: 25px;background-color: #fff;color: #aa2113;font-size: 15px;
}
.topic-bd .cover .right span{font-size: 18px;
}/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper{margin: 0 auto;width: 1240px;
}
/* 快捷导航 */
.shortcut{height: 53px;background-color: #333;
}
.shortcut .wrapper{display: flex;justify-content: flex-end;height: 52px;/* background-color: pink; */
}
.shortcut ul{display: flex;line-height: 53px;
}
.shortcut li a{padding: 0 15px;border-right: 1px solid #999;font-size: 14px;color: #fff;
}
.shortcut li:last-child a{border: none;
}
.shortcut ul li .iconfont{margin-right: 4px;vertical-align: middle;
}
.shortcut ul .login{color: #5EB69C;
}
/* 头部区域 */
.header{display: flex;margin-top: 22px;margin-bottom: 22px;height: 88px;/* background-color: pink; */
}
/* logo区域 */
.logo{width: 200px;height: 88px;margin-right: 40px;background-color: skyblue;
}
.logo a{display: flex;width: 200px;height: 88px;background-image: url(../images/logo.png);font-size: 0;
}
/* 导航区域 */
.nav{margin-top: 33px;margin-right: 28px;
}
.nav ul{display: flex;
}
.nav li{margin-right: 47px;
}
.nav li a{padding-bottom: 10px;
}
.nav li a:hover{border-bottom: 2px solid #5EB69C;color: #5EB69C;
}
/* 搜索 */
.search{display: flex;margin-top: 33px;margin-right: 45px;width: 170px;height: 34px;border-bottom: 2px solid #f4f4f4;
}
.search .iconfont{margin-right: 8px;font-size: 18px;color: #ccc;
}
.search input{/* 浏览器优先生效input标签的默认宽度，所以flex=1不生效 *//* 解决方法：重置input默认宽度，即width：0 */flex: 1;width: 0;
}
.search input::placeholder{font-size: 16px;color: #ccc;
}
/* 购物车 */
.cart{position: relative;margin-top: 32px;
}
.cart .iconfont{font-size: 24px;
}
.cart i{position: absolute;top: 1px;/* right定位右对齐，如果文字多了，向左撑开，可能会遮住其他的内容 *//* right: 1px; *//* left定位左对齐，文字多了向右撑开 */left: 15px;padding: 0 6px;height: 15px;background-color: #e26237;border-radius: 8px;color: #FFFefefe;line-height: 15px;
}
/* 底部区域 */
.footer{height: 580px;background-color: #f5f5f5;
}/* 服务 */
.service{padding: 60px 0;height: 178px;border: 1px solid #e8e8e8;
}
.service ul{display: flex;justify-content: space-evenly;
}
.service li{display: flex;height: 58px;width: 190px;/* background-color: pink; */
}.service li h5{margin-right: 20px;width: 58px;height: 58px;background-image: url(../images/sprite.png);
}.service li:nth-child(2) h5{background-position: 0 -58px;
}
.service li:nth-child(3) h5{background-position: 0 -115px;
}
.service li:nth-child(4) h5{background-position: 0 -172px;
}
.service li p{font-size: 28px;line-height: 58px;
}/* 帮助中心 */
.help{display: flex;justify-content: space-between;padding-top: 60px;height: 300px;/* background-color:pink; */
}
/* left */
.help .left{display: flex;
}.help .left dl{margin-right: 84px;
}
.help .left dl:nth-child(5) {margin-right: 0;
}
.help .left dt{margin-bottom: 30px;font-size: 18px;
}
.help .left dd{margin-bottom: 10px;
}
.help .left a{color: #969696;
}
.help .left .iconfont{color: #5EB69C;
}
/* right */
.help .right ul{display: flex;
}
.help .right li:first-child{margin-right: 55px;
}
.help .right .pic{margin-bottom: 10px;width: 120px;height: 120px;
}
.help .right p{color: #969696;text-align: center;
}
/* 版权 */
.copyright {text-align: center;
}
.copyright p{margin-bottom: 10px;color: #a1a1a1;
}
.copyright p a{margin: 0 10px;color: #a1a1a1;
}
