HTML布局

用<div>写下表代码

< ! DOCTYPE html >

< html >

< head >

< meta   charset = " utf-8 " >  

< title > 菜鸟教程(runoob.com) </ title >  

</ head >

< body >

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

< div id = " header " style = " background-color:#FFA500; " >

< h1 style = " margin-bottom:0; " > 主要的网页标题 </ h1 >

</ div >

< div id = " menu " style = " background-color:#FFD700;height:200px;width:100px;float:left; " >

< 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:#FFA500;clear:both;text-align:center; " > 版权 © runoob.com </ div >

</ div >

</ body >

</ html >

大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

	即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！