比Table灵活的DIV标签。

网页制作的过程中,难免要对网页中的元素进行排版布局。最开始的时候,流行的方法是用Table标签进行网页布局。因为,众所周知的原因:“速度”。表格标签在嵌套过多的时候,网页在显示的时候会变慢。人们就开始使用Div标签进行布局。

表格是现实生活中最常见的二维表示形式,很好理解。从个人角度来看,表格表示一行一行的明细信息的时候,很方便。但在,纵向首先描述“列”的时候,Div标签更合适,更灵活一些。

下面列出,类似表格行明细的Div实现代码。

CSS样式:

<style>
    .afooter {
        float : none;
        alignment-adjust: center;    
    }
   
    .afooter-list {
        float : left;
        alignment-adjust: center;    
    }
    
    .afooter-list-bottom {
        float : none;
        alignment-adjust: center;    
    }
</style>

HTML代码:(演示1)

<div class="afooter">
    <div class="afooter-list">a</div>
    <div class="afooter-list">b</div>
    <div class="afooter-list">c</div>
    <div class="afooter-list">d</div>
    <div class="afooter-list-bottom">e</div>
</div>
<div class="afooter">
    <div class="afooter-list">e</div>
    <div class="afooter-list">f</div>
    <div class="afooter-list">g</div>
    <div class="afooter-list">h</div>
    <div class="afooter-list-bottom">i</div>
</div>   

上面这段代码,用Table标签写,如下:(演示3)

<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td>e</td> 
        
    </tr>
    <tr>
        <td>h</td>
        <td>i</td>
        <td>j</td>
        <td>h</td> 
        <td>i</td>        
    </tr>
</table>

其实,所谓的灵活,是指代码从机制给你提供了灵活操作的可能,在这个基础上来讲,运用的灵活不灵活,取决于人编码者。

CSS样式:

<style>
    .cfooter {
        float : left;
        alignment-adjust: center;               
    }    
    
    
    .cfooter-list {
        float : none;
        alignment-adjust: center;               
    }    
    
    .cfooter-list-bottom {
        float : none;
        alignment-adjust: center;               
    }     
    
  
    .dfooter {
        float : none;
        alignment-adjust: center;               
    }    
    
    
    .dfooter-list {
        float : none;
        alignment-adjust: center;               
    }    
    
    .dfooter-list-bottom {
        float : none;
        alignment-adjust: center;               
    }      
    
</style>

HTML代码:(演示2) [code]

    <div class="cfooter">
        <div class="cfooter-list">1</div>
        <div class="cfooter-list">2</div>
        <div class="cfooter-list">3</div>
        <div class="cfooter-list">4</div>    
    </div>

    <div class="dfooter">
        <div class="dfooter-list">5</div>
        <div class="dfooter-list">6</div>
        <div class="dfooter-list">7</div>
        <div class="dfooter-list">8</div>    
    </div>
</div>  

这里可能需要多说的是,每个Div层次,在默认的时候,每个Div元素都是需要换行的。每个Div元素都不在一行,但是这个可以情况可以通过改变CSS样式来改变,如上面代码中的“float : none;”属性设置。在这篇代码里,float的left表示,后面的div元素,紧接着其后不换行,而none属性表示,先一个div层开始,div元素就换行了,不在一行了。

Div比较灵活,至于怎么运用,取决于编码者。可以用Div表示类似于表格的明细信息,也可以应用于比较复杂的图片布局。

实际的运行效果,可以看下面的连接: 运行效果演示

糖果

糖果
LUA从入门到放弃

Moonscript如何显示复选框

Moonscript如何显示复选框 Continue reading

Lapis框架的常用处理方法

Published on March 02, 2017