常见的网页布局（HTML、CSS）

最新推荐文章于 2024-09-13 23:28:46 发布

不易撞的网名

最新推荐文章于 2024-09-13 23:28:46 发布

阅读量120

点赞数

分类专栏：前端文章标签： css html html5 css3

本文链接：https://blog.csdn.net/weixin_50569789/article/details/119564130

版权

前端专栏收录该内容

264 篇文章 5 订阅

订阅专栏

本文详细解析了常见的网页布局方式，包括使用HTML定义结构，CSS进行样式控制。从顶部导航到内容区块，再到底部页脚，通过实例展示了如何用`<div>`、`<ul>`和`<li>`等元素结合`margin`, `padding`, 和`float`属性实现响应式布局。

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

常见的网页布局（HTML、CSS）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见的网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

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

        }

        .banner {
            width: 980px;
            height: 150px;
            background-color: gray;
            margin: 10px auto;
            /*  居中 */
        }

        .box {
            width: 980px;
            height: 300px;
            margin: 0 auto;
            background-color: #fff;
        }

        .box li {
            width: 237px;
            height: 300px;
            float: left;
            background-color: gray;
            list-style: none;
            margin-right: 10px;
        }

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

        /* 只要是通栏的盒子 不需要设置宽度 */
        .footer {
            height: 200px;
            background-color: gray;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div></div>
    <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>
        box
    </div>
    <div class="footer">footer</div>
</body>

</html>