任务描述
本关任务：使用 html 搭建购物网站的结构。
相关知识
为了完成本关任务，你需要掌握：
1.如何搭建头部区域
2.banner 区域
3.新鲜好物模块
4.推荐区域
5.热门品牌
6.生鲜区域
7.服装区域
8.餐厨区域
9.底部区域
如何搭建头部区域
网站最终展示效果如下图所示
第一关
step1/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.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="#"><span class="iconfont icon-mobile-phone"></span>手机版</a>
</li>
</ul>
</div>
</div>
<!-- 头部区域 -->
<!----- div 标签，class为 “header wrapper” ----->
<div class="header wrapper">
<!----- Begin ----->
<!----- End ----->
<!-- 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="sear">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<div class="subnav">
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<!----- div 标签，class为 “goods wrapper” ----->
<div class="goods wrapper">
<!----- Begin ----->
<!----- End ----->
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods1.png" alt="">
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods2.png" alt="">
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<!----- div 标签，class为 “recommand wrapper” ----->
<!----- Begin ----->
<div class="recommand wrapper">
<!----- End ----->
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</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="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</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>第二关
step2/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
<!-- 快捷导航区域 -->
<!----- div 标签，class为 “shortcut” ----->
<div class="shortcut">
<span class="iconfont icon-search"></span>
<div class="subnav">
<!----- Begin ----->
<!----- End ----->
<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="#"><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="sear">
<!----- span 标签，class为 “iconfont icon-search” ----->
<!----- Begin ----->
<!----- End ----->
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<!----- div 标签，class为 “subnav” ----->
<!----- Begin ----->
<!----- End ----->
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<div class="goods wrapper">
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods1.png" alt="">
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods2.png" alt="">
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<div class="recommand wrapper">
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</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="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</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>第三关
step3/base.css
/* 去除常见标签默认的 margin 和 padding */
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
font: 16px/1.5 "Microsoft Yahei",
"Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
/* 去除列表默认样式 */
ul,
ol {
/***** Begin *****/
list-style: none;
/***** End *****/
}
/* 去除默认的倾斜效果 */
em,
i {
font-style: normal;
}
/* 去除a标签默认下划线，并设置默认文字颜色 */
a {
text-decoration: none;
color: #333;
}
/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
width: 100%;
height: 100%;
vertical-align: middle;
}
/* 去除input默认样式 */
input {
border: none;
outline: none;
color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 400;
}
step3/common.css
/* 页面头尾的相同样式 */
.wrapper {
margin: 0 auto;
width: 1240px;
/* background-color: pink; */
}
.shortcut {
height: 52px;
background-color: #333;
}
.shortcut .wrapper ul {
display: flex;
/* align-item居中对齐弹性盒的各项 <div> 元素 */
/***** Begin *****/
align-items: center;
justify-content: flex-end;
/* 水平布局justify-content从行尾位置开始排列 */
/***** Begin *****/
/***** End *****/
height: 52px;
}
/* .shortcut .wrapper ul li {
} */
.shortcut .wrapper ul li a {
padding: 0 15px;
font-size: 14px;
color: #fff;
border-right: 1px solid #999;
}
.shortcut .wrapper ul li .login{
color: #5EB69C;
}
.shortcut .wrapper ul li:last-child a{
border-right: none;
}
.shortcut li .iconfont {
margin-right: 4px;
color: #fff;
vertical-align: middle;
}
.header {
display: flex;
margin-top: 22px;
margin-bottom: 22px;
height: 88px;
/* background-color: pink; */
}
.logo {
margin-right: 40px;
width: 200px;
height: 88px;
/* background-color: blueviolet; */
}
.logo a {
display: block;
background-image: url(../images/logo.png);
width: 200px;
height: 88px;
font-size: 0;
}
.header .nav {
margin-top: 33px;
margin-right: 28px;
}
.header .nav ul {
display: flex;
}
.header .nav ul li {
margin-right: 47px;
}
.header .nav ul li a {
padding-bottom: 10px;
}
.header .nav li a:hover {
color: #5EB69C;
border-bottom: 2px solid #5EB69C;
}
.header .sear {
display: flex;
margin-top: 33px;
margin-right: 45px;
width: 170px;
height: 36px;
border-bottom: 2px solid #F4F4F4;
}
.header .sear input {
/* 重置input框的默认宽度 */
width: 0;
flex: 1;
}
.header .sear .iconfont {
margin-right: 8px;
font-size: 18px;
color: #ccc;
}
.header .sear input::placeholder {
font-size: 16px;
color: #ccc;
}
.header .cart {
margin-top: 32px;
position: relative;
}
.header .cart .iconfont{
/* display: block; */
font-size: 24px;
}
.header .cart i {
padding: 0 5.5px;
position: absolute;
top: 1px;
left: 12px;
font-size: 14px;
height: 15px;
line-height: 15px;
background-color: #E26237;
border-radius: 8px;
color: #FFFEFE;
}
.footer {
height: 580px;
background-color: #F5F5F5;
}
.footer .service {
padding: 60px 0;
height: 178px;
border-bottom: 1px solid #E8E8E8;
}
.footer .service ul {
display: flex;
justify-content: space-evenly;
}
.footer .service li {
display: flex;
width: 190px;
height: 58px;
/* background-color: blue; */
}
.footer .service li h5 {
height: 58px;
width: 58px;
margin-right: 20px;
background-image: url(../images/sprite.png);
}
.footer .service ul li p {
font-size: 28px;
line-height: 58px;
}
.footer .help {
display: flex;
justify-content: space-between;
padding-top: 60px;
/* padding-bottom: 100px; */
height: 300px;
/* background-color: pink; */
}
.footer .help .left {
display: flex;
}
.footer .help .left dl{
margin-right: 84px;
}
.footer .help .left dl:last-child {
margin-right: 0;
}
.footer .help .left dl .iconfont{
margin-left: 5px;
color: #00BE9A;
}
.footer .help .left dt {
margin-bottom: 30px;
font-size: 18px;
}
.footer .help .left dd {
margin-bottom: 10.5px;
}
.footer .help .left dd a{
font-size: 16px;
color: #969696;
}
.footer .help .right ul {
display: flex;
}
.footer .help .right ul li:first-child {
margin-right: 55px;
}
.footer .help .right ul li .pic img {
width: 120px;
height: 120px;
margin-bottom: 10px;
}
.footer .help .right ul li .pic p {
text-align: center;
color: #969696 ;
}
.footer .copyright p {
margin-bottom: 10px;
text-align: center;
color: #A1A1A1 ;
}
.footer .copyright a {
margin: 0 10px;
color: #A1A1A1 ;
}
第四关
step4/index.css
.banner {
height: 500px;
background-color: #F5F5F5;
/* background-color: pink; */
}
.banner .wrapper {
position: relative;
overflow: hidden;
height: 500px;
background-color: pink;
}
.banner .wrapper .pic {
display: flex;
/* flex布局，父级宽度不够，子级元素被挤小了 */
width: 3720px;
height: 500px;
}
.banner .wrapper .subnav {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 500px;
background: #000000;
opacity: 0.42;
}
.banner .wrapper .subnav li {
display: flex;
justify-content: space-between;
padding-left: 30px;
padding-right: 12px;
line-height: 50px;
height: 50px;
color: #fff;
cursor: pointer;
}
.banner .wrapper .subnav li div a {
margin-right: 5px;
font-size: 14px;
color: #fff;
}
.banner .wrapper .subnav li div a:first-child {
margin-right: 14px;
font-size: 16px;
}
.banner .wrapper .subnav li .iconfont {
font-size: 14px;
}
/*对 .banner .wrapper .subnav li 内容添加鼠标监听*/
/***** Begin *****/
.banner .wrapper .subnav li:hover {
.hotbrand .wrapper .mid a:hover {
.bd .right ul li:hover {
.bd .right ul li:hover .pop_up {
/***** End *****/
background-color: #00BE9A;
}
.banner .wrapper ol {
margin-right: 16px;
margin-bottom: 17px;
display: flex;
position: absolute;
bottom: 0;
right: 0;
}
.banner .wrapper ol li {
margin-left: 8px;
width: 22px;
height: 22px;
/* background-color: pink; */
border-radius: 50%;
cursor: pointer;
}
.banner .wrapper ol li i {
margin: 4px;
display: block;
width: 14px;
height: 14px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
}
.banner .wrapper ol .active {
background-color: rgba(255, 255, 255, 0.5);
}
.banner .wrapper ol .active i {
background-color: #fff;
}
.goods {
margin-top: 40px;
height: 476px;
/* background-color: palegoldenrod; */
}
.hd {
margin-top: 40px;
margin-bottom: 30px;
height: 42px;
display: flex;
justify-content: space-between;
/* background-color: pink; */
}
.hd .left {
display: flex;
}
.hd .left h2 {
margin-right: 35px;
font-size: 30px;
}
.hd .left p {
align-self: self-end;
color: #A1A1A1;
}
.hd .right {
line-height: 42px;
color: #A1A1A1;
}
.hd .right .more {
color: #A1A1A1;
}
.hd .right .iconfont {
margin-left: 10px;
font-size: 12px;
}
.products ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products ul li {
width: 304px;
height: 404px;
background-color: #EEF9F4 ;
}
.products ul li .pic {
width: 304px;
height: 304px;
}
.products ul li .text {
padding: 18px 0px 16px;
text-align: center;
}
.products ul li .text h4 {
margin-bottom: 8px;
font-size: 20px;
}
.goods .products ul li .text p{
font-size: 18px;
color: #AA2113;
}
.goods .products ul li .text span {
margin-left: 3px;
font-size: 22px;
}
.recommand .products ul li {
background-color: #fff;
}
.recommand .products ul li .text p {
color: #A1A1A1 ;
font-size: 16px;
}
.hotbrand {
margin-top: 60px;
margin-bottom: 20px;
padding: 40px 0;
height: 468px;
background-color: #F5F5F5;
}
/* .hotbrand .wrapper {
background-color: pink;
} */
.hotbrand .wrapper .hd {
margin-top: 0;
margin-bottom: 0;
}
.hotbrand .wrapper .mid {
margin: 5px 0 15px 0;
display: flex;
justify-content: flex-end;
height: 20px;
}
.hotbrand .wrapper .mid a {
width: 20px;
height: 20px;
background-color: rgba(9, 9, 9, 0.3);
text-align: center;
line-height: 20px;
}
/*对 .hotbrand .wrapper .mid a 内容添加鼠标监听*/
/***** Begin *****/
/***** End *****/
background-color: #00BE9A;
}
.hotbrand .wrapper .mid a:last-child {
margin-left: 12px;
}
.hotbrand .wrapper .mid .iconfont {
color: #fff;
}
.hotbrand .wrapper .products ul li {
width: 244px;
height: 306px;
}
.fresh {
margin-top: 60px;
margin-bottom: 40px;
/* background-color: pink; */
}
.fresh .hd {
margin-bottom: 20px;
}
.hd .right {
display: flex;
}
.hd .right ul {
display: flex;
margin-right: 58px;
}
.hd .right ul li a {
margin-left: 6px;
padding: 0 7px;
}
.hd .right ul li .active {
background-color: #00BE9A;
color: #fff;
}
.bd {
display: flex;
justify-content: space-between;
height: 610px;
/* background-color: pink; */
}
.bd .left {
width: 248px;
height: 610px;
}
.bd .right {
width: 968px;
height: 610px;
/* background-color: pink; */
}
.bd .right ul {
display: flex;
flex-wrap: wrap;
}
.bd .right ul li {
position: relative;
padding: 10px 21px 0;
width: 242px;
height: 305px;
overflow: hidden;
/* background-color: pink; */
/* border: 2px solid #000000; */
}
.bd .right ul li .pic {
width: 200px;
height: 180px;
}
.bd .right ul li .text .info {
margin-top: 15px;
margin-bottom: 5px;
height: 60px;
line-height: 19px;
}
.bd .right ul li .text .price {
color: #AF2F22;
}
.bd .right ul li .text .price span {
margin-left: 5px;
font-size: 22px;
}
.bd .right ul li .pop_up {
padding: 16px 0 14px;
position: absolute;
left: 0;
bottom: -86px;
width: 240px;
height: 83px;
background-color: #00BE9A;
text-align: center;
color: #fff;
transition: all 0.5s;
}
.bd .right ul li .pop_up p:first-child {
margin-bottom: 4px;
font-size: 18px;
}
.bd .right ul li .pop_up div {
margin: 0 auto;
margin-bottom: 6px;
width: 120px;
height: 2px;
background-color: rgba(255, 255, 255, 0.11);
}
.bd .right ul li .pop_up p:nth-child(2) {
font-size: 13px;
}
/*对 .bd .right ul li 内容添加鼠标监听*/
/***** Begin *****/
/***** End *****/
border: 2px solid #00BE9A;
}
/*对 .bd .right ul li 内容添加鼠标监听，显示.pop_up的内容*/
/***** Begin *****/
/***** End *****/
bottom: 0px;
}
.clothes {
margin-bottom: 40px;
height: 672px;
/* background-color: pink; */
}
.clothes .hd {
margin-bottom: 20px;
}
.kitchen {
margin-bottom: 40px;
height: 672px;
}
.clothes .hd {
margin-bottom: 20px;
}
.house {
margin-bottom: 100px;
height: 672px;
}
.house .hd {
margin-bottom: 20px;
}
.new {
margin-bottom: 40px;
height: 427px;
/* background-color: pink; */
}
.new .hd {
margin-bottom: 30px;
}
.new .content {
height: 355px;
}
.new .content ul {
display: flex;
justify-content: space-between;
}
.new .content ul li {
width: 405px;
height: 355px;
/* background-color: pink; */
}
.new .content ul li a .pic {
position: relative;
width: 405px;
height: 288px;
}
.new .content ul li a>.text {
padding: 0 15px;
display: flex;
justify-content: space-between;
height: 67px;
line-height: 67px;
}
.new .content ul li a>.text .prve .icon-favorites-fill {
color: brown;
font-size: 14px;
}
.new .content ul li a>.text {
color: #666;
}
.new .content ul li a>.text .prve {
display: flex;
}
.new .content ul li a>.text p {
margin-right: 20px;
}
.new .content ul li a .pic .cover{
display: flex;
justify-content: space-between;
padding: 20px 15px 0;
position: absolute;
left: 0;
bottom: 0;
width: 405px;
height: 90px;
background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%);
/* background-color: green; */
}
.new .content ul li a .pic .cover .text {
color: #fff;
}
.new .content ul li a .pic .cover .text h3 {
font-size: 20px;
margin-bottom: 6px;
}
.new .content ul li a .pic .cover .price {
padding: 0 7px;
margin-top: 15px;
height: 25px;
background-color: #fff;
color: #AA2113 ;
text-align: center;
line-height: 25px;
font-size: 15px;
}
.new .content ul li a .pic .cover .price span {
font-size: 18px;
}
第五关
step5/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小兔鲜儿-新鲜、惠民、快捷！</title>
<meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台。">
<meta name="keywords" content="小兔鲜儿,食品,生鲜,服装,家电,电商,购物">
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./iconfont/iconfont.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="#"><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="sear">
<span class="iconfont icon-search"></span>
<input type="text" placeholder="搜一搜">
</div>
<!-- 购物车 -->
<div class="cart">
<a href="#">
<span class="iconfont icon-cart-full"></span>
<i>2</i>
</a>
</div>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="wrapper">
<!-- 大图 -->
<ul class="pic">
<!-- 显示./uploads/banner1.png，并且添加超链接，链接路径暂为# -->
<!----- Begin ----->
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<img src="./uploads/goods1.png" alt="">
<img src="./uploads/goods2.png" alt="">
<!----- End ----->
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/banner1.png" alt=""></a></li>
</ul>
<!-- 测导航 -->
<div class="subnav">
<ul>
<li>
<div>
<a href="#">生鲜</a>
<a href="#">水果</a>
<a href="#">蔬菜</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">美食</a>
<a href="#">面点</a>
<a href="#">干果</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">餐厨</a>
<a href="#">数码产品</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">电器</a>
<a href="#">床品</a>
<a href="#">四件套</a>
<a href="#">被枕</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">居家</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
<a href="#">辅食</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">洗护</a>
<a href="#">洗发</a>
<a href="#">洗护</a>
<a href="#">美妆</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">孕婴</a>
<a href="#">奶粉</a>
<a href="#">玩具</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">服饰</a>
<a href="#">男装</a>
<a href="#">女装</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">杂货</a>
<a href="#">户外</a>
<a href="#">图书</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
<li>
<div>
<a href="#">品牌</a>
<a href="#">品牌制造</a>
</div>
<span class="iconfont icon-arrow-right-bold"></span>
</li>
</ul>
</div>
<!-- 小圆点 -->
<ol>
<li class="active"><i></i></li>
<li><i></i></li>
<li><i></i></li>
</ol>
</div>
</div>
<!-- 新鲜好物 -->
<div class="goods wrapper">
<div class="hd">
<div class="left">
<h2>新鲜好物</h2>
<p>新鲜出炉 品质靠谱</p>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<!-- 显示./uploads/goods1.png 商品图片 -->
<!----- Begin ----->
<!----- End ----->
</div>
<div class="text">
<h4>KN95级莫兰迪色防护口罩</h4>
<p>¥<span>79</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<!-- 显示./uploads/goods2.png 商品图片 -->
<!----- Begin ----->
<!----- End ----->
</div>
<div class="text">
<h4>紫檀外独板三层普洱茶盒</h4>
<p>¥<span>566</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods3.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>58</span></p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/goods4.png" alt="">
</div>
<div class="text">
<h4>法拉蒙高颜值记事本可定制</h4>
<p>¥<span>3579</span></p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 推荐区域 -->
<div class="recommand wrapper">
<div class="hd">
<div class="left">
<h2>人气推荐</h2>
<p>人气爆款 不容错过</p>
</div>
<!-- <div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div> -->
</div>
<div class="products">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend1.png" alt="">
</div>
<div class="text">
<h4>特惠推荐</h4>
<p>我猜得到 你的需要</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend2.png" alt="">
</div>
<div class="text">
<h4>爆款推荐</h4>
<p>人气好物推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend3.png" alt="">
</div>
<div class="text">
<h4>节日礼品一站买全</h4>
<p>编辑尽心整理推荐</p>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/recommend4.png" alt="">
</div>
<div class="text">
<h4>鲜花园艺</h4>
<p>给生活增加仪式感</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<!-- 热门品牌 -->
<div class="hotbrand">
<div class="wrapper">
<div class="hd">
<div class="left">
<h2>热门品牌</h2>
<p>国际经典 品质认证</p>
</div>
</div>
<div class="mid">
<a href="#"><span class="iconfont icon-arrow-left-bold"></span></a>
<a href="#"><span class="iconfont icon-arrow-right-bold"></span></a>
</div>
<div class="products">
<ul>
<li><a href="#"><img src="./uploads/hot1.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot2.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot3.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot4.png" alt=""></a></li>
<li><a href="#"><img src="./uploads/hot5.png" alt=""></a></li>
</ul>
</div>
</div>
</div>
<!-- 生鲜区域 -->
<div class="fresh wrapper">
<div class="hd">
<div class="left">
<h2>生鲜</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/fresh_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>双味千层，手抓饼烤肉组合</h4>
<p>240g/袋 4片装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>云南甘蔗慢熬红糖馒头</h4>
<p>220g/袋 5个装</p>
<p>加热即食</p>
</div>
<p class="price">¥<span>9.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>日式风味小圆饼</h4>
<p>圆形【海盐味】</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>59.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>全麦奶油浓香小面包</h4>
<p>50g*12袋</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>49.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>秘制外皮五福摩提大福点心</h4>
<p>150g/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>39.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水果面膜韩国蜂蜜柚子茶</h4>
<p>560g/瓶</p>
<p>冲调饮品</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>浓情比利时巧克力礼盒装</h4>
<p>205克/盒</p>
<p>糖果零食</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>抹茶奶油小蛋糕礼盒装</h4>
<p>220克/盒</p>
<p>美味西点</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 服装区域 -->
<div class="clothes wrapper">
<div class="hd">
<div class="left">
<h2>服饰</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/colthes_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>男女情侣抗菌夜视休闲跑鞋</h4>
<p>36/37/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>jessyline2022秋装专柜款</h4>
<p>M码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>499.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>高领纯羊毛针织打底衫毛衣</h4>
<p>S/M/L码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>259.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>潮流文艺袜子女纯棉船袜</h4>
<p>36-38</p>
<p>居家日用</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>新款韩系设计感美背衬衫裙</h4>
<p>M码 黑色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>139.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>头层牛皮真皮百搭个性腰带</h4>
<p>120cm</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>129.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/clothes7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>束念帆布ins潮百搭板鞋子</h4>
<p>36/36/38码</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>109.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/fresh8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>Descente迪桑特训练运动裤</h4>
<p>标码 墨绿色/白色/蓝色</p>
<p>新款服饰</p>
</div>
<p class="price">¥<span>230.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 餐厨区域 -->
<div class="kitchen wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/kitchen_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>紫砂茶漏茶渣茶叶过滤器</h4>
<p>【禅意舍得】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>189.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>简约贝壳果盘 零食收纳盘</h4>
<p>【灰色】</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>电动打奶泡器咖啡奶泡机</h4>
<p>KJBQ-4</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯保温壶大容量家用</h4>
<p>304不锈钢</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>龙泉青瓷碗碟盘餐具套装</h4>
<p>【碗+盘+杯子】</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>99.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>戚风蛋糕模具家用套装</h4>
<p>6/8胚子4寸</p>
<p>厨房好物</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>托盘家用放茶杯水杯茶盘</h4>
<p>水果餐盘</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/kitchen8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>哈尔斯双层隔热便携水杯</h4>
<p>橙色/绿色</p>
<p>居家好物</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 居家区域 -->
<div class="house wrapper">
<div class="hd">
<div class="left">
<h2>餐厨</h2>
</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">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="bd">
<div class="left">
<a href="#"><img src="./uploads/home_left.png" alt=""></a>
</div>
<div class="right">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home1.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>北极绒房间的彩虹全棉床单</h4>
<p>《房间的彩虹》</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>89.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home2.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>沃特曼毛绒玩具玩偶抱枕</h4>
<p>23cm小号粉色70332</p>
<p>创意礼品</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home3.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>水培植物玻璃花瓶大</h4>
<p>水养花瓶1903</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home4.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>韩版网红仙女发圈小皮筋</h4>
<p>森系头绳（三件套）</p>
<p>个性配饰</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home5.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>竖纹透明仿真干花插花花瓶</h4>
<p>竖纹玻璃花瓶【透明】</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>29.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home6.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>折叠简约家用简易书桌</h4>
<p>1.22米折叠桌二档【白色】</p>
<p>生活日用</p>
</div>
<p class="price">¥<span>79.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home7.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>自动吸水懒人花盆</h4>
<p>直径15cm</p>
<p>鲜花生活</p>
</div>
<p class="price">¥<span>19.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/home8.png" alt="">
</div>
<div class="text">
<div class="info">
<h4>百富帝byford碳化竹席枕套</h4>
<p>单只装 48-74cm</p>
<p>床上用品</p>
</div>
<p class="price">¥<span>30.99</span></p>
</div>
</a>
<div class="pop_up">
<p>找相似</p>
<div></div>
<p>发现更多宝贝 <span class="iconfont icon-arrow-right-bold"></span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 最新专题 -->
<div class="new wrapper">
<div class="hd">
<div class="left">
<h2>最新专题</h2>
</div>
<div class="right">
<a href="#" class="more">查看全部</a>
<span class="iconfont icon-arrow-right-bold"></span>
</div>
</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic1.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic2.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="pic">
<img src="./uploads/topic3.png" alt="">
<div class="cover">
<div class="text">
<h3>吃这些美食才不算辜负自己</h3>
<p>餐厨起居洗护好物</p>
</div>
<div class="price">
<p>¥<span>29.9</span><span>起</span></p>
</div>
</div>
</div>
<div class="text">
<div class="prve">
<p><span class="iconfont icon-favorites-fill"></span><span>1202</span></p>
<p><span class="iconfont icon-browse"></span><span>1800</span></p>
</div>
<div class="next">
<span class="iconfont icon-comment"></span><span>246</span>
</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="#">在线客服</a><span class="iconfont icon-customer-service"></span></dd>
<dd><a href="#">客服电话 400-4000-000</a></dd>
<dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
</dl>
</div>
<div class="right">
<ul>
<li>
<div class="pic">
<img src="./images/wechat.png" alt="">
<p>微信公众号</p>
</div>
</li>
<li>
<div class="pic">
<img src="./images/app.png" alt="">
<p>APP下载二维码</p>
</div>
</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>
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
