HTML基礎用div佈局實現一個簡單網頁

時間 2020-07-25

標籤 html 基礎 div 佈局實現一個簡單網頁欄目 HTML 简体版

原文原文鏈接

div佈局以下css

 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>