CSS3Flex伸缩布局，携程网案例

妖狐艹你老母 2024-04-18 21:40 80阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>携程网</title>
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
    
            /* 头部 给父容器设置成为伸缩盒子，使得图片自适应 */
            header {
                width: 100%;
                display: flex;
            }
    
            header>a {
                /* 子元素使用flex分配空间 */
                flex: 1;
            }
    
            header>a>img {
                width: 100%;
            }
    
            /* 主体 */
            main {
                padding: 0 10px;
            }
    
            main>.item {
                width: 100%;
                height: 100px;
                margin-top: 10px;
                border-radius: 10px;
                display: flex;
            }
    
            /* 不同section設置不同的背景顔色 */
            main>.item:nth-of-type(1) {
                background: orange;
            }
    
            main>.item:nth-of-type(2) {
                background: pink;
            }
    
            main>.item:nth-of-type(3) {
                background: tomato;
            }
    
            main>.item:nth-of-type(4) {
                background: seagreen;
            }
    
            main>.item>.left {
                flex: 1;
            }
    
            /* 右侧文字内容 */
            main>.item>.right {
                flex: 2;
                display: flex;
                flex-wrap: wrap;
            }
    
            main>.item>.right>a {
                width: 50%;
                box-sizing: border-box;
                text-align: center;
                line-height: 50px;
                color: white;
                text-decoration: navajowhite;
                border-left: 1px solid white;
                border-bottom: 1px solid white;
            }
    
            /* 主体部分图片 注意图片要成为自适应要在外面套上一个a标签 */
            main>.additional {
                width: 100%;
                display: flex;
            }
    
            main>.additional>a {
                flex: 1;
            }
    
            main>.additional>a>img {
                width: 100%;
            }
    
            /* 底部 */
    
            footer {
                width: 100%;
            }
    
            footer>.link {
                display: flex;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                line-height: 30px;
            }
    
            footer>.link>a {
                flex: 1;
                text-align: center;
                color: black;
                text-decoration: none;
            }
    
            footer>.readme {
                margin-top: 5px;
                text-align: center;
                color: black;
                text-decoration: none;
            }
    
            footer>.copyright {
                text-align: center;
                margin-top: 5px;
            }
        </style>
    </head>
    
    <body>
        <div class="content">
            
            <header>
                
                <a href="#">
                    <img src="images/banner.jpg" alt="">
                </a>
            </header>
            
            <main>
                <section class="item">
                    <div class="left"></div>
                    <div class="right">
                        <a href="#">海外酒店</a>
                        <a href="#">团购</a>
                        <a href="#">特惠酒店</a>
                        <a href="#">客栈公寓</a>
                    </div>
                </section>
                <section class="item">
                    <div class="left"></div>
                    <div class="right">
                        <a href="#">海外酒店</a>
                        <a href="#">团购</a>
                        <a href="#">特惠酒店</a>
                        <a href="#">客栈公寓</a>
                    </div>
                </section>
                <section class="item">
                    <div class="left"></div>
                    <div class="right">
                        <a href="#">海外酒店</a>
                        <a href="#">团购</a>
                        <a href="#">特惠酒店</a>
                        <a href="#">客栈公寓</a>
                    </div>
                </section>
                <section class="item">
                    <div class="left"></div>
                    <div class="right">
                        <a href="#">海外酒店</a>
                        <a href="#">团购</a>
                        <a href="#">特惠酒店</a>
                        <a href="#">客栈公寓</a>
                    </div>
                </section>
                <section class="additional">
                    
                    <a href="#">
                        <img src="images/extra_1.png" alt="">
                    </a>
                    <a href="#">
                        <img src="images/extra_2.png" alt="">
                    </a>
                </section>
            </main>
            
            <footer>
                <p class="link">
                    <a href="#">电话预定</a>
                    <a href="#">下载客户端</a>
                    <a href="#">我的</a>
                </p>
                <p class="readme">
                    <a href="#">网站地图</a>
                    <a href="#">ENGLISH</a>
                    <a href="#">电脑版</a>
                </p>
                <p class="copyright">© 携程旅行</p>
            </footer>
        </div>
    </body>
    
    </html>

### 实现效果 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxOTU2Nzg5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/aaeeab5ee13f415cb35fd2825a223004.png