发新话题
打印

[教程] 四个div横排代码+效果

四个div横排代码+效果

复制内容到剪贴板
代码:
<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>  
  <html   xmlns="http://www.w3.org/1999/xhtml";>  
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />  
  <title>无标题文档</title>  
  <style   type="text/css">  
  <!--  
  .table_tile{  
  text-align:left;  
  background-color:#999966;  
  height:   20px;  
  width:   25%;  
  float:   left;  
  }  
  .table_tile_{  
  text-align:right;  
  background-color:#0000FF;  
  height:   20px;  
  width:   25%;  
  float:   left;  
  }  
  .table_tile_bottom{  
  text-align:left;  
  background-color:#FFF000;  
  height:   20px;  
  width:   25%;  
  float:   left;  
  }  
  -->  
  </style>  
  </head>  
   
  <div   class="table_tr">  
  <div   class="table_tile">top0</div>  
  <div   class="table_tile_">top1</div>  
  <div   class="table_tile">top2</div>  
  <div   class="table_tile">top3</div>  
  </div>  
   
  <div   class="table_tr">  
  <div   class="table_tile_bottom">bottom0</div>  
  <div   class="table_tile_bottom">bottom1</div>   
  <div   class="table_tile_bottom">bottom2</div>  
  <div   class="table_tile_bottom">bottom3</div>   
  </div>  
   
  </body>  
  </html>
紫阳
紫阳★木

TOP

发新话题