DIV 可以定义块（也就是一段内容），CSS 可以定义样式，我们可以让不同的 DIV 应用不同的 CSS，以此来进行网页的布局
<html> <body> <style> # 定义一个样式A .A { background-color:gray; color:white; } </style> <style> # 定义一个样式B .B { background-color:gray; color:black; } </style> <div class="A"> # 这个div应用样式A <h2>London is the capital city of England. </h2> </div> <div class="B"> # 这个div应用样式B <h2>London is the capital city of England. </h2> </div> </html> </body>
效果：
实践：使用 DIV + CSS 来进行布局
<!DOCTYPE html> <html> <head> <style> # 先定义好CSS（即样式） #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; } #section { width:350px; float:left; padding:10px; } #footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; } </style> </head> <body> <div id="header"> # 不同的div应用不同的css <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>
效果图：
