什么是div标签|极客教程

什么是div标签

在HTML中，
“`

“`标签是用来定义文档中的一个”区块”或”部分”的容器。“`

“`标签没有特定的含义或语义，它主要用于组织和布局网页的内容。通过使用“`

“`标签，我们可以将页面分成各种不同的部分，然后在每个“`

“`中放置不同的内容。

1. 基本用法

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
</head>
<body>
  <div>
    这是一个基本的div标签示例。
  </div>
</body>
</html>

Output:

什么是div标签

2. 使用类名

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <div class="red">
    这个div标签的文字颜色是红色。
  </div>
</body>
</html>

Output:

什么是div标签

3. 嵌套div

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
</head>
<body>
  <div>
    这是外层div标签。
    <div>
      这是嵌套在外层div中的内层div标签。
    </div>
  </div>
</body>
</html>

Output:

什么是div标签

4. 使用id

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    #green {
      color: green;
    }
  </style>
</head>
<body>
  <div id="green">
    这个div标签的文字颜色是绿色。
  </div>
</body>
</html>

Output:

什么是div标签

5. 添加样式

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .container {
      background-color: lightblue;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    这个div标签有浅蓝色背景和10px内边距。
  </div>
</body>
</html>

Output:

什么是div标签

6. 水平排列div

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .container {
      display: flex;
    }
    .box {
      width: 100px;
      height: 100px;
      margin: 5px;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>
</body>
</html>

Output:

什么是div标签

7. 垂直居中div

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .container {
      height: 200px;
      display: flex;
      align-items: center;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">居中显示</div>
  </div>
</body>
</html>

Output:

什么是div标签

8. 用div创建导航栏

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .navbar {
      display: flex;
      justify-content: space-around;
      background-color: lightgray;
    }
    .nav-link {
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="navbar">
    <div class="nav-link">首页</div>
    <div class="nav-link">关于我们</div>
    <div class="nav-link">服务</div>
  </div>
</body>
</html>

Output:

什么是div标签

9. 响应式布局

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
    .box {
      width: 150px;
      height: 150px;
      margin: 5px;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <div class="box">Box 4</div>
  </div>
</body>
</html>

Output:

什么是div标签

10. 使用div布局整个页面

<!DOCTYPE html>
<html>
<head>
  <title>Div标签示例</title>
  <style>
    .header {
      background-color: lightblue;
      text-align: center;
      padding: 10px;
    }
    .content {
      padding: 20px;
    }
    .footer {
      background-color: lightgray;
      text-align: center;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="header">
    头部内容
  </div>
  <div class="content">
    主要内容
  </div>
  <div class="footer">
    底部内容
  </div>
</body>
</html>

Output:

什么是div标签