你的位置:首页 > 网页设计

[网页设计]多列样式布局


效果图如下:

代码如下:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        h2 {
            margin: 20px 0;
        }
        .left1 {
            width: 200px;
            height: 100px;
            green;
        }
        .right1 {
            width: 60%;
            height: 100px;
            red;
        }
        .left2 {
            width: 200px;
            height: 100px;
            green;
            display: inline-block;
        }
        .right2 {
            width: 60%;
            height: 100px;
            red;
            display: inline-block;
        }
        .left3 {
            width: 200px;
            height: 100px;
            float: left;
            green;
        }
        .right3 {
            width: 60%;
            height: 100px;
            float: right;
            red;
        }
        .mainL, .sitebarL, .mainR, .sitebarR {
            height: 200px;
            /*font: bolder 20px/200px '微软雅黑';*/
            color: #fff;
            text-align: center;
        }
        .mainL {
            width: 100%;
            float: left;
        }
        .mainR {
            width: 100%;
            float: right;
        }
        .mainL .contentL {
            height: 100%;
            margin-right: 200px;
            red;
        }
        .mainR .contentR {
            height: 100%;
            margin-left: 200px;
            red;
        }
        .contentLR {
            height: 100%;
            margin-left: 200px;
            margin-right: 200px;
            red;
        }
        .sitebarL {
            width: 200px;
            float: left;
            margin-right: -100%;
            green;
        }
        .sitebarR {
            width: 200px;
            float: right;
            margin-left: -100%;
            green;
        }
        .clear {
            width: 100%;
            clear: both;
            height: 10px;
        }
        #left {
                float: left;
                width: 200px;
                height: 100px;
                green;
        }
 
        #contentL {
            height: 100px;
            red;
            margin-left: 200px;/*==等于右边栏宽度==*/
        }
        #right {
            float: right;
            width: 200px;
            height: 100px;
            green;
        }
 
        #contentR {
            height: 100px;
            red;
            margin-right: 200px;/*==等于左边栏宽度==*/
        }
        #contentLR {
            height: 100px;
            red;
            margin: 0 200px;
        }
        .cont {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <h2>普通文档布局</h2>
    <div >Left</div>
    <div >Right</div>
    <div ></div>
 
 
    <h2>行内布局使用inline-block</h2>
    <div >Left</div>
    <div >Right</div>
    <div ></div>
 
 
    <h2>浮动布局float</h2>
    <div >Left:<br>
        width: 200px;<br>
        height: 100px;<br>
        float: left;<br>
        green;
    </div>
    <div >Right<br>
        width: 60%;<br>
        height: 100px;<br>
        float: right;<br>
        red;
    </div>
    <div ></div>
 
 
    <h2>浮动布局float+margin正边距与多列布局</h2>
    <h3>两列</h3>
    <div id="left">
            Left Sidebar<br>
            float: left;<br>
            width: 200px;<br>
            height: 100px;<br>
            green;<br>
    </div>
    <div id="contentL">
        height: 100px;
            red;
            margin-left: 200px;/*==等于左边栏宽度==*/
        <div id="contentInner">
            Main Content
        </div>
    </div>
    <div ></div>
    <div id="right">
        Right Sidebar<br>
        float: right;<br>
        width: 200px;<br>
        height: 100px;<br>
        green;
    </div>
    <div id="contentR">
        height: 100px;
            red;
            margin-right: 200px;/*==等于右边栏宽度==*/
        <div id="contentInner">
            Main Content
        </div>
    </div>
    <div ></div>
    <h3>三列</h3>
    <div id="left">
        Left Sidebar<br>
        float: left;<br>
        width: 200px;<br>
        height: 100px;<br>
        green;<br>
    </div>
    <div id="right">
        Right Sidebar<br>
        float: right;<br>
        width: 200px;<br>
        height: 100px;<br>
        green;
    </div>
    <div id="contentLR">
        <div id="contentInner">
            Main Content<br>
            height: 100px;<br>
            red;<br>
            margin: 0 200px;<br>
        </div>
    </div>
 
 
    <h2>浮动布局float+margin负边距与多列布局</h2>
    <h3>两列</h3>
    <div >
        <h4>左侧定宽200px区块</h4>
        <p>width: 200px;
            float: left;
            margin-right: -100%;
            green;
        </p>
    </div>
    <div >
        <div >
            <h4>右侧主体自适应区块</h4>
            <p>.mainR:width: 100%;
            float: right;</p>
            <p>.contentR:height: 100%;
            margin-left: 200px;
            red;
            </p>
        </div>
    </div>
    <div ></div>
    <div >
        <div >
            <h4>左侧主体自适应区块</h4>
            <p>.mainL:width: 100%;
            float: left;</p>
            <p>.contentL:height: 100%;
            margin-right: 200px;
            red;</p>
        </div>
    </div>
    <div >
        <h4>右侧定宽200px区块</h4><h4>
        <p>width: 200px;
            float: right;
            margin-left: -100%;
            green;
        </p>
    </h4></div>
    <div ></div>
    <h3>三列</h3>
    <div >
        <h4>左侧定宽200px区块</h4>
        <p>width: 200px;
            float: left;
            margin-right: -100%;
            green;
        </p>
    </div>
    <div >
        <div >
            <h4>主体自适应区块</h4>
            <p>.mainR:width: 100%;
                float: left;
            </p>
            <p>.contentLR:height: 100%;
                margin-left: 200px;
                margin-right: 200px;
                red;
            </p>
        </div>
    </div>
    <div >
        <h4>右侧定宽200px区块</h4><h4>
        <p>width: 200px;
            float: right;
            margin-left: -100%;
            green;
        </p>
    </h4></div>
    <div ></div> 
</body></html>