HTML5容器元素

刘春龙原创...大约 1 分钟

<div> 可定义文档中的分区或节（division/section）

<div> 标签可以把文档分割为独立的、不同的部分

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行

<div>主要应用在布局上，作为布局的每个区域的容器

<div>
  <p>1</p>
  <p>2</p>
</div>

效果展示

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      .container {
        width: 100%;
        margin: 0 auto;
      }
      .header {
        height: 50px;
        background-color: #abcdef;
      }
      .nav {
        margin-top: 10px;
        height: 50px;
        background-color: #abcdef;
      }
      .main {
        height: 200px;
        margin-top: 10px;
      }
      .main .left {
        float: left;
        width: 55%;
        height: 200px;
        background-color: #abcdef;
      }
      .main .right {
        float: right;
        width: 40%;
        height: 200px;
        background-color: #abcdef;
      }
      .footer {
        height: 40px;
        margin-top: 10px;
        background-color: #abcdef;
      }
    </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>

轻松一刻 🎧

音乐

视频教程 🎥

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服open in new window进行相关咨询。

昵称

邮箱

网址

按正序
按倒序
按热度

HTML5容器元素

预览: