基础知识点

1 : inline-block布局;

2:table布局;

3:justify的末行不对齐

4：两个图标之间有空格（换行）

5:背景中的图片的 路径的 全部斜杠都为 /,不是 命令行下的这种\

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>xx</title>
</head>
<body>
<style>
    .i_b {
        display:inline-block;
    }
    .px40 {
        width:40px;
    }
    
    .tb {
        display:table;
    }
    .tr {
        display : table-row;
    }
    .td {
        display:table-cell;
    }
    .justify{
        text-align:justify;
    }
    .justify_fix {
        display: inline-block;
        width: 100%;
        height: 0;
        overflow: hidden;
    }
</style>
<div>
    inline-block布局么么哒 
    /*
        IE 7,6不支持;
        用display:inline; *zoom:1模拟
    */
    <div class="i_b px40">
        111
        111
        111
    </div>
    <div class="i_b">
        111
    </div>
    <div class="i_b px40">
        111
        111
        111
        111
    </div>
    <div class="i_b">
        111
    </div>
    table布局么么哒
    <div class="tb">
        <div class="tr">            
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>
        </div>
        
        <div class="tr">            
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>      
            <div class="td">
                display:table-cell;
                <br>
                <br>
                display:table-cell;
            </div>
        </div>
    </div>
    <div class="justify">
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
        <div class="justify_fix"></div>
    </div>
    <div>
        两个图标之间有空格么么哒;
        <img src="android_page_selected.png" />
        <img src="android_page_selected.png" />
    </div>
    <div>
        两个图标之间木有空格么么哒;
        <img src="android_page_selected.png" /><img src="android_page_selected.png" />
    </div>
</div>
</body>
</html>

 

posted @ 2014-10-11 14:23  方方和圆圆  阅读(240)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？