CSS——商品列表子菜单的实现

文章目录

• 前言
• 一、结构分析
• 二、实现过程
  • 1.HTML结构
  • 2.CSS样式
• 总结

---

前言

     今天和大家分享的是商品列表子菜单的实现过程，这个应用在很多平台都有看到，感兴趣的小伙伴可以驻足翻阅一下~

---

一、结构分析

示例图：

 结构的分析：

• 首先，我们在动手写之前还是先分析结构，大致可分为上下两个部分，下方可再细划

• 其次，分析我们所要实现的效果——当鼠标悬停在每个商品列表上时，产品详情会伴有过渡效果的弹出。

二、实现过程

1.HTML结构

代码如下（示例）：

  <!-- 外部容器 -->
    <div class="wrap">
        <!-- 标题 -->
        <div class="title">
            <span>大家都喜欢买的美容品</span>
        </div>
        <!-- 商品列表 -->
        <ul class="goods-list">
            <li class="up-box">
                <a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜&nbsp;&nbsp;35ml</a>
                <!-- 该项下拉框（产品详情） -->
                <div class="down-box">
                    <div class="downbox-inner">
                        <a href="#">
                            <img src="./image/icon-1.jpg" alt="菲奥娜水漾CC霜">
                            <p class="price">¥<em>59.90</em> 最近13403人购买</p>
                        </a>
                    </div>
                </div>
            </li>
            <li class="up-box">
                <a href="#"><span>2</span>美宝莲精纯矿物奇妙新颜乳霜BB霜&nbsp;&nbsp;30ml</a>
                <!-- 该项下拉框（产品详情） -->
                <div class="down-box">
                    <div class="downbox-inner">
                        <a href="#">
                            <img src="./image/icon-2.jpg" alt="菲奥娜水漾CC霜">
                            <p class="price">¥<em>59.90</em> 最近13403人购买</p>
                        </a>
                    </div>
                </div>
            </li>
            <li class="up-box">
                <a href="#"><span>3</span>菲奥娜水漾CC霜&nbsp;&nbsp;40g</a>
                <!-- 该项下拉框（产品详情） -->
                <div class="down-box">
                    <div class="downbox-inner">
                        <a href="#">
                            <img src="./image/icon-3.jpg" alt="菲奥娜水漾CC霜">
                            <p class="price">¥<em>59.90</em> 最近13403人购买</p>
                        </a>
                    </div>
                </div>
            </li>
            <li class="up-box">
                <a href="#"><span>4</span>DHC蝶翠诗橄榄卸妆油&nbsp;&nbsp;200ml</a>
                <!-- 该项下拉框（产品详情） -->
                <div class="down-box">
                    <div class="downbox-inner">
                        <a href="#">
                            <img src="./image/icon-4.jpg" alt="菲奥娜水漾CC霜">
                            <p class="price">¥<em>59.90</em> 最近13403人购买</p>
                        </a>
                    </div>
                </div>
            </li>
            <li><a href="#"><span>5</span>倩碧保湿洁肤水2号&nbsp;&nbsp;200ml</a></li>
            <li><a href="#"><span>6</span>比度克细肤淡印霜&nbsp;&nbsp;30g</a></li>
            <li><a href="#"><span>7</span>兰芝(LANEING)夜间修护锁水面膜&nbsp;&nbsp;80ml</a></li>
            <li><a href="#"><span>8</span>SK-II护肤精华露&nbsp;&nbsp;80ml</a></li>
            <li><a href="#"><span>9</span>欧莱雅青春密码活颜精华肌底液</a></li>
        </ul>
    </div>

2.CSS样式

代码如下（示例）：

     body {
            background-color: #eee7e1;
        }

        /* 外部容器样式设置 */
        .wrap {
            margin-top: 50px;
            margin-left: 50px;
            width: 340px;
            background-color: #ffffff;
        }

        /* 标题部分样式设置 */
        .title {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #e9185a;
        }

        .title span {
            color: #ffffff;
            margin-left: 15px;
            font-size: 19px;
        }

        /* 商品列表样式设置 */
        .goods-list>li {
            height: 39px;
            line-height: 39px;
            border-bottom: 2px dashed #a8a5a5;
        }

        li span {
            display: inline-block;
            width: 36px;
            height: 36px;
            line-height: 36px;
            background-color: #373b3c;
            border-radius: 50%;
            text-align: center;
            color: #ffffff;
            font-weight: bold;
            margin-left: 2px;
            margin-right: 15px;
        }

        li:hover span {
            background-color: #e9185a;
        }

        li a {
            color: #666666;
            font-size: 15px;
        }

        li:hover a {
            color: #e9185a;
        }

        /* 每个li下的下拉框（产品详情）样式设置*/
        /* 将每个li多余的部分隐藏 */
        .up-box {
            overflow: hidden;
        }

        .up-box:hover {
            height: 240px;
            transition: all .5s;
        }

        .downbox-inner {
            width: 190px;
            margin: 0 auto;
        }

        .downbox-inner img {
            margin: 0 15px;
        }

        .downbox-inner p {
            margin-top: -10px;
            margin-left: 8px;
            color: #e9185a
        }

        .downbox-inner em {
            margin: 0 2px;
        }

---

总结

        以上就是今天所要分享的内容，希望可以帮助到看到这篇文章的你，依旧真挚祝福你平安喜乐，晚安~