ASP.NET簡易教程7——頁面布局

頁面布局

網上有太多介紹，個人覺得不錯的有《Div+CSS布局大全》，有PDF版本，可下載離線觀看，別人總結的一個文檔，簡潔易懂，學起來不費勁，花時間不多，快速閱讀完，即可上手，呵呵。

這里就不介紹語法，講述一下一些布局的實現。

布局最常用的是div和table，個人比較喜歡div，靈活性高。

Div水平居中

核心語句：margin:0px auto;

<div style=" margin:0px auto; width:100px; height:100px; background:#FF0000;">

 

Div水平排列

核心語句：float:left

    <div style="float:left; width:20%; height:100px; background:#FF0000;"></div>
    <div style="float:left; width:60%; height:200px; background:#000000;"></div>
    <div style="float:left; width:20%; height:100px; background:#FF0000;"></div>

三列

Div三行（滿屏）

    <div style=" margin:0px auto; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; height:300px; background:#000000;"></div>
    <div style=" margin:0px auto; height:50px; background:#FF0000;"></div>

 

Div三行（居中）

並排div自動增高(中部兩列)

核心語句：底部div設置clear:both

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:right; width:70%; height:300px; background:#006000"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>

並排div自動增高(中部三列)

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:left; width:50%; height:300px; background:#006000"></div>
        <div style=" float:right; width:20%; height:150px; background:#BB3D00"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>

Div固定到屏幕指定位置（廣告位、頭部導航固定，不隨滾動條滑動變化）

核心語句：position:fixed; left:0px; top:50px;

    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000;"></div>
    <div style=" margin:0px auto; width:400px;">
        <div style=" float:left; width:30%; height:100px; background:#000079;"></div>
        <div style=" float:left; width:50%; height:300px; background:#006000"></div>
        <div style=" float:right; width:20%; height:150px; background:#BB3D00"></div>
    </div>
    <div style=" margin:0px auto; width:400px; height:50px; background:#FF0000; clear:both;"></div>
    <div style="width:50px; height:150px; background:#00FFFF; position:fixed; left:0px; top:50px;"></div>

 

可自行變化成頭部、底部固定布局。

 上一講：ASP.NET簡易教程6——"增刪查改"來一遍

 下一講：待續

 

本教程希望引導式學習的方式傳授知識，引導新手自主學習，養成自學的能力。
鑒於個人能力有限，如果發現錯漏地方，歡迎指點。

著作權聲明：本文由http://www.cnblogs.com/suguoqiang 原創，歡迎轉載分享。請尊重作者勞動，轉載時保留該聲明和作者博客鏈接，謝謝！