HTML-DIV布局 1 <DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> 5 <title>div布局</title> 6 <style type="text/CSS"> 7 div#container 8 { 9 width:800px;10 }11 div#header12 {13 background-color:#99bbbb;14 }15 div#menu16 {17 background-color:#ffff99;18 height:450px;19 width:200px;20 float:left;21 }22 div#content23 {24 background-color:#EEEEEE;25 height:450px;26 width:600px;27 float:left;28 }29 div#footer30 {31 background-color:#99bbbb;32 text-align:center;33 clear:both;34 }35 h136 {37 margin-bottom:0;38 }39 </style>40 </head>41 <body>42 <div id="container">43 <div id="header">44 <h1>Main Tilte of the web page</h1>45 </div>46 <div id="menu">47 <h2>Menu</h2>48 <p>无序列表</p>49 <ul>50 <li>HTML</li>51 <li>CSS</li>52 <li>javaScript</li>53 <li>Jquery</li>54 </ul>55 <p>有序列表</p>56 <ol>57 <li>电视机</li>58 <li>冰箱</li>59 <li>空调</li>60 </ol>61 <p>自定义列表</p>62 <dl>63 <dt>科目</dt>64 <dd>语文</dd>65 <dd>数学</dd>66 <dd>英语</dd>67 </dl>68 </div>69 <div id="content">Content goes here</div>70 <div id="footer">Copyright W3CSchool.com.cn</div>71 </div>72 </body>73 </html>
效果图：