div布局如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML基础:利用div进行布局</title> 6 <style type="text/css"> 7 *{margin:0;padding:0} 8 </style> 9 </head> 10 <body> 11 <div class="container" style="width:500px;margin:0 auto"> 12 <!--头部--> 13 <div class="header" style="background-color:#FFA500;"> 14 <h1>主要的网页标题</h1> 15 </div> 16 17 <!--左侧菜单--> 18 <div class="menu" style="background-color:#FFD700;height:200px;width:100px;float:left"> 19 <h4>菜单</h4><br> 20 HTML<br> 21 CSS<br> 22 JavaScript 23 </div> 24 25 <!--内容部分--> 26 <div class="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left"> 27 内容在这里 28 </div> 29 30 <!--版权--> 31 <div class="footer" style="background-color:#FFA500;clear:both;text-align:center"> 32 版权 @ bokeyuan.com 33 </div> 34 </div> 35 </body> 36 </html>
浏览器打开如下:
看到这里你是不是对布局有一点感觉了呢?我们继续把例子完成