前端（HTML + CSS）小兔鲜儿项目（仿）

已于 2024-08-09 18:43:54 修改
阅读量1k 收藏 13
点赞数 6
文章标签： 前端 html css
于 2024-08-09 18:43:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li3123537691/article/details/141068462
版权

前言

这是一个简单的商城网站，代码部分为HTML + CSS 和少量JS代码

项目总览

一、头部区域

头部的 购物车 和 手机 用的是 文字图标，所以效果可以和文字一样

购物车右上角用的是绝对定位

logo用的是 h1 标签，用来提高网站搜索排名

二、banner区域

banner区域左侧导航 :hover 和 轮播图

轮播图用了部分JS代码

三、主体区域

新鲜好物

人气推荐

热门品牌

居家

居家 :hover 为过渡

美食

服饰

母婴

最新专题

四、尾部区域-版权区域

图标没找到相应的 精灵图 所以也是用的 文字图标

源码

HTML（index.html）代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- meta:desc -->
    <meta name="description" content="小兔鲜儿官网，致力于打造全球最大的食品、生鲜电商购物平台">
    <!-- meta:kw -->
    <meta name="keywords" content="小兔鲜儿，食品，生鲜，服装，家电，电商，购物">
    <title>小兔鲜儿 - 新鲜 惠民 快捷！</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入相关样式 -->
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
    <!-- 快捷导航开始 -->
    <div class="shortcut">
        <div class="wrapper">
            <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="#"><span class="iconfont icon-shouji1">手机版</span></a></li>
            </ul>
        </div>
    </div>
    <!-- 快捷导航结束 -->

    <!-- 头部-布局开始 -->
    <div class="header wrapper">
        <!-- logo -->
        <div class="logo">
            <h1><a href="#">小兔鲜儿</a></h1>
        </div>

        <!-- 导航 -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">居家</a></li>
                <li><a href="#">美食</a></li>
                <li><a href="#">服饰</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">个护</a></li>
                <li><a href="#">严选</a></li>
                <li><a href="#">数码</a></li>
                <li><a href="#">运动</a></li>
            </ul>
        </div>

        <!-- 搜索 -->
        <div class="search">
            <span class="iconfont icon-search"></span>
            <input type="text" placeholder="搜一搜">
        </div>

        <!-- 购物车 -->
        <div class="cart">
            <a href="#"><span class="iconfont icon-gouwuche"></span></a>
            <i>6</i>
        </div>
    </div>
    <!-- 头部-布局结束 -->

    <!-- banner开始 -->
    <div class="banner">
        <div class="wrapper">
            <!-- 图片 -->
            <ul class="pic">
                <li><a href="#"><img src="./uploads/banner/banner1.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner/banner2.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner/banner3.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner/banner4.jpg" alt=""></a></li>
                <li><a href="#"><img src="./uploads/banner/banner5.jpg" alt=""></a></li>
            </ul>

            <!-- 箭头 -->
            <!-- 上一张 prev -->
            <a href="#" class="prev">
                <i class="iconfont icon-danjiantou-zuoyouqiehuan"></i>
            </a>
    
            <!-- 下一张 next -->
            <a href="#" class="next">
                <i class="iconfont icon-danjiantou-zuoyouqiehuan1"></i>
            </a>

            <!-- 侧导航 -->
            <div class="subnav">
                <ul>
                    <li>
                        <a href="#">居家</a>
                        <a href="#">茶咖酒具</a>
                        <a href="#">水具杯壶</a>
                    </li>

                    <li>
                        <a href="#">美食</a>
                        <a href="#">网易黑猪</a>
                        <a href="#">水产海鲜</a>
                    </li>

                    <li>
                        <a href="#">服饰</a>
                        <a href="#">室外拖鞋</a>
                        <a href="#">春夏潮鞋</a>
                    </li>

                    <li>
                        <a href="#">母婴</a>
                        <a href="#">T恤/polo/衬衫</a>
                        <a href="#">卫衣/毛衫</a>
                    </li>

                    <li>
                        <a href="#">个护</a>
                        <a href="#">家庭清洁</a>
                        <a href="#">浴室用品</a>
                    </li>

                    <li>
                        <a href="#">严选</a>
                        <a href="#">卫浴用品</a>
                        <a href="#">高级珠宝</a>
                    </li>

                    <li>
                        <a href="#">数码</a>
                        <a href="#">影音娱乐</a>
                        <a href="#">乐器</a>
                    </li>

                    <li>
                        <a href="#">运动</a>
                        <a href="#">登机箱</a>
                        <a href="#">托运箱</a>
                    </li>

                    <li>
                        <a href="#">杂项</a>
                        <a href="#">乐器杂项</a>
                    </li>

                    <li>
                        <a href="#">品牌</a>
                        <a href="#">品牌推荐</a>
                    </li>
                </ul>
            </div>

            <!-- 圆点指示器 -->
            <div class="circle"></div>
        </div>
    </div>
    <!-- banner结束 -->

    <!-- 新鲜好物开始 -->
    <div class="goods wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>新鲜好物</h3>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods/goods1.jpg" alt=""></div>
                        <div class="text">
                            <h4>魔术盒快客杯旅行盖碗茶具套装</h4>
                            <p>¥148.00</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods/goods2.jpg" alt=""></div>
                        <div class="text">
                            <h4>情侣款时尚户外轻型徒步鞋环保大底</h4>
                            <p>¥364.00</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods/goods3.jpg" alt=""></div>
                        <div class="text">
                            <h4>Kenroll女士防滑夏季人字沙滩拖鞋</h4>
                            <p>¥99.00</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/goods/goods4.jpg" alt=""></div>
                        <div class="text">
                            <h4>2021春季新品，宝宝四季连体哈衣59-90cm</h4>
                            <p>¥55.00</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 新鲜好物结束 -->

    <!-- 人气推荐开始 -->
    <div class="recommend wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>人气推荐</h3>
                <p>人气爆款 不容错过</p>
            </div>
        </div>

        <!-- 内容 -->
        <div class="bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend/recommend1.jpg" alt=""></div>
                        <div class="text">
                            <h4>特惠推荐</h4>
                            <p>它们最实惠</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend/recommend2.jpg" alt=""></div>
                        <div class="text">
                            <h4>爆款推荐</h4>
                            <p>它们最受欢迎</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend/recommend3.jpg" alt=""></div>
                        <div class="text">
                            <h4>一站买全</h4>
                            <p>使用场景下精心优选</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="pic"><img src="./uploads/recommend/recommend4.jpg" alt=""></div>
                        <div class="text">
                            <h4>领券中心</h4>
                            <p>更多超值优惠券</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 人气推荐结束 -->

    <!-- 热门品牌开始 -->
    <div class="brand">
        <div class="wrapper">
            <!-- 标题 -->
            <div class="title">
                <div class="left">
                    <h3>热门品牌</h3>
                    <p>国际经典 品质保证</p>
                </div>
                <div class="button">
                    <a href="#" class="prev"><span class="iconfont icon-danjiantou-zuoyouqiehuan"></span></a>
                    <a href="#" class="next"><span class="iconfont icon-danjiantou-zuoyouqiehuan1"></span></a>
                </div>
            </div>

            <!-- 内容 -->
            <div class="bd">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/热门品牌/热门品牌1.jpg" alt=""></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/热门品牌/热门品牌2.jpg" alt=""></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/热门品牌/热门品牌3.jpg" alt=""></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/热门品牌/热门品牌4.jpg" alt=""></div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/热门品牌/热门品牌5.jpg" alt=""></div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 热门品牌结束 -->

    <!-- 居家开始 -->
    <div class="home wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>居家</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">茶咖酒具</a></li>
                    <li><a href="#">水具杯壶</a></li>
                    <li><a href="#">宠物食品</a></li>
                    <li><a href="#">宠物用品</a></li>
                </ul>
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/home/home_left.jpg" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_01.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">日式黑陶功夫茶组双侧把茶具礼盒装</p>
                                <p class="desc">日式风格单把设计防烫隔热美观大气</p>
                                <p class="price">¥288.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_02.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">五谷丰登好兆头白酒杯壶套装一壶五杯+骰子</p>
                                <p class="desc">纯手工精制，每一个细节都精益求精，源自20多年经验的老师傅精心手作</p>
                                <p class="price">¥188.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_03.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">魔术盒快客杯旅行盖碗茶具套装</p>
                                <p class="desc">轻松收纳携带方便随时随地品茶</p>
                                <p class="price">¥148.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_04.png" alt=""></div>
                            <div class="txt">
                                <p class="head">大师监制龙泉青瓷茶叶罐</p>
                                <p class="desc">世界非遗|青瓷世家出品|釉润如玉</p>
                                <p class="price">¥139.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_05.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">电动红酒醒酒器分酒器取酒器</p>
                                <p class="desc">贴心醒酒阀设计，随心开启，自由切换、轻松开启和关闭醒酒器功能</p>
                                <p class="price">¥169.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_06.png" alt=""></div>
                            <div class="txt">
                                <p class="head">非遗大师手作标本级六色建盏套组</p>
                                <p class="desc">用低价一次集齐六色建盏，大师手作，盏盏精美</p>
                                <p class="price">¥439.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_07.png" alt=""></div>
                            <div class="txt">
                                <p class="head">竹制干泡茶盘正方形沥水茶台品茶盘</p>
                                <p class="desc">干泡蓄水拆洗方便轻便实用</p>
                                <p class="price">¥109.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/home/home_08.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">与众不同的口感汝瓷白酒杯套组1壶4杯</p>
                                <p class="desc">白酒的最佳搭档，席间一道风景——汝瓷白酒套组</p>
                                <p class="price">¥108.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 居家结束 -->

    <!-- 美食开始 -->
    <div class="food wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>美食</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">网易黑猪</a></li>
                    <li><a href="#">水产海鲜</a></li>
                    <li><a href="#">全球美食</a></li>
                    <li><a href="#">冷冻冷藏</a></li>
                </ul>
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/food/food_left.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_01.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">网易味央黑猪去骨蹄膀500g*1袋</p>
                                <p class="desc">安心黑猪甄选好礼</p>
                                <p class="price">¥65.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_02.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">鲜活捕捞，爽口鱿鱼须250g*1包（约15g/根）</p>
                                <p class="desc">鲜甜海味，低脂低热量</p>
                                <p class="price">¥19.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_03.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">网易味央黑猪猪蹄330g*1袋</p>
                                <p class="desc">安心黑猪甄选好礼</p>
                                <p class="price">¥38.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_04.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">网易味央黑猪大排330g*1袋</p>
                                <p class="desc">安心黑猪甄选好礼</p>
                                <p class="price">¥37.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_05.png" alt=""></div>
                            <div class="txt">
                                <p class="head">营养高蛋白鲜嫩黑鱼片300克</p>
                                <p class="desc">活鱼切片，免洗免浆</p>
                                <p class="price">¥33.80</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_06.png" alt=""></div>
                            <div class="txt">
                                <p class="head">中段精华，银鳕鱼切片200g</p>
                                <p class="desc">“餐桌上的营养师”，蛋白质丰富</p>
                                <p class="price">¥109.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_07.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">个大体肥，冷冻对虾400g</p>
                                <p class="desc">新鲜优质虾品，星级享受</p>
                                <p class="price">¥39.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/food/food_08.png" alt=""></div>
                            <div class="txt">
                                <p class="head">鲜甜海味，深海大虾200g</p>
                                <p class="desc">人工筛选优质大虾，可做宝贝辅食</p>
                                <p class="price">¥26.80</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 美食结束 -->

    <!-- 服饰开始 -->
    <div class="clothes wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>服饰</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">室外拖鞋</a></li>
                    <li><a href="#">春夏潮鞋</a></li>
                    <li><a href="#">飞织系列</a></li>
                    <li><a href="#">一脚蹬懒人系列</a></li>
                </ul>
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/clothes/clothes_left.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_01.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">Kenroll女士防滑夏季人字沙滩拖鞋</p>
                                <p class="desc">清爽人字拖鞋，轻松夏日出行</p>
                                <p class="price">¥39.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_02.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">KENROLL室外防滑男女运动拖鞋</p>
                                <p class="desc">潮流外穿，运动鞋型</p>
                                <p class="price">¥19.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_03.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">男女经典两带式软木拖鞋</p>
                                <p class="desc">经典两带式，舒适不过时</p>
                                <p class="price">¥28.80</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_04.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">KENROLL吾皇潮趣男女室外拖鞋</p>
                                <p class="desc">潮流吾皇万睡</p>
                                <p class="price">¥20.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_05.png" alt=""></div>
                            <div class="txt">
                                <p class="head">可机洗系列-女式尖头平底鞋</p>
                                <p class="desc">解放双手，随盒赠送洗鞋袋</p>
                                <p class="price">¥109.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_06.png" alt=""></div>
                            <div class="txt">
                                <p class="head">情侣款经典小白鞋</p>
                                <p class="desc">一双胜十双的穿搭利器</p>
                                <p class="price">¥239.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_07.png" alt=""></div>
                            <div class="txt">
                                <p class="head">深船型两带式可外穿软弹拖鞋</p>
                                <p class="desc">软弹如云朵般，开天窗版透气</p>
                                <p class="price">¥15.90</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/clothes/clothes_08.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">KENROLL男女简洁多彩一片式室外拖</p>
                                <p class="desc">多彩多色，夏日出行防护</p>
                                <p class="price">¥18.80</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 服饰结束 -->

    <!-- 母婴开始 -->
    <div class="mother&baby wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>母婴</h3>
            </div>
            <div class="right">
                <ul>
                    <li><a href="#">T恤/polo/衬衫</a></li>
                    <li><a href="#">卫衣/毛衫</a></li>
                    <li><a href="#">外套/套装</a></li>
                    <li><a href="#">连体衣/礼盒</a></li>
                </ul>
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="content">
            <div class="left">
                <a href="#"><img src="./uploads/clothes/clothes_left.png" alt=""></a>
            </div>
            <div class="right">
                <ul>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_01.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">2021春季新品，宝宝四季连体哈衣59-90cm</p>
                                <p class="desc">不同开襟方式，穿出更多花样</p>
                                <p class="price">¥55.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_02.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">儿童字母纯棉POLO衫73-130cm</p>
                                <p class="desc">甄选100%纯棉面料，手感细腻柔软，穿着舒适透气。</p>
                                <p class="price">¥99.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_03.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">复古文艺宝宝格纹短袖衬衫73-110cm</p>
                                <p class="desc">经典格纹，柔软舒适，清凉透气，小熊贴布，萌趣可爱</p>
                                <p class="price">¥89.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_04.png" alt=""></div>
                            <div class="txt">
                                <p class="head">毛茸茸小熊出没，儿童羊羔绒背心73-90cm</p>
                                <p class="desc">杜邦科技棉填充，保暖舒适</p>
                                <p class="price">¥79.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_05.png" alt=""></div>
                            <div class="txt">
                                <p class="head">温暖拥抱新生，婴童杜邦棉爬服0-3岁</p>
                                <p class="desc">杜邦科技棉填充，保暖舒适</p>
                                <p class="price">¥129.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_06.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">基础百搭，儿童套头针织毛衣1-9岁</p>
                                <p class="desc">宽松版型，搭出休闲风格</p>
                                <p class="price">¥119.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_07.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">2021年春季新品，儿童纯棉长袖T恤73-130cm</p>
                                <p class="desc">多色可选，童趣别致</p>
                                <p class="price">¥59.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <div class="pic"><img src="./uploads/mother&baby/mather&baby_08.jpg" alt=""></div>
                            <div class="txt">
                                <p class="head">95%白鸭绒，儿童厚款面包羽绒服110-140cm</p>
                                <p class="desc">三层结构防跑绒，鸭绒轻便保暖</p>
                                <p class="price">¥439.00</p>
                            </div>
                        </a>
                        <!-- 产品底部 -- 过渡 -->
                        <a href="#">
                            <div class="cover">
                                <p>找相似</p>
                                <p></p>
                                <p>发现更多宝贝<span class="iconfont icon-arrow-right"></span></p>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 母婴结束 -->

    <!-- 最新专题开始 -->
    <div class="topic wrapper">
        <!-- 标题 -->
        <div class="title">
            <div class="left">
                <h3>最新专题</h3>
            </div>
            <div class="right">
                <a href="#" class="more">查看更多<span class="iconfont icon-arrow-right"></span></a>
            </div>
        </div>

        <!-- 内容 -->
        <div class="topic-bd">
            <ul>
                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic/topic-1.png" alt="">

                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>儿童3D/平面口罩 30枚</h4>
                                    <p>说是儿童口罩但很大，不适合低龄儿童使用</p>
                                </div>
                                <div class="right">
                                    <span>¥49起</span>
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-aixin" style="color: rgb(255, 0, 0);"></i>
                                    <span>5438</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-icon-test"></i>
                                    <span>8423</span>
                                </p>
                            </div>
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-pinglun1"></i>
                                    <span>4096</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic/topic-2.png" alt="">

                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>地表强温 男式鹅绒毛领经典派克宽松羽绒服</h4>
                                    <p>很好，很暖和(｡･ω･｡)！</p>
                                </div>
                                <div class="right">
                                    <span>¥1299起</span>
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-aixin"></i>
                                    <span>5904</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-icon-test"></i>
                                    <span>6517</span>
                                </p>
                            </div>
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-pinglun1"></i>
                                    <span>2543</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <div class="pic">
                            <img src="./uploads/topic/topic-3.png" alt="">

                            <!-- 定位区域 -->
                            <div class="cover">
                                <div class="left">
                                    <h4>煎炸蒸煮 日式双耳多用锅 小煎锅寿喜烧</h4>
                                    <p>寿喜锅、煲仔砂陶碗以及石锅多项功能于一身的多用型选手~简即繁，外形设计较日式，更加偏向于制作寿喜烧那种菜肴的铸铁锅多一点，再加上六层压铸技术，所以还没收到的时候以为会很重，结果超轻！包装精简，女生也能美美使用~拿到锅的第一件事情必然是开锅~开锅不繁琐，效益享万年～底部也用心地印上了胖选独有的logo~熠熠生辉~严选控一本满足！锅体受热很快，较普通锑锅相比受热更加均匀，几乎同等的水能优先烧开，媲美小巧的雪平锅，但容量规格又秒杀雪平锅~锅盖两个出气的设计很好地避免了凑上去观看内部蒸煮情况时被蒸汽误伤的情形，对了！贴心地设计了两个隔热小把手套，我宣布~这多功能锅，现在就是我宝贝里面第一心头好！！！</p>
                                </div>
                                <div class="right">
                                    <span>¥169起</span>
                                </div>
                            </div>
                        </div>
                        <div class="txt">
                            <div class="left">
                                <p>
                                    <i class="iconfont icon-aixin"></i>
                                    <span>1134</span>
                                </p>
                                <p>
                                    <i class="iconfont icon-icon-test"></i>
                                    <span>6275</span>
                                </p>
                            </div>
                            <div class="right">
                                <p>
                                    <i class="iconfont icon-pinglun1"></i>
                                    <span>2546</span>
                                </p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 最新专题结束 -->

    <!-- 尾部-布局开始 -->
    <div class="footer">
        <div class="wrapper">
            <!-- 服务 -->
            <div class="service">
                <ul>
                    <li>
                        <span class="iconfont icon-kehujiage"></span>
                        <p>价格亲民</p>
                    </li>
                    <li>
                        <span class="iconfont icon-wuliu1"></span>
                        <p>物流快捷</p>
                    </li>
                    <li>
                        <span class="iconfont icon-pinzhi"></span>
                        <p>品质新鲜</p>
                    </li>
                    <li>
                        <span class="iconfont icon-shouhou2"></span>
                        <p>售后无忧</p>
                    </li>
                </ul>
            </div>

            <!-- 帮助中心 -->
            <div class="help">
                <!-- 文字 -->
                <div class="left">
                    <dl>
                        <dt>购物指南</dt>
                        <dd><a href="#">购物流程</a></dd>
                        <dd><a href="#">支付方式</a></dd>
                        <dd><a href="#">售后规则</a></dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="#">配送运费</a></dd>
                        <dd><a href="#">配送范围</a></dd>
                        <dd><a href="#">配送时间</a></dd>
                    </dl>
                    <dl>
                        <dt>关于我们</dt>
                        <dd><a href="#">平台规则</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">问题反馈</a></dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="#">售后政策</a></dd>
                        <dd><a href="#">退款说明</a></dd>
                        <dd><a href="#">取消订单</a></dd>
                    </dl>
                    <dl>
                        <dt>服务热线</dt>
                        <dd><a href="#">在线客服<span class="iconfont icon-kefu"></span></a></dd>
                        <dd><a href="#">客服电话 400-0000-000</a></dd>
                        <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
                    </dl>
                </div>

                <!-- 二维码 -->
                <div class="right">
                    <ul>
                        <li>
                            <div class="pic"><span class="iconfont icon-weixin"></span></div>
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <div class="pic"><img src="./images/load.jpg" alt=""></div>
                            <p>APP下载二维码</p>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 版权 -->
            <div class="copyright">
                <p><a href="#">关于我们</a>
                <a href="#">帮助中心</a>
                <a href="#">售后服务</a>
                <a href="#">配送与验收</a>
                <a href="#">商务合作</a>
                <a href="#">推荐搜索</a>
                <a href="#">友情链接</a></p>
                <p>CopyRight © 小兔鲜儿</p>
            </div>
        </div>
    </div>
    <!-- 尾部-布局结束 -->
