layout布局

最新推荐文章于 2024-07-02 23:14:46 发布

webi8bo

最新推荐文章于 2024-07-02 23:14:46 发布

阅读量2.6k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_51702682/article/details/109388519

版权

本文介绍了网页布局的各种方法，包括浮动布局、定位布局、多列布局、流式布局和系统布局。通过具体的代码示例展示了如何创建大布局，如单列居中布局、自适应两列布局以及三列布局，探讨了使用表格和浮动实现三列布局的差异。

摘要由CSDN通过智能技术生成

网页布局（layout布局）

浮动布局
定位布局
多列布局

制作网站的大布局

流式布局（按照百分比)
系统布局
单列布局（固定布局，主要采用居中布局）

heade,footer与content等宽居中

代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
            width: 1190px;
            height: 600px;
            margin: 0 auto;
        }
        .heade{
            padding: 0 10px;
            height: 20%;
            border: 1px solid red;
        }
        .content{
            height: 60%;