＜div＞＜/div＞使用案例_div实例

作者：你好赵伟 | 2024-03-27 16:42:00

踩

div实例

大多数网站可以使用 <div> 或者 <table> 元素来创建多列。但是，table标签是不建议作为布局工具使用的，因为表格不是布局工具。
div 元素是用于分组 HTML 元素的块级元素。div默认就是垂直平铺（垂直排列）；水平的需要加style="float:left"。

加上style="float:left"的样式
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><div></div>使用案例</title>
</head>
<body>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#ff4800" align="center">
        <h1 style="margin-bottom:0">
            系统界面设计
        </h1>
    </div>

    <div id="menu" style="background-color:#00b2ff;height:200px;width:100px;float:left;" align="center">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>

    <div id="footer" style="background-color:#ff6200;clear:both;text-align:center;">
        版权@zwb.com
    </div>

</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

结果展示：
在这里插入图片描述

不加上style="float:left"的样式：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><div></div>使用案例</title>
</head>
<body>

<div id="container" style="width:500px">

    <div id="header" style="background-color:#ff4800" align="center">
        <h1 style="margin-bottom:0">
            系统界面设计
        </h1>
    </div>

    <div id="menu" style="background-color:#00b2ff;height:200px;width:100px;float:left;" align="center">
        <b>菜单</b><br>
        HTML<br>
        CSS<br>
        JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
        内容在这里
    </div>

    <div id="footer" style="background-color:#ff6200;clear:both;text-align:center;">
        版权@zwb.com
    </div>

</div>

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

结果展示：
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/325531