</body>

<!-- 轮播图 -->
<script>
    window.onload = function () {
    var pic = document.querySelector('.pic');
    var circle = document.querySelector('.circle');
    var thisIndex = 0;
    var picLi = pic.children;
    var circleA = circle.children;
    var flag = true;
    pic.style.width = pic.children.length * 1260 + 'px';
    for (var i = 0; i < pic.children.length; i++) {
        var aNode = document.createElement('a');
        aNode.setAttribute('index', i);	//设置自定义属性
        if (i == 0) {
            aNode.className = 'hover';
        }
        circle.appendChild(aNode);
    }

    // 设置监视器
    circle.addEventListener('click', function (e) {
        if (flag) {
            flag = false;
            if (e.target.nodeName != 'A') {
                return false;
            }
            thisIndex = e.target.getAttribute('index');
            slow(pic, -thisIndex * 1260, function () {
                flag = true;
            });
            circleChange();
        }
    })

    // 自动播放
    function antoChange() {
        setInterval(function () {
            if (flag) {
                flag = false;
                if (thisIndex >= circleA.length) {
                    thisIndex = 0;
                }
                slow(pic, -thisIndex * 1260, function () {
                    flag = true;
                });
                circleChange();
                thisIndex++;
            }
        }, 2500);
    }

    // 圆点样式
    function circleChange() {
        for (var i = 0; i < circleA.length; i++) {
            circleA[i].className = '';
        }
        circleA[thisIndex].className = 'hover';
    }
    function slow(obj, target, callback) {
        obj.myInter = setInterval(function () {
            var offsetLeft = obj.offsetLeft;
            var num = (target - offsetLeft) / 10;
            num > 0 ? num = Math.ceil(num) : num = Math.floor(num);
            if (offsetLeft == target) {
                clearInterval(obj.myInter);
                callback && callback();
            } else {
                obj.style.left = offsetLeft + num + 'px';
            }
        }, 10)
    }
    antoChange();
}
</script>
</html>

