zoukankan      html  css  js  c++  java
  • 九宫格布局练习。

    <!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">
    *
    {margin:0;padding:0; font-size:12px;}

    .box
    {position:relative; overflow:hidden; width:50%; background:#F34703;}
    /*上面3格定义*/
    .t_l, .t_c, .t_r
    {position:absolute; top:0; height:12px; z-index:2;}
    .t_l, .t_r
    {width:12px; background:blue;}
    .t_l
    {left:0;}
    .t_r
    {right:0;}
    .t_c
    {width:100%; background:orange; z-index:1;}
    /*中间3格定义*/
    .c_l, .c_r
    {position:absolute; top:0; z-index:1; background:orange;width:12px;height:2000px;}
    .c_l
    {left:0;}
    .c_r
    {right:0;}
    .c_c
    {width:100%;}
    /*下面3格定义*/
    .b_l,.b_c, .b_r
    {position:absolute; height:12px; bottom:0;}
    .b_l, .b_r
    {background:blue; width:12px; z-index:1;}
    .b_l
    {left:0;}
    .b_r
    {right:0;}
    .b_c
    {width:100%; background:orange;}
    </style>
    </head>

    <body>
    <div class="box">
        
        
    <div class="t_l"></div>
        
    <div class="t_c"></div>
        
    <div class="t_r"></div>
        
        
    <div class="c_l"></div>
        
    <div class="c_c">
            
            
    <div style="padding:20px;">
                九宫格布局,自由拖动浏览器,跟随浏览器拖动而调整布局。
    <br />
                九宫格布局,自由拖动浏览器,跟随浏览器拖动而调整布局。
    <br />
                九宫格布局,自由拖动浏览器,跟随浏览器拖动而调整布局。
    <br />
                
    <div style="text-align:right;">默默学习者练习</div>
            
    </div>
            
        
    </div>
        
    <div class="c_r"></div>
        
        
    <div class="b_l"></div>
        
    <div class="b_c"></div>
        
    <div class="b_r"></div>
        
    </div>
    </body>
    </html>

     

  • 相关阅读:
    [C++][编程风格]C++命名规则
    [Android]搜索关键字飞入飞出效果 (转)
    android,性能优化,内存优化管理,高级缓存 (转)
    Java内存泄露原因详解
    Java之线程(2) 调时器
    Java之线程(1) 传统线程机制的回顾
    Hibernate(1) 阻抗不匹配
    No4.传统线程同步通信技术
    Android内存溢出
    MAT Memory Analyzer Tool 插件装配(图解)(转)
  • 原文地址:https://www.cnblogs.com/huanghai/p/2007874.html
Copyright © 2011-2022 走看看