html之div元素

谦虚且进步

已于 2022-06-20 23:48:34 修改

阅读量2.1k

点赞数 5

分类专栏： HTML 文章标签： html 前端

于 2022-06-08 19:15:18 首次发布

本文链接：https://blog.csdn.net/weixin_44992737/article/details/125190435

版权

HTML 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

<div>是块级元素，他会独占一行，行高和宽度可以修改。可以把把<div>元素想象成一个矩形，然后再矩形里放置各种各样的内容，因此可以把<div>标签形成的矩形区域称作容器，即container，div也称为容器元素。利用<div>元素可以像画画或者图片拼接一样实现网页排版。下面的代码就是一个实例。

<!DOCTYPE html>
<html lang="zn-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排版</title>
    <style>
        .container {
            width: 1400;
            margin: 0 auto;
        }

        .header {
            height: 80px;
            background-color: aquamarine;

        }

        .nav {
            margin-top: 10px;
            height: 80px;
            background-color: aqua;
        }

        .main {
            height: 600px;
            margin-top: 10px;

        }

        .left {
            float: left;
            height: 600px;
            width: 900px;
            background-color: aqua;
        }

        .right {
            float: right;
            height: 600px;
            width: 480px;
            background-color: aqua
        }

        .footer {
            margin-top: 10px;
            background-color: aqua;
            height: 80px;

        }
    </style>
</head>

<body>

    <div class="container">
        <div class="header">网页头</div>
        <div class="nav">网页导航</div>
        <div class="main">
            <div class="left">主要内容</div>
            <div class="right">侧边栏</div>
        </div>
        <div class="footer">网站底部</div>
    </div>


</body>

</html>

网页显示效果如下：每种颜色的矩形框都是一个容器，即<div>标签。