頁(yè)面布局

網(wǎng)上有太多介紹，個(gè)人覺得不錯(cuò)的有《Div+CSS布局大全》，有PDF版本，可下載離線觀看，別人總結(jié)的一個(gè)文檔，簡(jiǎn)潔易懂，學(xué)起來(lái)不費(fèi)勁，花時(shí)間不多，快速閱讀完，即可上手，呵呵。

這里就不介紹語(yǔ)法，講述一下一些布局的實(shí)現(xiàn)。

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

Div水平居中

核心語(yǔ)句：margin:0px auto;

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

?

Div水平排列

核心語(yǔ)句：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自動(dòng)增高(中部?jī)闪?

核心語(yǔ)句：底部div設(shè)置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自動(dòng)增高(中部三列)

<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固定到屏幕指定位置（廣告位、頭部導(dǎo)航固定，不隨滾動(dòng)條滑動(dòng)變化）

核心語(yǔ)句：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>

?

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

總結(jié)

以上是生活随笔為你收集整理的ASP.NET简易教程-页面布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。