在我們熟悉了html布局之后，經(jīng)常會(huì)選用能夠滿足當(dāng)前自己需求的排版布局或習(xí)慣性選" />

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

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > DIV+CSS頁(yè)面基本布局總結(jié)

DIV+CSS頁(yè)面基本布局總結(jié)

時(shí)間：2023-09-26 10:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-26 10:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

DIV+CSS頁(yè)面基本布局總結(jié)：

前言

DIV+CSS布局是前端最為基礎(chǔ)的知識(shí)，而現(xiàn)在網(wǎng)絡(luò)上最為普遍的有一列，兩列，三列，窗格式布局以及自適應(yīng)布局等等。
在我們熟悉了html布局之后，經(jīng)常會(huì)選用能夠滿足當(dāng)前自己需求的排版布局或習(xí)慣性選用自己常用的布局方式，有時(shí)候我發(fā)現(xiàn)能滿足我某個(gè)時(shí)刻需求的網(wǎng)頁(yè)布局往往是我習(xí)慣常用的，但不一定是更好更適合的布局，所以我就想回到最初，把最基礎(chǔ)的頁(yè)面布局總結(jié)一下，可以供入門的新手了解一下，我認(rèn)為多對(duì)一些基礎(chǔ)知識(shí)點(diǎn)多總結(jié)多了解沒(méi)有壞處。

1.固定寬度布局

html代碼：

<!DOCTYPE html><html><head> <title>一列水平居中布局</title> <meta charset="utf-8"></head><body> <div class="one-center-col">一列布局</div></body></html>css代碼：

<style> .one-center-col { width: 1000px; height: 700px; background-color: grey; margin: 0 auto; }</style>效果截圖：





image

其中對(duì)于寬度固定的元素，只需要設(shè)置該元素的css樣式(margin:0 auto;)就可以實(shí)現(xiàn)讓該元素在其父元素的寬度下水平居中對(duì)齊顯示。

html代碼：

<div class="container"> <div class="leftbox">左側(cè)列</div> <div class="rightbox">右側(cè)列</div></div>左右列的css代碼：

.leftbox { width: 300px; height: 100%; background-color: #aadddd; float: left;} .rightbox { width: 700px; height: 100%; background-color: #f08844; float: right;}效果截圖





image

兩列布局，當(dāng)已知列的寬度時(shí)，可以使用浮動(dòng)屬性來(lái)達(dá)到左右布局的效果，僅需設(shè)置float:left和float:right就可以輕松達(dá)到頁(yè)面布局效果。

html代碼：

<div class="container"> <div class="leftbox">左側(cè)列</div> <div class="midbox">中間列</div> <div class="rightbox">右側(cè)列</div></div>css部分代碼：

.leftbox { width: 300px; float: left;}.midbox { width: 400px; float: left;}.rightbox { width: 300px; float: right;}效果示意圖





image

leftbox和midbox設(shè)置左浮動(dòng)，rightbox設(shè)置右浮動(dòng)。但關(guān)鍵的是，三個(gè)子元素的總寬度不能大于或者等于父元素的寬度。

2. 自適應(yīng)寬度布局

.leftbox { width: 300px; height: 100%; background-color: #aadddd; float: left;}.rightbox { height: 100%; margin-left: 300px; background-color: #f08844;}基本思路分析：

  1. 左側(cè)設(shè)置固定寬度并設(shè)置浮動(dòng)float:left;
  2. 右側(cè)不設(shè)置寬度，只設(shè)置左側(cè)邊距為左側(cè)欄的寬度加上左側(cè)與右側(cè)的間距margin-left。
2）使用定位來(lái)進(jìn)行布局：

.container { width: 1000px; height: 700px; margin: 0 auto; position: relative;}.leftbox { width: 300px; /*左側(cè)固定寬度值*/ height: 100%; position: absolute;}.rightbox { height: 100%; margin-left: 300px; /*邊距值=左側(cè)固定寬度值*/ position: relative;}基本思路分析：

  1. 父元素設(shè)置為position:relative;
  2. leftbox設(shè)置固定寬度，設(shè)定為絕對(duì)定位position:absolute。
  3. rightbox設(shè)置為相對(duì)定位position:relative。（使其遮蓋左側(cè)欄）
  4. rightbox設(shè)置左邊距，邊距值margin-left剛好為左側(cè)欄的寬度。
截圖展示：





image

.leftbox { width: 300px; height: 100%; background-color: #aadddd; float: left;} .midbox { margin: 0 300px; height: 100%; background-color: #aa11dd;}.rightbox { width: 300px; height: 100%; background-color: #f08844; float: right;}基本思路分析：
1.左側(cè)以及右側(cè)設(shè)置固定寬度，并且分別設(shè)置左右浮動(dòng)。
2.中間欄設(shè)置左右邊距，邊距值剛好分別等于左右側(cè)欄的寬度。

2）使用定位來(lái)布局

.container { width: 1000px; height: 700px; margin: 0 auto; position: relative;}.leftbox { width: 300px; height: 100%; position: absolute; left: 0;}.midbox { margin: 0 300px; height: 100%; position: relative;}.rightbox { width: 300px; height: 100%; position: absolute; right: 0;}思路分析：
1.父元素設(shè)置position:relative;
2.leftbox和rightbox設(shè)置position:absolute;并且設(shè)置左右側(cè)欄的寬度值。
3.midbox設(shè)置position:relative;
4.midbox設(shè)置左右margin值，正好對(duì)應(yīng)左右側(cè)欄的寬度值(margin=leftboxWidth/rightboxWidth)。

截圖展示：





image

以上為我自己簡(jiǎn)單總結(jié)歸納的一些最基礎(chǔ)的div+css布局的考慮實(shí)現(xiàn)方式，希望能夠?qū)δ承﹦偨佑|前端的新手在基礎(chǔ)布局的實(shí)現(xiàn)上提供一點(diǎn)點(diǎn)幫助。

如果需要練手，可以在學(xué)習(xí)這個(gè)教程：
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/
也可以參考盒子模型
https://www.runoob.com/css/css-boxmodel.html
屬性參考手冊(cè)
https://www.runoob.com/cssref/css-reference.html
布局
https://www.runoob.com/html/html-layouts.html

css 在線編輯器

http://tool.chinaz.com/Tools/cssdesigner.aspx

css速查：http://code.ciaoca.com/style/css-cheat-sheet/

css速查：http://www.css88.com/book/css/quicksearch.htm

頁(yè)面布局

https://blog.csdn.net/xxlovesht/article/details/80736419

希望對(duì)大家有幫助

關(guān)鍵詞：布局,總結(jié),基本

74
73
25
news

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

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