CSS样式（base.css）代码：

/* 去除常见标签默认的 margin 和 padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置网页统一的字体大小、行高、字体系列相关属性 */
body {
    font: 16px/1.5 "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
    color: #333;
}

/* 去除列表默认样式 */
h1,h2,h3,h4,h5,h6,ul,
ol {
    list-style: none;
}

/* 去除默认的倾斜效果 */
em,
i {
    font-style: normal;
}

/* 去除a标签默认下划线，并设置默认字体颜色 */
a {
    color: #333;
    text-decoration: none;
}

/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */
img {
    vertical-align: middle;
}

CSS样式（index.css）代码：

/* 头尾各个页面相同的样式 */
/* 版心 */
.wrapper {
    margin: 0 auto;
    width: 1240px;
}

/* 快捷导航开始 */
.shortcut {
    height: 52px;
    background-color: #333;
}

.shortcut .wrapper {
    display: flex;
    justify-content: flex-end;
    height: 52px;
}

.shortcut ul {
    display: flex;
    line-height: 52px;
}

.shortcut li a {
    padding: 0 15px;
    border-left: 1px solid #666;
    font-size: 14px;
    color: #cdcdcd;
}

.shortcut li:first-child a {
    border-left: 0;
}

.shortcut li a:hover{
    color: #27ba9b;
}
/* 快捷导航结束 */

