html之区域的浮动

来源：互联网发布：淘宝国际编辑：程序博客网时间：2024/06/03 02:08

html页面

<!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=utf-8" />
<title>绝对定位与相对定位</title>
<link type="text/css" rel="stylesheet" href="index11.css" />
</head>

css页面

@charset "utf-8";
/* CSS Document */

*{margin:0px auto;
padding:0px;}
#one{width:25%;
     height:100px;
background-color:#30F;
float:left;}
#two{width:50%;
     height:100px;
background-color:#63F;
float:left;}
#three{width:25%;
       height:100px;
    background-color:#9C0;
    float:right;}
#four{width:100%;
      height:600px;
   background-color:#909;}
#five{width:100%;
      height:150px;
   background-color:#F9C;}
#four-one{width:30%;
          height:600px;
    background-color:#0F0;
    float:left;}
#four-two{width:70%;
          height:600px;
    background-color:#609;
    float:right;}
#five-one{width:100%;
          height:50px;
    background-color:#300;
    float:left;}
#five-two{width:100%;
          height:50px;
    background-color:#090;
    float:left;}
#five-three{width:100%;
            height:50px;
   background-color:#960;
   float:left;}
#four-one1{width:100%;
           height:300px;
     background-color:#903;
     float:left;}
#four-one2{width:100%;
           height:300px;
     background-color:#CF0;}
#four-two1{width:60%;
           height:600px;
     background-color:#99C;
     float:left;}
#four-two2{width:40%;
           height:600px;
     background-color:#96F;
     float:right;}
#four-two11{width:100%;
            height:300px;
   background-color:#0CF;
   float:left;}
#four-two12{width:100%;
            height:300px;
   background-color:#66F;
   float:left;}