使用 <div> 元素的网页布局 - 如何使用 <div> 元素添加布局。 - 在线编辑器

          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>

  <div id="container" style="width:500px">

    <div id="header" style="background-color:#FFA500;">
      <h1 style="margin-bottom:0;">主要的网页标题</h1>
    </div>

    <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
      <b>菜单</b><br> HTML
      <br> CSS
      <br> JavaScript
    </div>

    <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
      内容在这里</div>

    <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
      版权 © mifengjc.com</div>

  </div>

</body>
</html>
        