常见网页布局

最新推荐文章于 2024-06-11 19:26:21 发布

戳戳的船长

最新推荐文章于 2024-06-11 19:26:21 发布

阅读量895

点赞数 1

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_45765588/article/details/116211331

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

一、第一种网页布局格式
二、第二种网页布局格式
- 1.引入例子
三、浮动布局注意点
- 1.浮动和标准流的父盒子搭配
- 2.浮动的盒子只影响浮动盒子后面的标准流

一、第一种网页布局格式

上下是标准流元素排列，左右是利用浮动排列

在这里插入图片描述

二、第二种网页布局格式

1.引入例子

代码如下：

   <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .top {
            height: 50px;
            background-color: gray;
        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            /* 上下外边距：10   居中 */
            margin: 10px auto;
        }

        /* li的父级元素 */
        .box {
            width: 980px;
            /* 居中 */
            margin: 0 auto;
            height: 300px;
            background-color: pink;
        }

        .box li {
            float: left;
            width: 237px;
            height: 300px;
            background-color: gray;
            /* 右外边距 */
            margin-right: 10px;
        }

        .box .last {
            margin-right: 0;
        }

        /* 只要是通栏的盒子(和浏览器一样宽) 不需要指定宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            /* 上外边距 */
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <!-- 四个块元素 -->
    <div class="top">top</div>
    <div class="banner">banner</div>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li class="last">4</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</body>