/* 头部-布局开始 */
.header {
    display: flex;
    margin-top: 22px;
    margin-bottom: 22px;
    height: 88px;
}

/* logo开始 */
.logo {
    margin-right: 40px;
    width: 200px;
    height: 88px;
}

.logo a {
    display: block;
    width: 200px;
    height: 88px;
    background-image: url(../images/logo.png);
    background-size: 200px 88px;
    font-size: 0;
}
/* logo结束 */

/* 导航开始 */
.nav {
    margin-top: 33px;
    margin-right: 28px;
}

.nav ul {
    display: flex;
}

.nav li {
    margin-right: 47px;
}

.nav li a {
    padding-bottom: 10px;
}

.nav li a:hover {
    color: #27ba9b;
    border-bottom: 2px solid #27ba9b;
}
/* 导航结束 */

/* 搜索开始 */
.search {
    display: flex;
    margin-top: 33px;
    margin-right: 45px;
    width: 170px;
    height: 34px;
    border-bottom: 2px solid #f4f4f4;
}

.search .iconfont {
    margin-right: 8px;
    font-size: 18px;
    color: #333;
}

.search input {
    /* 浏览器优先生效 input 标签的默认宽度，所有 flex：1 不生效 */
    /* 解决办法：重置 input 默认宽度 → width：0 */
    flex: 1;
    width: 0;
    border: none;
    outline: none;
}

