web前端之HTML中的div

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

程序演示：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>div布局</title>
 6         <style type="text/css">
 7             .contain{
 8                 width: 500px;
 9                 
10             }
11             .title{
12                 margin: 0;
13                 height: 50px;
14                 background: gray;
15                 font-size: 14px;
16             }
17             .menu{
18                 margin: 0;
19                 width: 200px;
20                 height: 250px;
21                 background: yellow;
22                 float: left;
23             }
24             .content{
25                 margin: 0;
26                 background-color: beige;
27                 width: 300px;
28                 height: 250px;
29                 float: left;
30             }
31             .foot{
32                 margin: 0;
33                 background: gray;
34                 text-align: center;
35                 clear: both;
36             }
37         </style>
38     </head>
39     <body>
40         <div class="contain">
41             <div class="title">
42                 <h1>Main title of web page</h1>
43             </div>
44             <div class="menu">
45                 <h2>menu</h2>
46                 <ul >
47                     
48                     <li>HTML</li>
49                     <li>CSS</li>
50                     <li>JavaScript</li>
51                 </ul>
52             </div>
53             <div class="content">
54                 Content goes here
55             </div>
56             <div class="foot">
57                 Copyright W3School.com.cn
58             </div>
59         </div>
60     </body>
61 </html>