• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Css双飞翼布局

互联网 diligentman 2周前 (11-18) 8次浏览
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>双飞翼布局</title>
        <style type="text/css">
            html, body {
                padding: 0;
                margin: 0;
            }
            body {
                min-width: 600px;
            }    
            #header, #footer {
                width: 100%;
                background-color: #999;
                height: 40px;
                text-align: center;
                line-height: 40px;
            }
            .column {
                float: left;
                height: 300px;
            }
            #container {
                width: 100%;
                background-color: #1890FF;
            }
            #container #center {
                padding: 0 200px 0 240px;
            }
            #left {
                width: 240px;
                background-color: #7FFFD4;
                margin-left: -100%; 
            }
            #right {
                width: 200px;
                background-color: #FF5555;
                margin-left: -200px;
            }
            .clearfix:after {
                content: '';
                display: table;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="header">#header</div>
        <div id="main" class="clearfix">
            <div id="container" class="column">
                <div id="center">#center</div>
            </div>
            <div id="left" class="column">#left</div>
            <div id="right" class="column">#right</div>
        </div>
        <div id="footer">#footer</div>
    </body>
</html>

Css双飞翼布局


喜欢 (0)