.search input::placeholder {
    font-size: 16px;
    color: #ccc;
    border: none;
}
/* 搜索结束 */

/* 购物车开始 */
.cart {
    position: relative;
    margin-top: 32px;
}


.cart .iconfont {
    font-size: 24px;
}

.cart i {
    position: absolute;
    top: 0;
    /* ringht 定位右对齐：如果文字多了，向左撑开，可能盖住其他内容 */
    /* right: 0; */

    /* left 定位左对齐：如果文字多了，向右撑开， */
    left: 18px;

    padding: 1px 6px;
    line-height: 1;
    background: #e26237;
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
}
/* 购物车结束 */
/* 头部-布局结束 */




/* 尾部-布局开始 */
.footer {
    height: 580px;
    background-color: #f5f5f5;
}

/* 服务开始 */
.service {
    padding: 60px 0;
    height: 178px;
    border-bottom: 1px solid #e8e8e8;
}

.service ul {
    display: flex;
    justify-content: space-evenly;
}

.service li {
    display: flex;
    width: 190px;
    height: 58px;
}

.service li .iconfont {
    margin-right: 20px;
    width: 58px;
    height: 58px;
    border: 2px solid #27ba9b;
    color: #27ba9b;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    line-height: 58px;
}

.service li:first-child .iconfont {
    padding-left: 2px;
}

.service li p {
    line-height: 58px;
    font-size: 28px;
}
/* 服务结束 */

/* 帮助中心开始 */
.help {
    display: flex;
    justify-content: space-between;
    padding-top: 60px;
    height: 300px;
}

/* 文字开始 */
.help .left {
    display: flex;
}

.help .left dl {
    margin-right: 84px;
}

.help .left dl:last-child {
    margin-right: 0;
}

.help .left dt {
    margin-bottom: 30px;
    font-size: 18px;
}

.help .left dd {
    margin-bottom: 10px;
}

