Div布局实例 | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
    <div id="maxname" style="width:500px;">
      <div id="hname" style="background-color:#666FFF;">
        <h1 style="margin-bottom:0;text-align:center;">Div布局实例</h1>
      </div>
      <div id="menu" style="background-color:#FFFFFF;height:200px;width:100px;float:left;">    
          菜单<br/>
          num1<br/>
          num2<br/>
          num3
      </div>
      <div id="content" style="background-color:#FFFF00;height:200px;width:300px;float:left;">
        中间内容
      </div>
      <div id="right" style="background-color:#000000;color:#FFFFFF;height:200px;width:100px;float:right;">
          信息内容
      </div>
      <div id="bool" style="background-color:#F0F8FF;clear:both;text-align:center;">
        作者：Cty
      </div>
  </div>
</body>
</html>
HTML