• 网页布局练习


    布局画框  

     1 <head>
     2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     3 <title>无标题文档</title>
     4 <style type="text/css">
     5 */*全部*/
     6 {
     7     margin:0px;/*去除所有边距*/
     8     padding:0px;/*去除所有间距*/}
     9 </style>
    10 </head>
    11 
    12 <body>
    13 <div style="height:100px; 70%; left:200px; top:0px; position:fixed; border:1px solid #000; z-index:2; opacity:0.6;"></div>
    14 <div style="height:70px; 70%; left:200px; top:114px; position:absolute; border:1px solid #000;"></div>
    15 <div style="height:240px; 20%; left:200px; top:198px; position:relative; border:1px solid #000;"></div>
    16 <div style="height:100px; 20%; left:200px; top:211px; position:relative; border:1px solid #000;"></div>
    17 <div style="height:50px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    18 <div style="height:285px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    19 <div style="height:285px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    20 <div style="height:285px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    21 <div style="height:285px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    22 <div style="height:365px; 20%; left:200px; top:224px; position:relative; border:1px solid #000;"></div>
    23 <div style="height:270px; 49%; left:483px; top:198px; position:absolute; border:1px solid #000;"></div>
    24 <div style="height:210px; 49%; left:483px; top:481px; position:absolute; border:1px solid #000;"></div>
    25 <div style="height:270px; 49%; left:483px; top:704px; position:absolute; border:1px solid #000;"></div>
    26 <div style="height:270px; 49%; left:483px; top:974px; position:absolute; border:1px solid #000;"></div>
    27 <div style="height:270px; 49%; left:483px; top:1244px; position:absolute; border:1px solid #000;"></div>
    28 <div style="height:550px; 49%; left:483px; top:1514px; position:absolute; border:1px solid #000;"></div>
    29 <div style="height:56px; 49%; left:483px; top:2077px; position:absolute; border:1px solid #000;"></div>
    30 <div style="height:230px; 23%; left:200px; top:2135px; position:absolute; border:1px solid #000;"></div>
    31 <div style="height:230px; 23%; left:510px; top:2135px; position:absolute; border:1px solid #000;"></div>
    32 <div style="height:230px; 24%; left:820px; top:2135px; position:absolute; border:1px solid #000;"></div>
    33 <div style="height:400px; 70%; left:200px; top:2378px; position:absolute; border:1px solid #000;"></div>
    34 <div style="height:500px; 70%; left:200px; top:2791px; position:absolute; border:1px solid #000;"></div>
    35 <div style="height:400px; 70%; left:200px; top:3304px; position:absolute; border:1px solid #000;"></div>
    36 <div style="height:400px; 70%; left:200px; top:3717px; position:absolute; border:1px solid #000;"></div>
    37 </body>
  • 相关阅读:
    Markdown语法
    负载均衡、反向代理、CDN的概念
    IDEA远程调试
    跨域简介
    java命令:javac/java/javap
    尾递归实现斐波那契数列
    Java集合:框架
    volatile简介与原理
    乐观锁和悲观锁
    移动端布局的心得
  • 原文地址:https://www.cnblogs.com/mazhijie/p/5518647.html
Copyright © 2020-2023  润新知