前端（HTML + CSS）小兔鲜儿项目（仿）
败者_食尘 2024-08-20 11:03:02 阅读 79
前言
这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码
项目总览
一、头部区域
头部的 购物车 和 手机 用的是 文字图标，所以效果可以和文字一样
购物车右上角用的是绝对定位
logo用的是 h1 标签，用来提高网站搜索排名
二、banner区域
banner区域左侧导航 :hover 和 轮播图
轮播图用了部分JS代码
三、主体区域
新鲜好物
人气推荐
热门品牌
居家
居家 :hover 为过渡
美食
服饰
母婴
最新专题
四、尾部区域-版权区域
图标没找到相应的 精灵图 所以也是用的 文字图标
源码
HTML（index.html）代码
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<!-- meta:desc -->
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">code>
<!-- meta:kw -->
<meta name="keywords" content="小兔鲜儿，食品，生鲜，服装，家电，电商，购物">code>
<title>小兔鲜儿 - 新鲜 惠民 快捷！</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">code>
<!-- 引入字体图标样式 -->
<link rel="stylesheet" href="./iconfont/iconfont.css">code>
<!-- 引入相关样式 -->
<link rel="stylesheet" href="./CSS/base.css">code>
<link rel="stylesheet" href="./CSS/common.css">code>
<link rel="stylesheet" href="./CSS/index.css">code>
</head>
<body>
<!-- 快捷导航开始 -->
<div class="shortcut">code>
<div class="wrapper">code>
<ul>
<li><a href="#">请先登录</a></li>code>
<li><a href="#">免费注册</a></li>code>
<li><a href="#">我的订单</a></li>code>
<li><a href="#">会员中心</a></li>code>
<li><a href="#">帮助中心</a></li>code>
<li><a href="#">关于我们</a></li>code>
<li><a href="#"><span class="iconfont icon-shouji1">手机版</span></a></li>code>
</ul>
</div>
</div>
<!-- 快捷导航结束 -->
<!-- 头部-布局开始 -->
<div class="header wrapper">code>
<!-- logo -->
<div class="logo">code>
<h1><a href="#">小兔鲜儿</a></h1>code>
</div>
<!-- 导航 -->
<div class="nav">code>
<ul>
<li><a href="#">首页</a></li>code>
<li><a href="#">居家</a></li>code>
<li><a href="#">美食</a></li>code>
<li><a href="#">服饰</a></li>code>
<li><a href="#">母婴</a></li>code>
<li><a href="#">个护</a></li>code>
<li><a href="#">严选</a></li>code>
<li><a href="#">数码</a></li>code>
<li><a href="#">运动</a></li>code>
</ul>
</div>
<!-- 搜索 -->
<div class="search">code>
<span class="iconfont icon-search"></span>code>
<input type="text" placeholder="搜一搜">code>
</div>
<!-- 购物车 -->
<div class="cart">code>
<a href="#"><span class="iconfont icon-gouwuche"></span></a>code>
<i>6</i>
</div>
</div>
<!-- 头部-布局结束 -->
<!-- banner开始 -->
<div class="banner">code>
<div class="wrapper">code>
<!-- 图片 -->
<ul class="pic">code>
<li><a href="#"><img src="./uploads/banner/banner1.jpg" alt=""></a></li>code>
<li><a href="#"><img src="./uploads/banner/banner2.jpg" alt=""></a></li>code>
<li><a href="#"><img src="./uploads/banner/banner3.jpg" alt=""></a></li>code>
<li><a href="#"><img src="./uploads/banner/banner4.jpg" alt=""></a></li>code>
<li><a href="#"><img src="./uploads/banner/banner5.jpg" alt=""></a></li>code>
</ul>
<!-- 箭头 -->
<!-- 上一张 prev -->
<a href="#" class="prev">code>
<i class="iconfont icon-danjiantou-zuoyouqiehuan"></i>code>
</a>
<!-- 下一张 next -->
<a href="#" class="next">code>
<i class="iconfont icon-danjiantou-zuoyouqiehuan1"></i>code>
</a>
<!-- 侧导航 -->
<div class="subnav">code>
<ul>
<li>
<a href="#">居家</a>code>
<a href="#">茶咖酒具</a>code>
<a href="#">水具杯壶</a>code>
</li>
<li>
<a href="#">美食</a>code>
<a href="#">网易黑猪</a>code>
<a href="#">水产海鲜</a>code>
</li>
<li>
<a href="#">服饰</a>code>
<a href="#">室外拖鞋</a>code>
<a href="#">春夏潮鞋</a>code>
</li>
<li>
<a href="#">母婴</a>code>
<a href="#">T恤/polo/衬衫</a>code>
<a href="#">卫衣/毛衫</a>code>
</li>
<li>
<a href="#">个护</a>code>
<a href="#">家庭清洁</a>code>
<a href="#">浴室用品</a>code>
</li>
<li>
<a href="#">严选</a>code>
<a href="#">卫浴用品</a>code>
<a href="#">高级珠宝</a>code>
</li>
<li>
<a href="#">数码</a>code>
<a href="#">影音娱乐</a>code>
<a href="#">乐器</a>code>
</li>
<li>
<a href="#">运动</a>code>
<a href="#">登机箱</a>code>
<a href="#">托运箱</a>code>
</li>
<li>
<a href="#">杂项</a>code>
<a href="#">乐器杂项</a>code>
</li>
<li>
<a href="#">品牌</a>code>
<a href="#">品牌推荐</a>code>
</li>
</ul>
</div>
<!-- 圆点指示器 -->
<div class="circle"></div>code>
</div>
</div>
<!-- banner结束 -->
<!-- 新鲜好物开始 -->
<div class="goods wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>新鲜好物</h3>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">code>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="bd">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/goods/goods1.jpg" alt=""></div>code>
<div class="text">code>
<h4>魔术盒快客杯旅行盖碗茶具套装</h4>
<p>¥148.00</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/goods/goods2.jpg" alt=""></div>code>
<div class="text">code>
<h4>情侣款时尚户外轻型徒步鞋环保大底</h4>
<p>¥364.00</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/goods/goods3.jpg" alt=""></div>code>
<div class="text">code>
<h4>Kenroll女士防滑夏季人字沙滩拖鞋</h4>
<p>¥99.00</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/goods/goods4.jpg" alt=""></div>code>
<div class="text">code>
<h4>2021春季新品，宝宝四季连体哈衣59-90cm</h4>
<p>¥55.00</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 新鲜好物结束 -->
<!-- 人气推荐开始 -->
<div class="recommend wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>人气推荐</h3>
<p>人气爆款 不容错过</p>
</div>
</div>
<!-- 内容 -->
<div class="bd">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/recommend/recommend1.jpg" alt=""></div>code>
<div class="text">code>
<h4>特惠推荐</h4>
<p>它们最实惠</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/recommend/recommend2.jpg" alt=""></div>code>
<div class="text">code>
<h4>爆款推荐</h4>
<p>它们最受欢迎</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/recommend/recommend3.jpg" alt=""></div>code>
<div class="text">code>
<h4>一站买全</h4>
<p>使用场景下精心优选</p>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/recommend/recommend4.jpg" alt=""></div>code>
<div class="text">code>
<h4>领券中心</h4>
<p>更多超值优惠券</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 人气推荐结束 -->
<!-- 热门品牌开始 -->
<div class="brand">code>
<div class="wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>热门品牌</h3>
<p>国际经典 品质保证</p>
</div>
<div class="button">code>
<a href="#" class="prev"><span class="iconfont icon-danjiantou-zuoyouqiehuan"></span></a>code>
<a href="#" class="next"><span class="iconfont icon-danjiantou-zuoyouqiehuan1"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="bd">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/热门品牌/热门品牌1.jpg" alt=""></div>code>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/热门品牌/热门品牌2.jpg" alt=""></div>code>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/热门品牌/热门品牌3.jpg" alt=""></div>code>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/热门品牌/热门品牌4.jpg" alt=""></div>code>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/热门品牌/热门品牌5.jpg" alt=""></div>code>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 热门品牌结束 -->
<!-- 居家开始 -->
<div class="home wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>居家</h3>
</div>
<div class="right">code>
<ul>
<li><a href="#">茶咖酒具</a></li>code>
<li><a href="#">水具杯壶</a></li>code>
<li><a href="#">宠物食品</a></li>code>
<li><a href="#">宠物用品</a></li>code>
</ul>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="content">code>
<div class="left">code>
<a href="#"><img src="./uploads/home/home_left.jpg" alt=""></a>code>
</div>
<div class="right">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_01.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">日式黑陶功夫茶组双侧把茶具礼盒装</p>code>
<p class="desc">日式风格单把设计防烫隔热美观大气</p>code>
<p class="price">¥288.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_02.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">五谷丰登好兆头白酒杯壶套装一壶五杯+骰子</p>code>
<p class="desc">纯手工精制，每一个细节都精益求精，源自20多年经验的老师傅精心手作</p>code>
<p class="price">¥188.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_03.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">魔术盒快客杯旅行盖碗茶具套装</p>code>
<p class="desc">轻松收纳携带方便随时随地品茶</p>code>
<p class="price">¥148.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_04.png" alt=""></div>code>
<div class="txt">code>
<p class="head">大师监制龙泉青瓷茶叶罐</p>code>
<p class="desc">世界非遗|青瓷世家出品|釉润如玉</p>code>
<p class="price">¥139.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_05.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">电动红酒醒酒器分酒器取酒器</p>code>
<p class="desc">贴心醒酒阀设计，随心开启，自由切换、轻松开启和关闭醒酒器功能</p>code>
<p class="price">¥169.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_06.png" alt=""></div>code>
<div class="txt">code>
<p class="head">非遗大师手作标本级六色建盏套组</p>code>
<p class="desc">用低价一次集齐六色建盏，大师手作，盏盏精美</p>code>
<p class="price">¥439.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_07.png" alt=""></div>code>
<div class="txt">code>
<p class="head">竹制干泡茶盘正方形沥水茶台品茶盘</p>code>
<p class="desc">干泡蓄水拆洗方便轻便实用</p>code>
<p class="price">¥109.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/home/home_08.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">与众不同的口感汝瓷白酒杯套组1壶4杯</p>code>
<p class="desc">白酒的最佳搭档，席间一道风景——汝瓷白酒套组</p>code>
<p class="price">¥108.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家结束 -->
<!-- 美食开始 -->
<div class="food wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>美食</h3>
</div>
<div class="right">code>
<ul>
<li><a href="#">网易黑猪</a></li>code>
<li><a href="#">水产海鲜</a></li>code>
<li><a href="#">全球美食</a></li>code>
<li><a href="#">冷冻冷藏</a></li>code>
</ul>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="content">code>
<div class="left">code>
<a href="#"><img src="./uploads/food/food_left.png" alt=""></a>code>
</div>
<div class="right">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_01.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">网易味央黑猪去骨蹄膀500g*1袋</p>code>
<p class="desc">安心黑猪甄选好礼</p>code>
<p class="price">¥65.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_02.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">鲜活捕捞，爽口鱿鱼须250g*1包（约15g/根）</p>code>
<p class="desc">鲜甜海味，低脂低热量</p>code>
<p class="price">¥19.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_03.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">网易味央黑猪猪蹄330g*1袋</p>code>
<p class="desc">安心黑猪甄选好礼</p>code>
<p class="price">¥38.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_04.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">网易味央黑猪大排330g*1袋</p>code>
<p class="desc">安心黑猪甄选好礼</p>code>
<p class="price">¥37.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_05.png" alt=""></div>code>
<div class="txt">code>
<p class="head">营养高蛋白鲜嫩黑鱼片300克</p>code>
<p class="desc">活鱼切片，免洗免浆</p>code>
<p class="price">¥33.80</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_06.png" alt=""></div>code>
<div class="txt">code>
<p class="head">中段精华，银鳕鱼切片200g</p>code>
<p class="desc">“餐桌上的营养师”，蛋白质丰富</p>code>
<p class="price">¥109.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_07.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">个大体肥，冷冻对虾400g</p>code>
<p class="desc">新鲜优质虾品，星级享受</p>code>
<p class="price">¥39.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/food/food_08.png" alt=""></div>code>
<div class="txt">code>
<p class="head">鲜甜海味，深海大虾200g</p>code>
<p class="desc">人工筛选优质大虾，可做宝贝辅食</p>code>
<p class="price">¥26.80</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 美食结束 -->
<!-- 服饰开始 -->
<div class="clothes wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>服饰</h3>
</div>
<div class="right">code>
<ul>
<li><a href="#">室外拖鞋</a></li>code>
<li><a href="#">春夏潮鞋</a></li>code>
<li><a href="#">飞织系列</a></li>code>
<li><a href="#">一脚蹬懒人系列</a></li>code>
</ul>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="content">code>
<div class="left">code>
<a href="#"><img src="./uploads/clothes/clothes_left.png" alt=""></a>code>
</div>
<div class="right">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_01.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">Kenroll女士防滑夏季人字沙滩拖鞋</p>code>
<p class="desc">清爽人字拖鞋，轻松夏日出行</p>code>
<p class="price">¥39.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_02.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">KENROLL室外防滑男女运动拖鞋</p>code>
<p class="desc">潮流外穿，运动鞋型</p>code>
<p class="price">¥19.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_03.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">男女经典两带式软木拖鞋</p>code>
<p class="desc">经典两带式，舒适不过时</p>code>
<p class="price">¥28.80</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_04.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">KENROLL吾皇潮趣男女室外拖鞋</p>code>
<p class="desc">潮流吾皇万睡</p>code>
<p class="price">¥20.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_05.png" alt=""></div>code>
<div class="txt">code>
<p class="head">可机洗系列-女式尖头平底鞋</p>code>
<p class="desc">解放双手，随盒赠送洗鞋袋</p>code>
<p class="price">¥109.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_06.png" alt=""></div>code>
<div class="txt">code>
<p class="head">情侣款经典小白鞋</p>code>
<p class="desc">一双胜十双的穿搭利器</p>code>
<p class="price">¥239.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_07.png" alt=""></div>code>
<div class="txt">code>
<p class="head">深船型两带式可外穿软弹拖鞋</p>code>
<p class="desc">软弹如云朵般，开天窗版透气</p>code>
<p class="price">¥15.90</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/clothes/clothes_08.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">KENROLL男女简洁多彩一片式室外拖</p>code>
<p class="desc">多彩多色，夏日出行防护</p>code>
<p class="price">¥18.80</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 服饰结束 -->
<!-- 母婴开始 -->
<div class="mother&baby wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>母婴</h3>
</div>
<div class="right">code>
<ul>
<li><a href="#">T恤/polo/衬衫</a></li>code>
<li><a href="#">卫衣/毛衫</a></li>code>
<li><a href="#">外套/套装</a></li>code>
<li><a href="#">连体衣/礼盒</a></li>code>
</ul>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="content">code>
<div class="left">code>
<a href="#"><img src="./uploads/clothes/clothes_left.png" alt=""></a>code>
</div>
<div class="right">code>
<ul>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_01.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">2021春季新品，宝宝四季连体哈衣59-90cm</p>code>
<p class="desc">不同开襟方式，穿出更多花样</p>code>
<p class="price">¥55.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_02.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">儿童字母纯棉POLO衫73-130cm</p>code>
<p class="desc">甄选100%纯棉面料，手感细腻柔软，穿着舒适透气。</p>code>
<p class="price">¥99.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_03.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">复古文艺宝宝格纹短袖衬衫73-110cm</p>code>
<p class="desc">经典格纹，柔软舒适，清凉透气，小熊贴布，萌趣可爱</p>code>
<p class="price">¥89.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_04.png" alt=""></div>code>
<div class="txt">code>
<p class="head">毛茸茸小熊出没，儿童羊羔绒背心73-90cm</p>code>
<p class="desc">杜邦科技棉填充，保暖舒适</p>code>
<p class="price">¥79.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_05.png" alt=""></div>code>
<div class="txt">code>
<p class="head">温暖拥抱新生，婴童杜邦棉爬服0-3岁</p>code>
<p class="desc">杜邦科技棉填充，保暖舒适</p>code>
<p class="price">¥129.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_06.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">基础百搭，儿童套头针织毛衣1-9岁</p>code>
<p class="desc">宽松版型，搭出休闲风格</p>code>
<p class="price">¥119.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_07.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">2021年春季新品，儿童纯棉长袖T恤73-130cm</p>code>
<p class="desc">多色可选，童趣别致</p>code>
<p class="price">¥59.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic"><img src="./uploads/mother&baby/mather&baby_08.jpg" alt=""></div>code>
<div class="txt">code>
<p class="head">95%白鸭绒，儿童厚款面包羽绒服110-140cm</p>code>
<p class="desc">三层结构防跑绒，鸭绒轻便保暖</p>code>
<p class="price">¥439.00</p>code>
</div>
</a>
<!-- 产品底部 -- 过渡 -->
<a href="#">code>
<div class="cover">code>
<p>找相似</p>
<p></p>
<p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>code>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 母婴结束 -->
<!-- 最新专题开始 -->
<div class="topic wrapper">code>
<!-- 标题 -->
<div class="title">code>
<div class="left">code>
<h3>最新专题</h3>
</div>
<div class="right">code>
<a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>code>
</div>
</div>
<!-- 内容 -->
<div class="topic-bd">code>
<ul>
<li>
<a href="#">code>
<div class="pic">code>
<img src="./uploads/topic/topic-1.png" alt="">code>
<!-- 定位区域 -->
<div class="cover">code>
<div class="left">code>
<h4>儿童3D/平面口罩 30枚</h4>
<p>说是儿童口罩但很大，不适合低龄儿童使用</p>
</div>
<div class="right">code>
<span>¥49起</span>
</div>
</div>
</div>
<div class="txt">code>
<div class="left">code>
<p>
<i class="iconfont icon-aixin" style="color: rgb(255, 0, 0);"></i>code>
<span>5438</span>
</p>
<p>
<i class="iconfont icon-icon-test"></i>code>
<span>8423</span>
</p>
</div>
<div class="right">code>
<p>
<i class="iconfont icon-pinglun1"></i>code>
<span>4096</span>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic">code>
<img src="./uploads/topic/topic-2.png" alt="">code>
<!-- 定位区域 -->
<div class="cover">code>
<div class="left">code>
<h4>地表强温 男式鹅绒毛领经典派克宽松羽绒服</h4>
<p>很好，很暖和(｡･ω･｡)！</p>
</div>
<div class="right">code>
<span>¥1299起</span>
</div>
</div>
</div>
<div class="txt">code>
<div class="left">code>
<p>
<i class="iconfont icon-aixin"></i>code>
<span>5904</span>
</p>
<p>
<i class="iconfont icon-icon-test"></i>code>
<span>6517</span>
</p>
</div>
<div class="right">code>
<p>
<i class="iconfont icon-pinglun1"></i>code>
<span>2543</span>
</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">code>
<div class="pic">code>
<img src="./uploads/topic/topic-3.png" alt="">code>
<!-- 定位区域 -->
<div class="cover">code>
<div class="left">code>
<h4>煎炸蒸煮 日式双耳多用锅 小煎锅寿喜烧</h4>
<p>寿喜锅、煲仔砂陶碗以及石锅多项功能于一身的多用型选手~简即繁，外形设计较日式，更加偏向于制作寿喜烧那种菜肴的铸铁锅多一点，再加上六层压铸技术，所以还没收到的时候以为会很重，结果超轻！包装精简，女生也能美美使用~拿到锅的第一件事情必然是开锅~开锅不繁琐，效益享万年～底部也用心地印上了胖选独有的logo~熠熠生辉~严选控一本满足！锅体受热很快，较普通锑锅相比受热更加均匀，几乎同等的水能优先烧开，媲美小巧的雪平锅，但容量规格又秒杀雪平锅~锅盖两个出气的设计很好地避免了凑上去观看内部蒸煮情况时被蒸汽误伤的情形，对了！贴心地设计了两个隔热小把手套，我宣布~这多功能锅，现在就是我宝贝里面第一心头好！！！</p>
</div>
<div class="right">code>
<span>¥169起</span>
</div>
</div>
</div>
<div class="txt">code>
<div class="left">code>
<p>
<i class="iconfont icon-aixin"></i>code>
<span>1134</span>
</p>
<p>
<i class="iconfont icon-icon-test"></i>code>
<span>6275</span>
</p>
</div>
<div class="right">code>
<p>
<i class="iconfont icon-pinglun1"></i>code>
<span>2546</span>
</p>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 最新专题结束 -->
<!-- 尾部-布局开始 -->
<div class="footer">code>
<div class="wrapper">code>
<!-- 服务 -->
<div class="service">code>
<ul>
<li>
<span class="iconfont icon-kehujiage"></span>code>
<p>价格亲民</p>
</li>
<li>
<span class="iconfont icon-wuliu1"></span>code>
<p>物流快捷</p>
</li>
<li>
<span class="iconfont icon-pinzhi"></span>code>
<p>品质新鲜</p>
</li>
<li>
<span class="iconfont icon-shouhou2"></span>code>
<p>售后无忧</p>
</li>
</ul>
</div>
<!-- 帮助中心 -->
<div class="help">code>
<!-- 文字 -->
<div class="left">code>
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>code>
<dd><a href="#">支付方式</a></dd>code>
<dd><a href="#">售后规则</a></dd>code>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">配送运费</a></dd>code>
<dd><a href="#">配送范围</a></dd>code>
<dd><a href="#">配送时间</a></dd>code>
</dl>
<dl>
<dt>关于我们</dt>
<dd><a href="#">平台规则</a></dd>code>
<dd><a href="#">联系我们</a></dd>code>
<dd><a href="#">问题反馈</a></dd>code>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>code>
<dd><a href="#">退款说明</a></dd>code>
<dd><a href="#">取消订单</a></dd>code>
</dl>
<dl>
<dt>服务热线</dt>
<dd><a href="#">在线客服<span class="iconfont icon-kefu"></span></a></dd>code>
<dd><a href="#">客服电话 400-0000-000</a></dd>code>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>code>
</dl>
</div>
<!-- 二维码 -->
<div class="right">code>
<ul>
<li>
<div class="pic"><span class="iconfont icon-weixin"></span></div>code>
<p>
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。