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

news2024/9/17 20:59:59

前言

这是一个简单的商城网站，代码部分为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;
}
/* 定位区域 -- 文字结束 */
/* 最新专题结束 */

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2038612.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

简单的class.getResource与classLoader.getResource区别

简单的class.getResource与classLoader.getResource区别

简单的getClass().getResource()与ClassLoader.getResource()区别 1.简介 我们在springboot项目中&#xff0c;如果要获取到自己配置的资源或者配置类信息一般会用到Class.getResource()或ClassLoader.getResource()&#xff0c;这两种方式在使用的过程中很容易混淆&#xff…
阅读更多...
echarts格式化图例回调函数返回对象

echarts格式化图例回调函数返回对象

使用返回的对象可以自定义图例显示 formatter:function(obj){var label obj.seriesName "<br/>" obj.marker obj.name ":" obj.value "宗" "<br/>" "占比" obj.percent "%";return label…
阅读更多...
四川大型数字媒体产业园区在哪里，有推荐吗？

四川大型数字媒体产业园区在哪里，有推荐吗？

四川省作为中国西南地区的经济和文化重镇&#xff0c;数字媒体产业的发展取得了令人瞩目的成绩。以下是四川省排名前十的数字媒体产业园&#xff0c;这些园区在推动科技创新和区域经济发展方面发挥了重要作用。 1、 国际数字影像产业园 位置&#xff1a;成都市金牛区 特点&…
阅读更多...
触摸屏接口设置-洋桃百科

触摸屏接口设置-洋桃百科

触摸屏接口设置-洋桃百科 电路设计 ​​ 触摸屏的组成&#xff1a; PCB板层&#xff1a;是电子设备中用于支撑和连接电子元件的基板。 显示层&#xff1a;是LCD触摸屏的核心部分&#xff0c;负责生成视觉图像。它由以下部分组成&#xff1a; 液晶层&#xff1a;包含液晶材料…
阅读更多...
框架盛行，还记得原生JS如何获取表单数据吗？

框架盛行，还记得原生JS如何获取表单数据吗？

你好同学&#xff0c;我是沐爸&#xff0c;欢迎点赞、收藏和关注&#xff01;个人知乎 在这个前端框架遍地开花的时代&#xff0c;同学们常常被React、Vue、Angular等现代JavaScript框架的便捷性和高效性所吸引。那么多年过去&#xff0c;你还记得原生JS是如何获取表单数据的吗…
阅读更多...
论文分享|MLLMs中多种模态(图像/视频/音频/语音)的tokenizer梳理

论文分享|MLLMs中多种模态(图像/视频/音频/语音)的tokenizer梳理

本文旨在对任意模态输入-任意模态输出 (X2X) 的LLM的编解码方式进行简单梳理&#xff0c;同时总结一些代表性工作。 注&#xff1a;图像代表Image&#xff0c;视频代表Video&#xff08;不含声音&#xff09;&#xff0c;音频代表 Audio/Music&#xff0c;语音代表Speech 各种…
阅读更多...
docker数据卷和资源控制

docker数据卷和资源控制

目录 数据卷 实现数据卷 宿主机和容器之间进行数据共享 容器与容器之间进行数据共享 容器互联 docker容器的资源控制 cpu 1.设置cpu资源控制&#xff08;比重&#xff09; 2. 设置cpu的资源占用比&#xff08;权重&#xff09; 3.设置容器绑定cpu 内存 1.内存限制 …
阅读更多...
Docker搭建Minio容器

Docker搭建Minio容器

Docker搭建Minio容器 前言 在上一集我们介绍了分布式文件存储行业解决方案以及技术选型。最终我们决定选用Minio作为分布式文件存储。 那么这集我们就在Docker上搭建Minio容器即可。 Docker搭建Minio容器步骤 创建Minio文件目录 我们选择创建/minio/data目录 修改目录权…
阅读更多...
系统编程 day11 进程（线程）3

系统编程 day11 进程（线程）3

fork函数的总结&#xff1a; 总结对进程学习之中的回收函数wait wait函数&#xff1a; 1.获取子进程的退出状态 2.回收资源------会让僵尸态的子进程销毁 注&#xff1a;1.wait函数本身是一个阻塞操作&#xff0c;会使调用者阻塞 2.父进程要获得子进程的退出状态 子进程&…
阅读更多...
解决STM32G474单片机_HAL_UART_Transmit_IT()连续发送之问题

解决STM32G474单片机_HAL_UART_Transmit_IT()连续发送之问题

在使用STM32G474单片机的HAL库时&#xff0c;使用“在中断服务程序中发送数据”和“在中断程序中接收数据”&#xff0c;是一种很常用的方法&#xff0c;特别是RS485通讯中。首次使用&#xff0c;肯定会踩坑。要么出现第一个数据收不到&#xff0c;要么出现连续发送&#xff0c…
阅读更多...
米联客-FPGA程序设计Verilog语法入门篇连载-02 Verilog语法_基本设计方法

米联客-FPGA程序设计Verilog语法入门篇连载-02 Verilog语法_基本设计方法

软件版本&#xff1a;无 操作系统&#xff1a;WIN10 64bit 硬件平台&#xff1a;适用所有系列FPGA 板卡获取平台&#xff1a;https://milianke.tmall.com/ 登录“米联客”FPGA社区 http://www.uisrc.com 视频课程、答疑解惑&#xff01; 1概述 本节主要讲解Verilog的基本设…
阅读更多...
【屏驱MCU】增加自定义分区指南

【屏驱MCU】增加自定义分区指南

说明&#xff1a;本文主要给出基于该款 点屏 MCU。增加自定义分区指南 屏驱MCU系列文章 【屏显MCU】多媒体接口总结&#xff08;一&#xff09; 【DVP接口】0v5640的DVP接口设计分析&#xff08;硬件&#xff09; 【DVP接口】0v5640的DVP接口设计分析&#xff08;软件&#xff…
阅读更多...
CCF-GESP8级考试—图论算法及综合应用（最小生成树）

CCF-GESP8级考试—图论算法及综合应用（最小生成树）

&#x1f349;1 最小生成树的概念 1.1 连通图 &#x1f388; 连通图用于描述图中顶点之间是否存在路径相连。一个无向图中&#xff0c;如果从图中的任意一个顶点出发&#xff0c;都可以通过边的连接到达图中的任意其他顶点&#xff0c;则该图被称为连通图。 连通图的性质&…
阅读更多...
为何众多卖家都选择入驻亚马逊VC？有什么优势？——WAYLI威利跨境助力商家

为何众多卖家都选择入驻亚马逊VC？有什么优势？——WAYLI威利跨境助力商家

众多卖家选择入驻亚马逊VC&#xff08;Vendor Central&#xff09;&#xff0c;主要是因为VC平台为卖家提供了一系列显著的优势。VC使卖家与亚马逊建立直接供应关系&#xff0c;提升曝光率和销售机会。作为全球领先电商平台&#xff0c;亚马逊拥有庞大用户群和完善物流体系&…
阅读更多...
C#窗体自定义快捷操作键的实现 - 开源研究系列文章

C#窗体自定义快捷操作键的实现 - 开源研究系列文章

这次想到应用程序的窗体的快捷操作键的使用的问题。 上次发布过一个快捷键的例子(https://www.cnblogs.com/lzhdim/p/18342051)&#xff0c;区别在于它是操作系统全局注册的热键&#xff0c;如果其它应用程序注册了对应的热键&#xff0c;那就会失效。此例子是对某个窗体里的按…
阅读更多...
AI驱动人才社区革新：智能化探索与实践

AI驱动人才社区革新：智能化探索与实践

一、引言&#xff1a;AI赋能人才新生态 在21世纪的数字化浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术以其强大的数据处理能力、学习优化算法及创新应用模式&#xff0c;正深刻地改变着各行各业的面貌&#xff0c;人才管理领域亦不例外。传统的人才社区&#xf…
阅读更多...
yolo中的iou是什么意思

yolo中的iou是什么意思

在YOLO&#xff08;You Only Look Once&#xff09;算法中&#xff0c;IoU 是“Intersection over Union”的缩写&#xff0c;中文可以理解为“交并比”。IoU 是一个用于衡量两个边界框&#xff08;bounding box&#xff09;重叠程度的指标。具体来说&#xff0c;IoU 是通过计算…
阅读更多...
CUDA-MODE 第二课: PMPP 书的第1-3章

CUDA-MODE 第二课: PMPP 书的第1-3章

我的课程笔记&#xff0c;欢迎关注&#xff1a;https://github.com/BBuf/how-to-optim-algorithm-in-cuda/tree/master/cuda-mode 第二课: PMPP 书的第1-3章 这节课非常基础&#xff0c;讲的都是基本概念和初级的注意事项&#xff0c;有CUDA基础的朋友可以不用花时间看。 PMPP …
阅读更多...
C#语言基础速成Day06

C#语言基础速成Day06

“心之官则思&#xff0c;思则得之&#xff0c;不思则不得也。” 目录 前言文章有误敬请斧正 不胜感恩&#xff01;||Day06 一、C#属性访问器、方法参数属性访问器&#xff08;Property Accessors&#xff09;方法参数&#xff08;Method Parameters&#xff09;综合示例 二、C…
阅读更多...
小红书种草推广丨爆品层出不穷，品牌还能怎么「造新」？

小红书种草推广丨爆品层出不穷，品牌还能怎么「造新」？

当品牌已经被大众熟知&#xff0c;要如何在茫茫消费市场中脱颖而出&#xff0c;再度吸引用户的目光&#xff1f; 当品牌陷入增长困境&#xff0c;要如何再造爆品&#xff0c;打造增长的第二曲线&#xff0c;延长品牌的生命周期&#xff1f; …… 就这个大家关心的这些问题&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023