CSS经典的布局

最新推荐文章于 2024-04-22 15:38:52 发布

努力的拾壹

最新推荐文章于 2024-04-22 15:38:52 发布

阅读量338

点赞数 1

分类专栏： CSS 文章标签： html css

本文链接：https://blog.csdn.net/weixin_45608986/article/details/119084952

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

好的布局能适合浏览的方式将图片和文字排放在页面的不同位置，

布局由多种，不同的设计方式会按照不同的布局。

1.行布局

基础的行布局
行布局自适应

width:100%;

行布局自适应限制最大宽

max-width:800px;

行布局垂直水平居中

margin:0 auto;

.container{
            width: 800px;
            height: 200px;
            background-color: cadetblue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -400px;
            /* margin: 0 auto; */
        }

行布局固定宽
行布局某部位自适应
行布局导航随屏幕滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 18px;
        }
        .header{
            width: 100%;
            height: 50px;
            background-color: black;
            margin: 0 auto;
            color: white;
            line-height: 50px;
            position: fixed;
        }
        .banner{
            width: 800px;
            height: 250px;
            background-color: thistle;
            margin-top: 50px;
            margin: 0 auto;
            line-height: 350px;
        }
        .container{
            width: 800px;
            height: 550px;
            background-color: rgb(104, 177, 128);
            margin: 0 auto;
            line-height: 550px;
        }
        .footer{
            width: 800px;
            height: 250px;
            background-color: rgb(201, 128, 191);
            margin: 0 auto;
            line-height: 250px;
        }
    </style>
</head>
<body>
    <div class="header">这是页面的头部</div>
    <div class="banner">这是页面的banner图</div>
    <div class="container">这是页面的内容</div>
    <div class="footer">这是页面的底部</div>
</body>
</html>

2.列布局：

1.两列布局固定

2.两列布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 800px;
            height: 800px;
            margin: 0 auto;
        }
        .left{
            width: 500px;  
            height: 750px;
            background-color: burlywood;
            float: left;
        }
        .right{
            width: 300px;    
            height: 750px;
            background-color: cadetblue;
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左边的内容
        </div>
        <div class="right">
            右边的内容
        </div>
    </div>
</body>
</html>

宽度可以用百分比实现自适应

3.三列布局固定

4.三列布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 100%;
            /* height: 800px; */
            margin: 0 auto;
        }
        .left{
            width: 30%;
            height: 1000px;
            background-color: burlywood;
            float: left;
        }
        .right{
            width: 30%;
            height: 1000px;
            background-color: burlywood;
            float: right;
        }
        .middle{
            width: 40%;
            height: 1000px;
            background-color: rgb(135, 140, 211);
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            左边的内容
        </div>

        <div class="middle">
            中间的内容
        </div>
        <div class="right">
            右边的内容
        </div>
    </div>
</body>
</html>

3.混合布局

1.混合布局固定

2.混合布局自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 16px;
            text-align: center;
        }
        .header{
            width: 800px;
            height: 50px;
            background-color: cadetblue;
            margin: 0 auto;
            line-height: 50px;
        }

        .container{
            width: 800px;
            height: 1000px;
            margin: 0 auto;

        }

        .container .left{
            width: 200px; ;
            height: 1000px;
            background-color: chocolate;
            float: left;
        }
        .container .right{
            width: 600px; ;
            height: 1000px;
            background-color: rgb(27, 109, 163);
            float: right;
        }
        .footer{
            width: 800px;
            height: 50px;
            background-color: darkcyan;
            line-height: 50px;
            margin: 0 auto;
        }
        
    </style>
</head>
<body>
    <div class="header">
        这是头部的内容 
    </div>
    <div class="container">
        <div class="left">
            左边的内容
        </div>

        
        <div class="right">
            右边的内容
        </div>
    </div>
    <div class="footer">
        底部的内容
    </div>
</body>
</html>

4.圣杯布局：

三列布局，中间宽度自适应，两边定宽

中间栏要在浏览器中先展示渲染

允许任意列的高度最高

努力的拾壹

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS经典的布局

好的布局能适合浏览的方式将图片和文字排放在页面的不同位置，布局由多种，不同的设计方式会按照不同的布局。1.行布局基础的行布局行布局自适应width:100%;行布局自适应限制最大宽max-width:800px;行布局垂直水平居中margin:0 auto;.container{ width: 800px; height: 200px; background-color: cadetblue; .
复制链接

扫一扫