前端切图布局，简单的切图模块划分

效果

HTML部分

<div class="box">
    <divclass="left fl">
        left
    </div>
    <div class="content fl">
        <div class="con1 fl">
            内容左侧
        </div>
        <div class="con2 fl">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div class="con3 fl">内容右侧</div>
        <div class="line fl">内容底部</div>
    </div>
</div>

CSS部分

*{margin: 0;padding: 0;}
.fl{float: left;}
.box{width: 1200px;height: 600px;margin: 0 auto;}
.left{width: 200px;height: 600px;background: #abcdef;}
.content{width: 1000px;position: relative;}
.content .con1{width: 200px;height: 500px;background: pink;}
.content .con2{width: 600px;height: 500px;background: greenyellow;}
.content .con2 ul li{float: left;width: 300px;height: 250px;}
.content .con3{width: 200px;height: 600px;background: burlywood;}
.content .line{width: 800px;height: 100px;position: absolute;left: 0;bottom: 0;background: blueviolet;}