完整网站实例——制作你自己的购物网站

任务描述
本关任务:使用 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>

WordPress是一个流行的开源内容管理系统(CMS),它可以用于搭建各种类型的网站,包括购物网站。下面是使用WordPress搭建购物网站的一般步骤: 1. 安装WordPress:首先,您需要在您的服务器上安装WordPress。您可以从WordPress官方网站下载最新版本的WordPress,并按照官方文档的指导进行安装。 2. 选择合适的主题:WordPress提供了大量的免费和付费主题供您选择。您可以根据您的需求选择一个适合的主题,确保它具有购物功能和易于定制。 3. 安装电子商务插件:为了将您的网站转变为一个功能完善的购物网站,您需要安装一个电子商务插件。WooCommerce是一个非常受欢迎的WordPress电子商务插件,它提供了丰富的功能和灵活的定制选项。 4. 设置产品和分类:使用电子商务插件,您可以轻松地添加和管理产品。您可以创建不同的产品分类,并为每个产品设置价格、描述、图像等信息。 5. 配置支付和配送选项:为了接受在线支付,您需要配置支付网关,如PayPal、Stripe等。此外,您还需要设置配送选项,以便为客户提供准确的运费计算和配送方式选择。 6. 定制网站外观:通过WordPress的主题定制功能,您可以轻松地调整网站的外观和布局。您可以更改颜色、字体、背景图像等,以使您的网站与您的品牌一致。 7. 添加其他功能和插件:根据您的需求,您可以安装其他插件来增强您的购物网站的功能。例如,您可以添加社交媒体分享按钮、优惠券功能、产品评价等。 8. 测试和发布:在发布之前,确保测试您的购物网站的各个功能,包括添加产品到购物车、结算流程、支付和配送等。确保一切正常后,您可以将网站发布到线上。 请注意,搭建一个购物网站需要一些技术知识和经验。如果您对WordPress不熟悉或者想要一个更专业的购物网站,您也可以考虑雇佣专业的WordPress开发人员来帮助您完成搭建过程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值