zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    像调试java一样来调试Redis lua
    微言限流
    性能测试遭遇TPS抖动问题
    你所不知道的堆外缓存
    基于JMH的Benchmark解决方案
    基于FastJson的通用泛型解决方案
    你所不知道的日志异步落库
    mac上配置java开发环境
    你所不知道的库存超限做法
    服务器一般达到多少qps比较好[转]
  • 原文地址:https://www.cnblogs.com/suiyuejinghao123/p/5517896.html
Copyright © 2011-2022 走看看