CSS3Flex伸缩布局，携程网案例

最新推荐文章于 2020-11-09 17:09:12 发布

haoqi好奇

最新推荐文章于 2020-11-09 17:09:12 发布

阅读量425

点赞数

分类专栏：案例前端

本文链接：https://blog.csdn.net/qq_41956789/article/details/100764739

版权

前端同时被 2 个专栏收录

45 篇文章 1 订阅

订阅专栏

案例

26 篇文章 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标签使得图片可以使用flex布局产生效果 -->
            <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标签使得图片可以使用flex布局产生效果 -->
                <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">&copy; 携程旅行</p>
        </footer>
    </div>
</body>

</html>

实现效果

haoqi好奇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS3Flex伸缩布局，携程网案例

<!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...
复制链接

扫一扫

专栏目录