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

最新推荐文章于 2025-05-24 12:36:46 发布

混迹在开发队伍里的伪开发

最新推荐文章于 2025-05-24 12:36:46 发布

阅读量816

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签：布局切图 css

本文链接：https://blog.youkuaiyun.com/weixin_42645716/article/details/87718229

css 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS来创建一个包含多个内容区域的响应式网页布局，通过浮动元素和相对定位实现左中右及底部区域的精确对齐。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果
在这里插入图片描述
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;}