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>