.help .left a {
    font-size: 16px;
    color: #969696;
}

.help .left a:hover {
    color: #27ba9b;
}

.help .left a .iconfont {
    margin-left: 5px;
    color: #72d0ff;
}
/* 文字结束 */

/* 二维码开始 */
.help .right ul {
    display: flex;
}

.help .right li:first-child {
    margin-left: 84px;
    margin-right: 55px;
}

.help .right .pic {
    padding-top: 10px;
    margin-bottom: 10px;
    width: 120px;
    height: 120px;
    border: 1px solid #eae0e0;
}

.help .right .iconfont {
    margin-left: 16px;
    font-size: 72px;
    color: #666;
}

.help .right .iconfont:hover {
    color: #27ba9b;
    cursor: pointer;
}

.help .right img {
    margin-left: 10px;
    width: 100px;
    height: 100x;
}

.help .right p {
    color: #999;
    text-align: center;
}
/* 二维码结束 */
/* 帮助中心结束 */

/* 版权开始 */
.copyright p {
    margin-bottom: 20px;
    color: #999;
    line-height: 1;
    text-align: center;
}

.copyright a {
    padding: 0 10px;
    color: #999;
    border-right: 1px solid #999;
}

.copyright a:hover {
    color: #27ba9b;
}

.copyright a:last-child {
    border-right: 0;
}
/* 版权结束 */
/* 尾部-布局结束 */

CSS样式（index.css）代码：

/* 首页内容样式 */
/* banner开始 */
.banner {
    height: 500px;
    background-color: #f5f5f5;
}

.banner .wrapper {
    position: relative;
    height: 500px;
    overflow: hidden;
}

/* 图片开始 */
.banner .pic {
    position: absolute;
}

.banner .pic li {
    float: left;
    margin-right: 20px;
}
/* 图片结束 */

/* 箭头开始 */
.banner .prev,
.banner .next {
    /* 隐藏 */
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
}

/* 鼠标滑到banner区域，箭头要显示 display:block */
.banner .wrapper:hover .prev,
.banner .wrapper:hover .next {
    display: block;
}
.banner .prev {
    left: 270px;
}
.banner .next {
    right: 20px;
}

.banner .iconfont {
    font-size: 20px;
}
/* 箭头结束 */

/* 侧导航开始 */
.subnav {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.8);
}

.subnav li {
    padding-left: 40px;
    height: 50px;
    line-height: 50px;
}

.subnav li:hover {
    background-color: #27ba9b;
}

.subnav li a:first-child {
    font-size: 16px;
}

.subnav li a {
    color: #fff;
    font-size: 14px;
}
/* 侧导航结束 */

/* 圆点指示器开始 */
.circle {
    padding-left: 250px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
}

.circle a {
    margin-right: 12px;
    width: 12px;
    height: 12px;
    background-color: rgba(0, 0, 0, 0.3);
    display: block;
    border-radius: 50%;
    float: left;
}

.circle a.hover {
    background-color: #fff;
}
/* 圆点指示器结束 */
/* banner结束 */

/* 新鲜好物开始 */
/* 标题开始 -- 公共样式 */
.title {
    display: flex;
    justify-content: space-between;
    margin: 40px 0;
    height: 42px;
}

.title .left {
    display: flex;
}

.title .left h3 {
    font-size: 30px;
    margin-left: 6px;
    font-weight: normal;
}

.title .left p {
    margin-left: 20px;
    align-self: flex-end;
    color: #999;
}

.title .right .more {
    line-height: 42px;
    color: #999;
}

.title .right .more:hover {
    color: #27ba9b;
}

.title .right .more .iconfont {
    margin-left: 6px;
}
/* 标题结束 */

/* 内容开始 -- 公共样式 */
.bd ul {
    display: flex;
    justify-content: space-between;
}

.bd li {
    width: 306px;
    height: 406px;
    background-color: #f0f9f4;
    transition: all 0.5s;
}

.goods .bd li:hover,
.recommend .bd li:hover,
.topic .topic-bd li:hover {
    box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.2);
}

.bd li img {
    width: 306px;
    height: 306px;
    max-width: 100%;
    max-height: 100%;
    transition: all 0.5s;
}

.bd li .text {
    text-align: center;
    font-size: 22px;
    white-space: nowrap;
}

