html代碼

<div class=&#34;container&#34;> <div class=&#34;left&#34;></div> <" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > 利用div+css實現(xiàn)幾種經(jīng)典布局的詳解，樣式以及代碼！

利用div+css實現(xiàn)幾種經(jīng)典布局的詳解，樣式以及代碼！

時間：2023-09-26 10:18:01 | 來源：網(wǎng)站運營

時間：2023-09-26 10:18:01 來源：網(wǎng)站運營

利用div+css實現(xiàn)幾種經(jīng)典布局的詳解，樣式以及代碼?。?h2 data-first-child>一、左右兩側(cè)，左側(cè)固定寬度200px，右側(cè)自適應(yīng)占滿效果

html代碼

<div class="container"> <div class="left"></div> <div class="right"></div> </div> css代碼

*{ margin: 0px; padding: 0px; } .container{ height: 500px; background: yellow; } .left{ float: left; width: 200px; height: 100%; background: red; } .right{ margin-left: 200px; background: green; height: 100%; }這個實現(xiàn)起來比較的簡單,左側(cè)的div給浮動，右側(cè)的divmargin-left使其從左側(cè)div右側(cè)開始展現(xiàn),加背景顏色方便觀察。

二、左中右三列，左右個200px固定，中間自適應(yīng)占滿

html代碼

<div class="container"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>css代碼

*{ margin:0px; padding: 0px; } .container{ background: yellow; height: 500px; } .left{ background: red; float: left; width: 200px; height: 100%; } .center{ /*第一種用浮動，加上左右外邊距，不用絕對定位 這里我推薦把html中的right寫在center的前面,如果按順序?qū)懙脑挄裷ight擠到下面，感興趣的可以自己試試 */ /*margin: 0 200px;*/ /*第二種用浮動加絕對定位*/ /*position: absolute; left: 200px; right: 200px;*/ background: grey; height: 500px; } .right{ background: green; float: right; width: 200px; height: 100%; }

三、上中下三行，頭部200px高，底部200px高，中間自適應(yīng)占滿

html代碼

<div class="container"> <div class="top"></div> <div class="center"></div> <div class="bottom"></div> </div>css代碼

*{ margin:0px; padding: 0px; } .container{ background: yellow; width: 100%; } .top{ background: red; width: 100%; height: 200px; position: absolute; top: 0; } .center{ width: 100%; background: grey; position: absolute; top: 200px; bottom: 200px; } .bottom{ width: 100%; background: green; height: 200px; position: absolute; bottom: 0;這里用到了絕對定位，把上面的和下面的分別設(shè)置top:0,bottom:0 固定在上下兩端，中間的距離上下200px即可

四、上下兩部分，底下這個固定高度200px，如果上面的內(nèi)容少，那么這個footer就固定在底部，如果內(nèi)容多，就把footer擠著往下走

html代碼

<div class="container"> <div class="content"></div> <div class="footer"></div> </div>css代碼

*{ margin: 0px; padding: 0px; } html{ height: 100%; } body{ min-height: 100%; position: relative; } .content{ width: 100%; background:red; padding-bottom: 200px; } .footer{ width: 100%; height: 200px; background: green; position: absolute; bottom: 0; }固定footer在底部和把foorter往下擠著走都比較容易實現(xiàn)，但是合到一起，就不好弄了吧，其實也不難，更改content的高度，就可以看到效果了




必要的設(shè)置就是html要有高度,body的最小高度要有，footer是依照body進行絕對定位的，

了解了這些就不難實現(xiàn)了

關(guān)鍵詞：樣式,布局,實現(xiàn),經(jīng)典,利用

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