CSS3伸缩布局的应用

最新推荐文章于 2025-07-03 15:45:27 发布

weixin_34183910

最新推荐文章于 2025-07-03 15:45:27 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zlinger/p/9569636.html

一、效果图

二、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3伸缩布局的应用</title>
    <style>
        *{margin: 0; padding: 0;}
        li {list-style-type: none;}
        body {
            display: flex;
            flex-direction: column;
            height: 600px;
        }
        header {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: plum;
        }
        .content {
            flex: 1;
            display: flex;
        }
        .content .left {
            flex: 1;
            background-color: palegreen;
            text-align: center;
        }
        .content .main {
            flex: 2;
            background-color:paleturquoise;
            text-align: center;
        }
        footer ul {
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color:pink;
            display: flex;
        }
        footer ul li {
            flex: 1;
        }
    </style>
</head>
<body>
<header>头部</header>
<div class="content">
    <div class="left">左导航栏</div>
    <div class="main">右内容部分</div>
</div>
<footer>
    <div class="my">
        <ul>
            <li>QQ聊天</li>
            <li>商品分类</li>
            <li>我的订单</li>
            <li>购物车</li>
        </ul>
    </div>

</footer>
</body>
</html>