.bd li .text h4 {
    width: 306px;
    height: 42.8px;
    padding: 12px 30px 0;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd li .text p {
    padding: 12px 30px 0;
    color: #cf4444;
}
/* 内容结束 */
/* 新鲜好物结束 */

/* 人气推荐开始 */
.recommend {
    margin-bottom: 20px;
}

.recommend .bd li {
    transition: all 0.5s;
    background-color: #fff;
}

.recommend li .text p {
    color: #999;
    font-size: 18px;
}
/* 人气推荐结束 */

/* 热门品牌开始 */
.brand {
    background-color: #f5f5f5;
    height: 468px;
    
}

.brand .wrapper {
    overflow: hidden;
}

/* 标题开始 */
.brand .title {
    position: relative;
}

.brand .title .left {
    height: 42px;
}

.brand .button {
    position: absolute;
    right: 0;
    bottom: 0;

    /* 让 a 在一行显示，宽高生效 */
    display: flex;
}

.brand .button a {
    margin-left: 5px;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    line-height: 20px;
}

.brand .button .prev {
    background-color: #ccc;
}

.brand .button .next {
    background-color: #27ba9b;
}

/* 标题结束 */

/* 内容开始 */
.brand .bd li {
    width: 240px;
    height: 305px;
    margin-bottom: 40px;
}

.brand .bd img {
    width: 240px;
    height: 305px;
} 
/* 内容结束 */
/* 热门品牌结束 */

/* 居家开始 */
/* 标题开始 */
.title .right {
    display: flex;
}

/* 右侧导航 -- 公共样式 */
.title .right ul {
    display: flex;
}

.title .right li {
    
    line-height: 42px;
    text-align: center;
}

.title .right li:last-child {
    margin-right: 80px;
}

.title .right li a {
    padding: 2px 12px;
    border-radius: 4px;
}

.title .right li a:hover {
    color: #fff;
    background-color: #27ba9b;
}
/* 标题结束 */

/* 内容开始 -- 公共样式 */
.content {
    display: flex;
    justify-content: space-between;
}

.content .left img {
    width: 240px;
    height: 610px;
}

.content .right {
    width: 990px;
    height: 610px;
}

.content .right ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.content .right li {
    position: relative;
    padding: 10px 30px;
    width: 242px;
    height: 303px;
    border: 1px solid transparent;
    overflow: hidden;
}

.content .right li:hover {
    border: 1px solid #27ba9b;
}

.content .right li:nth-child(-n+4) {
    margin-bottom: 4px;
    border-bottom: 1px solid #27ba9a74;
}

.content .pic img {
    margin: 0 10px;
    width: 160px;
    height: 160px;
}

.content .txt p {
    margin-top: 6px;
}

.content .txt .head {
    height: 44px;
}

.content .txt .desc {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #666;
}

.content .txt .price {
    margin-top: 10px;
    color: #cf4444;
    font-size: 20px;
}

/* 产品底部 -- 过渡开始 */
.content li .cover {
    position: absolute;
    left: 0;
    bottom: -84px;
    padding-top: 15px;
    width: 241.6px;
    height: 84px;
    background-color: #27ba9b;
    text-align: center;
    color: #fff;
    /* 过渡 */
    transition: all 0.55s;
}

.content .cover p:first-child {
    font-size: 18px;
}

.content .cover p:nth-child(2) {
    margin: 5px auto 3px;
    width: 120px;
    height: 1px;
    background-color: #fff;
}

.content .cover p:nth-child(3) {
    font-size: 13px;
}

.content .cover p:nth-child(3) .iconfont {
    margin-left: 2px;
    font-size: 12px;
}

/* 鼠标悬停到li，显示cover，改变位置  */
.content .right li:hover .cover {
    bottom: 0;
}
/* 产品底部 -- 过渡结束 */
/* 内容结束 */
/* 居家结束 */


/* 最新专题开始 */
.topic-bd {
    margin-bottom: 40px;
}

.topic-bd ul {
    display: flex;
    justify-content: space-between;
}

.topic-bd li {
    width: 405px;
    height: 360px;
    transition: all 0.5s;
}

.topic-bd .pic {
    position: relative;
}

.topic-bd .pic img {
    width: 405px;
    height: 288px;
}

.topic-bd .txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    width: 405px;
    height: 72px;
    background-color: #f5f5f5;
    color: #999;
}

.topic-bd .txt .iconfont {
    font-size: 18px;
}

.topic-bd .txt .left {
    display: flex;
}

.topic-bd .txt .left p {
    margin-right: 25px;
}

/* 定位区域 -- 文字开始 */
.topic-bd .cover {
    position: relative;
    position: absolute;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

    width: 405px;
    height: 100px;
    background-image: linear-gradient(180deg, rgba(137, 137, 137, 0.00) 0%,
    rgba(0, 0, 0, 0.90) 100%);
}

.topic-bd .cover .left {
    position: absolute;
    bottom: 0;
    padding-bottom: 16px;
    width: 70%;
}

