关于css:Css圣杯布局

6次阅读

共计 810 个字符，预计需要花费 3 分钟才能阅读完成。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 圣杯布局 </title>
        <style type="text/css">
            html, body {
                padding: 0;
                margin: 0;
            }
            body {
                min-width: 600px;
                font-size: 24px;
            }
            #header, #footer {
                width: 100%;
                height: 30px;
                line-height: 30px;
                background-color: #909399;
                text-align: center;
            }
            #footer {clear: both;}
            #container {
                margin-left: 240px;
                margin-right: 200px;
            }
            #container .column{
                position: relative;
                float: left;
                height: 100px;
            }
            #center {
                width: 100%;
                background-color: #1890ff;
            }
            #left {
                width: 240px;
                background-color: #F56C6C;
                margin-left: -100%;
                left: -240px;
            }
            #right {
                width: 200px;
                background-color: #E6A23C;
                margin-right: -200px;
            }
        </style>
    </head>
    <body>
        <div id="header">#header</div>
        <div id="container">
            <div id="center" class="column">#center</div>
            <div id="left" class="column">#left</div>
            <div id="right" class="column">#right</div>
        </div>
        <div id="footer">#footer</div>
    </body>
</html>

正文完