田字格.html | 码农工具

​x
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>田字格</title>
<style>
   #a
   {
      width:200px;
      height:200px;
      background:red;
      float:left;
      
   }
   #b
   {
      width:200px;
      height:200px;
      background:green;
      float:left;
   }
   #c
   {
      width:200px;
      height:200px;
      background:yellow;
      float:left;
      clear:left;
   }
   #d
   {
      width:200px;
      height:200px;
      background:blue;
      float:left;
         }
</style>
</head>
  <body>
     <h1>
       This is My First HTML
    </h1>
    <div id="a"><h1><i>
      
      我是左上</i></h1></div>
     <div id="b"><h2>
       <b>我是右上</b>
       </h2></div>
     <div id="c"><em>我是左下</em></div>
     <div id="d">我是右下</div>
​
  </body>
     
</html>
HTML