.topic-bd .cover .left h4 {
    font-weight: normal;
    font-size: 22px;
    color: #fff;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-bd .cover .left p {
    font-size: 19px;
    color: #999;
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-bd .cover .right {
    position: absolute;
    bottom: 25px;
    right: 16px;
    padding: 4px 8px 4px 7px;
    line-height: 1;
    font-size: 17px;
    color: #cf4444;
    background-color: #fff;
    border-radius: 2px;
}
/* 定位区域 -- 文字结束 */
/* 最新专题结束 */
败者_食尘
关注
01-小兔鲜儿
qq_45585640的博客
03-21 1411
01-小兔鲜儿
05-小兔鲜儿
qq_45585640的博客
03-28 414
本地购物车 01-购物车分析 总结： 购物车的各种操作都会有两种状态的区分，但是不会在组件中去区分。 而是在封装在vuex中的actions中去区分，在组件上只需调用actions即可。 在actions中通过user信息去区分登录状态 未登录，通过mutations修改vuex中的数据即可，vuex已经实现持久化，会同步保持在本地。 已登录，通过api接口去服务端操作，响应成功后通过mutations修改vuex中的数据即可，它也会同步在本地。 actions函数需要改成 async 函数，返回的
小兔鲜儿网站-网页源代码.zip
11-17
这段源代码是一款非常实用的网页制作工具，它以小兔鲜儿的形象为设计灵感，界面清新可爱，操作简单易懂。无论你是专业的网页设计师，还是初学者，都能在这个平台上轻松制作出属于自己的个性化网页。小兔鲜儿网页源代码提供了丰富的模板和元素，你可以根据自己的需求进行选择和搭配，创造出独一无二的网页效果。同时，它还支持多种编程语言，可以满足不同用户的需求。总的来说，大家可以根据这段源代码进行学习与模仿，或者与我的配套博客一起学习。https://blog.csdn.net/weixin_65106708/article/details/134300925?spm=1001.2014.3001.5501
HTML+CSS做的商城页面
热门推荐
qq_53682646的博客
10-04 1万+
品优购小商城，用html+css做的三个静态页面
前端商城系统设计与实现
qq_33449702的博客
03-25 686
要求一:综合 应 用 HTML、CSS、JS、 Vue 等 前 端 技术 ， 开发 一 个完 整的 微 商城前端项目。请 自 行 设 计 页 面 结 构 和 项 目 框 架 ， 要 求 能 完 成 选 定 专题的基础业务逻辑。购物类网站 ， 要 能 完 成 登 录 、 注 册 、 浏 览 商 品、观察商品的详情、添加商品到购物车、购物车中对商品进行增 删改 查 、支 付 购买 等。
02-小兔鲜儿
qq_45585640的博客
03-24 1301
首页模块 01-首页-商品分类渲染 实现：商品分类渲染，数据存储在vuex中。 基本步骤： 在API目录定义接口函数 在vuex中的category模块，定义修改分类列表函数，定义获取数据函数。 在Layout组件获取调用actions获取数据，在头部导航组件渲染即可。 优化：定义一个常量数据和后台保持一致（约定好9大分类） 这样不请求后台就能展示一级分类，不至于白屏。 落地代码： 定义API函数 src/api/home.js import request from "@/utils/r
Vue3.0小兔鲜儿
m0_60673782的博客
07-20 765
小兔鲜儿踩坑实录...更新中
小兔鲜儿案例
qq_40832034的博客
05-08 393
一、注意点 1、Header 部分开发 （1）logo搜索引擎优化做法 h1里面放a,a里面输入网站名，图标用背景导入，字体为0不显示。 <!-- 头部 --> <div class="header wrapper"> <div class="logo"> <h1><a href="#">小兔鲜儿</a></h1> </div> </
html+css入门小兔鲜项目
12-05
HTML+CSS入门小兔鲜项目 本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目，学习目标是能够在网页中使用精灵图，使用背景大小属性，设置背景图片的大小，认识 CSS 写作顺序，提高代码专业性和浏览器渲染性能，以及...
前端静态页面小兔鲜项目.zip
03-22
小兔鲜项目是一个在线蔬菜...以上是小兔鲜项目前端静态页面的基本功能，通过这些页面可以让用户方便地浏览和购买蔬菜水果。在开发过程中，我们需要注意页面的设计美观、用户体验友好，确保用户能够顺利完成购物流程。
小兔鲜（五个页面包含：登录，购物车等）
10-19
HTML期末大作业需要，做一个五个网页的网站，我就把之前在看黑马程序员的前端视频的时候写的小兔鲜儿网站改进了一下加了一点东西，然后增加了几个页面。
前端练手项目小兔鲜，推荐新手
12-24
"前端练手项目小兔鲜"是一个为新手设计的练习平台，旨在帮助初学者提升技能，熟悉实际开发流程。 【HTML基础】 HTML（HyperText Markup Language）是网页内容的基础结构，用于定义页面的各个元素，如标题、段落、...
黑马练习项目，css+html实现小兔鲜儿前端界面的设计.zip
最新发布
08-23
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松copy复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全栈开发），有任何使用问题欢迎随时与我联系，我会及时为您解惑，...
小兔鲜项目前端界面编程
04-08
在“小兔鲜项目前端界面编程”中，我们主要探讨的是如何使用前端技术来构建一个交互式的、用户体验良好的在线购物平台。在这个项目中，HTML、CSS3和可能的JavaScript（虽然标签未明确提及，但在现代前端开发中是必不...
黑马最新前端项目【小兔鲜儿】！！！
weixin_51689029的博客
08-13 1万+
该项目实现了电商平台主线业务功能，电商首页、一级分类、二级分类、商品详情、购物车、结算、支付、个人中心、订单管理、订单详情。项目采用前后端分离模式，前台使用了VUE3.0技术栈构建，自己封装的UI组件库，接入了QQ登录，支付宝支付业务，以及前端SKU解决方案，本地线上购物车解决方案。该项目适合有一定VUE基础或者其他MVVM框架应用经验的同学学习。 项目发布时间: 2021.06.03 敢上线让用户体验的项目才是真项目 学习项目需掌握，事半功倍收获多 项目含金量较高，需要有一定基础的学员才能上手 学以
小兔鲜儿如何制作？
qq_65168354的博客
10-12 2271
​最近在成都找工作太难了，技术不好没人要，学历不高没人看，十个工作就有九个是销售，另一个你们猜猜是什么呢？哈哈哈哈哈哈当然是客服了，这些压榨员工的工作，呜呜呜真的太难了，这几年受疫情的影响，找工作都成了最大的难题，所以我毅然选择了回去培训，学好技术明年再去找工作，这段时间也做了几个简单的前端页面，下面就是最简单的小兔鲜儿的首页面啦，大家凑合着看看，欢迎大家指点 common.css代码. 例如下面产生的一个序列图： base.css代码如下: index.css代码如下
css day10-小兔鲜儿
tian_guan86的博客
04-07 113
index.css。
水中活鱼目标跟踪系统
05-10
水中活鱼目标跟踪系统是一种基于计算机视觉技术的智能水产养殖设备，其主要功能是通过摄像头对水中的活鱼进行实时监测、目标跟踪和数据分析，可以实现对鱼类的精准饲养、疾病预防和水质监测等功能。该系统主要由水下摄像头、图像处理单元、控制器和监测软件等组成。 在使用该系统时，水下摄像头会自动捕捉水中活鱼的图像，然后将图像传输到图像处理单元进行处理。图像处理单元通过图像处理技术，如背景差分、形态学处理、轮廓检测等，识别并跟踪活鱼目标，并将跟踪结果传输到控制器进行控制。控制器可以实现对鱼类的饲养量、饲料投放量、水质监测等参数的控制和调整。同时，系统还可以通过数据分析，提供对养殖过程的监测和评估，有助于提高养殖效率和经济效益。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值