HTML div 标签|极客教程

HTML div 标签

在HTML中，div标签是一个通用的块级元素，被用来组织内容和布局网页。div标签是没有任何固有样式的，因此非常灵活，可以通过CSS样式表来自定义外观和布局。

创建一个简单的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>Div Element</title>
    <style>
        .myDiv {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="myDiv">
    <h1>欢迎来到how2html.com</h1>
    <p>这是一个简单的div示例</p>
</div>

</body>
</html>

Output:

HTML div 标签

在上面的示例中，我们创建了一个带有背景颜色、内边距和居中文本的div元素。

嵌套div元素

<div class="parentDiv">
    <div class="childDiv1">
        <p>这是第一个子元素</p>
    </div>
    <div class="childDiv2">
        <p>这是第二个子元素</p>
    </div>
</div>

在此示例中，我们创建了一个父级div元素和两个嵌套的子级div元素。

使用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>Div Layout</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
        }
        .item {
            width: 30%;
            background-color: lightgreen;
            padding: 10px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

</body>
</html>

Output:

HTML div 标签

在上面的示例中，我们使用flex布局来创建一个容器，其中包含三个具有相同宽度和间距的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>Responsive Design</title>
    <style>
        .responsiveDiv {
            width: 100%;
            padding: 20px;
            background-color: lightcoral;
        }
        @media screen and (min-width: 768px) {
            .responsiveDiv {
                width: 50%;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>

<div class="responsiveDiv">
    <h2>Responsive Div</h2>
    <p>This div will change its width when the screen size is larger than 768px.</p>
</div>

</body>
</html>

Output:

HTML div 标签

在上面的示例中，我们使用媒体查询来创建一个响应式的div元素，当屏幕宽度大于768px时，div的宽度将变为50%。

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>Event Handling</title>
    <style>
        .clickDiv {
            padding: 20px;
            background-color: lightyellow;
            cursor: pointer;
        }
    </style>
</head>
<body>

<div class="clickDiv" onclick="alert('Div被点击了！')">
    <h2>Click Me</h2>
    <p>点击这个div看看会发生什么</p>
</div>

</body>
</html>