5.22 360浏览器框架练习 用absolute《绝对位置》编写 

<!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>
360 页面表格
</title>
<style>
*
{ margin:0px;padding:0px;}
.a1
{
    width:100%;
     height:30px;
     left:0%;
     top:0px;
      border: #F00 1px solid;
      position:absolute;        
}
.a2
{
    width:90%;
    height:80px;
    left:5%;
    top:80px;
    border:#F00 1px solid;
    position:absolute;
    }
.a3
{
    width:90%;
    height:35px;
    left:5%;
    top:160px;
    border:1px solid red;
    position:absolute;}
.a4
{
    width:90%;
    height:35px;
    left:5%;
    top:205px;
    border:1px solid red;
    position:absolute;}
.a5
{
    width:25%;
    height:160px;
    left:5%;
    top:250px;
    border:1px solid red;
    position:absolute;}
.a6
{
    width:63%;
    height:180px;
    right:5%;
    top:250px;
    border:1px solid red;
    position:absolute;}
.a7
{
    width:25%;
    height:800px;
    left:5%;
    top:460px;
    border:1px solid red;
    position:absolute;}
.a8
{
    width:63%;
    height:160px;
    right:5%;
    top:450px;
    border:1px solid red;
    position:absolute;}
.a9
{
    width:63%;
    height:590px;
    right:5%;
    top:620px;
    border:1px solid red;
    position:absolute;}
.a10
{
    width:90%;
    height:150px;
    right:5%;
    top:1260px;
    border:1px solid red;
    position:absolute;}
.a11
{
    width:90%;
    height:200px;
    right:5%;
    top:1420px;
    border:1px solid red;
    position:absolute;}
.a12
{
    width:90%;
    height:200px;
    right:5%;
    top:1630px;
    border:1px solid red;
    position:absolute;}
.a13
{
    width:90%;
    height:200px;
    right:5%;
    top:1840px;
    border:1px solid red;
    position:absolute;}
.a14
{
    width:90%;
    height:200px;
    right:5%;
    top:2050px;
    border:1px solid red;
    position:absolute;}
.a15
{
    width:90%;
    height:200px;
    right:5%;
    top:2260px;
    border:1px solid red;
    position:absolute;}
.a16
{
    width:90%;
    height:200px;
    right:5%;
    top:2470px;
    border:1px solid red;
    position:absolute;}
    .a17
{
    width:100%;
    height:200px;
    right:0%;
    top:2680px;
    border:1px solid red;
    position:absolute;}
    .a18
{
    width:4%;
     height:25px;
     right:0%;
     top:300px;
      border: #F00 1px solid;
      position:fixed;}    
.a19
{
    width:4%;
     height:25px;
     right:0%;
     top:335px;
      border: #F00 1px solid;
      position:fixed;    }
      .a20
{
    width:4%;
     height:25px;
     right:0%;
     top:370px;
      border: #F00 1px solid;
      position:fixed;    }
       .a21
{
    width:4%;
     height:25px;
     right:0%;
     top:405px;
      border: #F00 1px solid;
      position:fixed;    }
      .a22
{
    width:4%;
     height:25px;
     right:0%;
     top:440px;
      border: #F00 1px solid;
      position:fixed;    }
       .a23
{
    width:4%;
     height:25px;
     right:0%;
     top:475px;
      border: #F00 1px solid;
      position:fixed;    }
</style>
</head>

<body>
<div class="a1">1</div>
<div class="a2">2</div>
<div class="a3">3</div>
<div class="a4">4</div>
<div class="a5">5</div>
<div class="a6">6</div>
<div class="a7">7</div>
<div class="a8">8</div>
<div class="a9">9</div>
<div class="a10">10</div>
<div class="a11">11</div>
<div class="a12">12</div>
<div class="a13">13</div>
<div class="a14">14</div>
<div class="a15">15</div>
<div class="a16">16</div>
<div class="a17">17</div>
<div class="a18">18</div>
<div class="a19">19</div>
<div class="a20">20</div>
<div class="a21">21</div>
<div class="a22">22</div>
<div class="a23">23</div>
</body>
</html>

 

posted @ 2016-05-22 21:42  一人饮酒醉(SeVen❤)  阅读(122)  评论(0)    收藏  举报