慕课网跟练系列——圣杯布局

最新推荐文章于 2020-09-06 14:20:14 发布

YvonneJue

最新推荐文章于 2020-09-06 14:20:14 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

分类专栏：慕课网课程学习跟练系列文章标签：慕课

本文链接：https://blog.youkuaiyun.com/qq_42969437/article/details/81950028

慕课网课程学习跟练系列专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种网页布局方式——圣杯布局，通过相对定位和负边距实现三栏布局，其中左右两栏宽度固定，中间栏自适应。文章提供了完整的HTML和CSS代码，并展示了如何使各部分元素正确对齐。

这里写图片描述

<!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>
        *{
            padding:0;
            margin:0;
        }
        body{
            min-width:700px;
        }
        .header,.footer{
            float:left;
            width:100%;
            background:#ddd;
            height:40px;
            line-height:40px;
            text-align:center;
        }
        .container{
            padding:0 220px 0 200px;
        }
        .left,.middle,.right{
            position:relative;
            float:left;
            min-height:300px;
        }
        .middle{
            width:100%;
            background:#eee;
        }
        .left{
            width:200px;
            background:#666;
            margin-left:-100%;
            left:-200px;
        }
        .right{
            width:220px;
            background:#666;
            margin-left:-220px;
            right:-220px;
        }
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容这是页面的中间内容</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>左侧内容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>右侧内容</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>