例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>布局</title> <style> #header{ background-color:black; /*背景色*/ color: white; /*设置字段的颜色*/ text-align: center; /*设置字段的居中显示*/ padding: 5px; } #nav{ background-color:#ebebeb; /*设置背景颜色*/ line-height: 30px; /*设置行高的间距*/ width: 110px; height: 310px; float: left; /*设置浮动*/ padding: 5px; /*设置盒子的内边距*/ } #section{ width: 350px; float: left; padding: 10px; } #footer{ background-color:black; color: white; text-align: center; padding: 5px; clear: both; /*设置图像的左侧和右侧均不允许出现浮动元素*/ } </style> </head> <body> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br/> Paris<br/> Tokyo<br/> </div> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> <p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. </p> </div> <div id="footer"> Copyright ? W3Schools.com </div> </body> </html>