ASP.NET簡易教程-頁面佈局
阿新 • • 發佈:2018-12-26
頁面佈局
網上有太多介紹,個人覺得不錯的有《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>
可自行變化成頭部、底部固定佈局。