携程移动端案列（flex布局、背景图缩放，文字阴影）

时间：2024-09-29 17:35:20

效果图如下：

携程移动端案列（flex布局、背景图缩放，文字阴影）

<body>

    <div class="nav">

        <div class="row">

            <div class="col1">

                <a href="#">

                    <em>酒店</em>

                    <i></i>

                </a>

            </div>

            <div class="col2">

                <a href="#"><em>特价酒店</em></a>

                <a href="#"><em>海外酒店</em></a>

            </div>

            <div class="col3">

                <a href="#"><em>特价酒店</em></a>

                <a href="#"><em>海外酒店</em></a>

            </div>

        </div>

        <div class="row">

                <div class="col1">

                    <a href="#">

                        <em>酒店</em>

                        <i></i>

                    </a>

                </div>

                <div class="col2">

                    <a href="#"><em>特价酒店</em></a>

                    <a href="#"><em>海外酒店</em></a>

                </div>

                <div class="col3">

                    <a href="#"><em>特价酒店</em></a>

                    <a href="#"><em>海外酒店</em></a>

                </div>

            </div>

            <div class="row">

                    <div class="col1">

                        <a href="#">

                            <em>酒店</em>

                            <i></i>

                        </a>

                    </div>

                    <div class="col2">

                        <a href="#"><em>特价酒店</em></a>

                        <a href="#"><em>海外酒店</em></a>

                    </div>

                    <div class="col3">

                        <a href="#"><em>特价酒店</em></a>

                        <a href="#"><em>海外酒店</em></a>

                    </div>

                </div>

    </div>

</body>
        html,bidy{

            margin:;

            padding:;

            box-sizing: border-box;/* css3盒子模型 */

        }

        a{

            text-decoration: none;

            color: #fff;

            text-shadow: 10px 0 10px rgba(0,0,0,0.6);/* 文字阴影 */

        }

        .row{

            width: 532px;

            height: 90px;

            margin: 0 auto;

            display: flex;/* 父元素flex布局 */

            overflow: hidden;

            margin-bottom: 2px;

        }

        .row .col1, .row .col2, .row .col3{

            height: 100%;

            margin-right: 3px;

            flex:;

        }

        .row .col1{

            position: relative;

            background: rgb(24, 207, 40);

        }

        .col1 em{

            width: 100%;

            height: 45px;

            line-height: 45px;

            text-align: center;

            font-style: normal;

            display: block;

            position: absolute;

            left:;

            top:;

        }

        .col1 i{

            display: block;

            width: 43px;

            height: 43px;

            position: absolute;

            left: 50%;

            bottom: 10px;

            transform: translateX(-50%);

            background: url(ctrip.png) no-repeat 0 -124px;

            background-size: 104px auto;/* 背景图缩放 */

        }

        .col2 em, .col3 em{

            width: 100%;

            height: 45px;

            line-height: 45px;

            text-align: center;

            font-style: normal;

            display: block;

            background: rgb(223, 12, 12);

            margin-bottom: 2px;

        }

相关文章