聚美优品小练习，未用浮动、定位

最新推荐文章于 2024-11-12 22:27:10 发布

桃之夭夭QAQ

最新推荐文章于 2024-11-12 22:27:10 发布

阅读量71

点赞数

分类专栏： css html 文章标签： html css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_57519583/article/details/129288430

版权

css 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

html部分：

<body>
    <main>
        <div class="box2">
            <div class="box1">
                <h3>大家都喜欢的美容品</h3>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">1</span>
                    <span class="span2">雅诗兰黛即时修复眼部精华霜15ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">2</span>
                    <span class="span2">伊丽莎白顿显效复合活肤霜75ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">3</span>
                    <span class="span2">QLAZY玉兰油多效修复霜50g</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">4</span>
                    <span class="span2">巨型一号丝瓜水320ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">5</span>
                    <span class="span2">倩碧保湿洁肤水2号200ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">6</span>
                    <span class="span2">比度克细肤淡印霜30g</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">7</span>
                    <span class="span2">兰芝(LANEIGE)夜间修护锁水面膜80ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">8</span>
                    <span class="span2">SK-II护肤精华露215ml</span>
                </a>
            </div>
            <div class="box3">
                <a href="#">
                    <span class="span1">9</span>
                    <sanp class="span2">欧莱雅青春密码活颜精华肌底液</sanp>
                </a>
            </div>
        </div>
    </main>
</body>

css部分：

 * {
            text-decoration: none;
        }
        .box2 {
            width:300px;
        }
        .box1 {
            background-color: #E9185A;
            color: #fff;
            text-indent: 1em;
            line-height: 30px;
        }
        a {
            font: 600 14px/2 sans-serif;
            color: #676868;
        }
        a:hover {
            color: #E9185A;
        }
        a:hover .span1 {
            background-color: #E9185A;

        }
        .span1 {
            display: block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-radius: 50%;
            background-color: #373B3C;
            font: 500 16px sans-serif;
            color: #fff;
            margin-bottom: -25px;

        }
        .box3 {
            margin-bottom: 10px;
            border-bottom-style: dashed;
            border-bottom-color: #373B3C;
            border-bottom-width: 1px;
        }
        .span2 {
            margin-left: 30px;
        }

最终实现效果：

难点：

在html中，把前面的序号1、2、3、4...和后面的文字放在同一个a标签里面。这样在滑动的时候前面序号里面的背景颜色就能和文字的颜色一起改变。span1由于display:block,这时可以更改它的margin-bottom: -25px;这样文字和序号就能对齐，然后在更改span2的margin-left这样的话文字和序号之间就有间隔。