css圣杯布局、双飞翼布局

最新推荐文章于 2024-03-01 14:45:20 发布

旧雨化碧

最新推荐文章于 2024-03-01 14:45:20 发布

阅读量54

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44428467/article/details/118061644

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>圣杯布局</title>
    <link rel="stylesheet" href="shengbei.css">
</head>
<body>
    <header>头部</header>
    <div class="clearfix wrapper">
        <div class="center">主区域</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <footer>底部</footer>
</body>
</html>

css
左右不加定位之前，左右部分会遮挡主区域的内容。

header{
    background-color: aqua;
}
.center ,.left ,.right{
    float: left;
    min-height: 130px;   
}
.center{
    background-color: blueviolet;
    width: 100%;
    color: #ffff;
}
.left{
    background-color: brown;
    position: relative;
    width: 300px;
    margin-left: -100%;
    left: -300px;
    min-height: 130px;
}
.right{
    background-color: burlywood;
    position: relative;//使用相对布局，right:-300px往右边，不遮挡主区域的内容
    width: 300px;
    margin-left: -300px;
    right: -300px;
    min-height: 130px;
}
.wrapper{
    padding: 0 300px; /*为左右布局的宽度，内边距会增加大小，滕区地方放左右块。*/
}
footer{
    background-color: black;
    clear: both;
}
.clearfix::after{
    /* 清除浮动塌陷 */
    content: "";
    display: block;
    clear: both;
}

在这里插入图片描述
双飞翼布局
html代码：

<!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>双飞翼布局</title>
    <link rel="stylesheet" href="shaung.css">
</head>
<body>
    <header>头部</header>
    <div class="container">
        <div class="main">
            <div class="content">主区域</div>
        </div>
        <div class="left">左区域</div>
        <div class="right">右区域</div>
    </div>
    <footer>底部</footer>
</body>
</html>

css代码：

.left,.main,.right{
    float:left;
    min-height: 130px;

}
.main{
    width: 100%;
    background-color: crimson;
}
.content{
    
    margin: 0 200px;
}
.left{
    width: 200px;
    background-color: burlywood;
    margin-left: -100%;
}
.right{
    width: 200px;
    background-color: chartreuse;
    margin-left: -200px;
}

在这里插入图片描述