flex做个PC三列布局例子

最新推荐文章于 2024-05-24 17:57:30 发布

米老虎学艺

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量706

点赞数 5

分类专栏：学习笔记文章标签： css css3 html html5

本文链接：https://blog.csdn.net/nylp0626/article/details/108636508

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用flex做PC三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex做PC三列布局</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            display:flex;
            /* 主轴设置成列 */
            flex-direction:column;
            width:800px;
        }
        /* 页眉布局 */
        .head{
            display:flex;
            justify-content:space-between;
            text-align:center;
            background-color:lightskyblue;
            align-items:center;
            
        }
        a{
            text-decoration-line: none;
            color:#888;
            
        }
        a:first-of-type{
            margin:10px;
        }
        a:nth-last-type{
            margin:auto;
        }
        a:not(:first-of-type):hover{
            color:lightcoral;
        }
        /* 主体布局 */
        .container{
            display:flex;
            min-height:400px;
            justify-content:space-between;

        }
        .left,.right{
            width:200px;
        background-color:lightsalmon;
        /* 不放大 不缩小 宽度保持200 */
        flex:0 0 200px;
      
        }
        .main{
            background-color:lightpink;
            width:100%;
        }
        .footer{
            display:flex;
            flex-direction:column;
            justify-content:center;
            align-items:center;
        }
        /* 媒体查询要做在正常代码的后面 */
        @media screen and (max-width:680px){
            .right{
                display:none;
            }
            .container{
                flex:auto;
            }
            .left{
                background-color:limegreen;
            }
        } 
            
        /*当屏幕缩小到400后，隐藏左右边栏页脚和菜单  */
        /* 注意媒体查询时and 后面要有空格才生效 */
        @media screen and (max-width:400px) {
            .head,.left,.footer{
                display:none;
            }
        }
    </style>

</head>
<body>
    <!-- 页眉 -->
    <div class="head">
        <a href="">LOGO</a>
        <a href="">首页</a>
        <a href="">产品中心</a>
        <a href="">成功案例</a>
        <a href="">联系我们</a>
        <a href="">登录</a>
    </div>
    <!-- 主体内容 -->
    <div class="container">
        <div class="left">左侧</div>
        <div class="main">主体</div>
        <div class="right">右侧</div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
        <p>XX科技公司网站</p>
        <p>地址：河南省南阳市  备案：xxxxxx</p>
    </div> 

</body>
</html>