前端css布局篇（一）普通布局

最新推荐文章于 2024-09-04 13:37:44 发布

志若鸿鹄，尺步寸微

最新推荐文章于 2024-09-04 13:37:44 发布

阅读量330

点赞数 1

分类专栏：前端基础 css 文章标签： css 前端基础 css布局

本文链接：https://blog.youkuaiyun.com/qq_41363062/article/details/86041515

版权

本文介绍了前端CSS布局中的版心概念，常见的版心宽度，并阐述了布局的基本流程。遵循先确定版心，再分析行模块和列模块的步骤，通过HTML结构和CSS控制页面布局。接着详细讲解了一列固定宽度居中、左右布局以及通栏布局的实现方法。

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

版心和布局流程

“版心”（可视区）是指网页中主体内容所在的区域。一般在浏览器窗口水平居中显示。常见的宽度为：960px ,980px,1000px,1200px等；

布局流程

为了提高网页制作效率，布局时通常需要遵守一定布局流程：

确定页面的版心（可视区）
分析页面中的行模块，以及每个行模块中的列模块。
制作HTML结构
CSS初始化，然后开始运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块

一列固定宽度且居中

 <style>
 /*并集选择器，将共同属性写在一起，减少代码冗余;*/
        .top,
        .banner,
        .main,
        .footer{
            width: 900px;
            background:#ccc;
            border:1px solid #000000;
            text-align: center;
        }
        .top{
            height: 80px;
            margin: 0 auto;
        }
        .banner{
            height: 120px;
            margin:5px auto;

        }
        .main{
            height: 120px;
            margin: 0 auto;
        }
        .footer{
            height: 120px;
            margi

最低0.47元/天解锁文章