整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
欄布局，顧名思義就是兩邊固定，中間自適應。三欄布局在開發(fā)十分常見，同時在前端面試中也是屬于必問的知識點，那么什么是三欄布局？比如打開京東的首頁：
映入眼簾的就是一個常見的三欄布局：即左邊商品導航和右邊導航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應。下面圍繞的這樣的目的，即左右模塊固定寬度，中間模塊隨瀏覽器變化自適應，想要完成的最終效果如下圖所示：
紅色和藍色寬度固定，綠色寬度自適應，下面七種方法實現(xiàn)的最終效果跟這個差不多，可能會稍有不同。
1. 流體布局
左右模塊各自向左右浮動，并設置中間模塊的 margin 值使中間模塊寬度自適應。
缺點就是主要內(nèi)容無法最先加載，當頁面內(nèi)容較多時會影響用戶體驗。
2. BFC 三欄布局
BFC 規(guī)則有這樣的描述：BFC 區(qū)域，不會與浮動元素重疊。因此我們可以利用這一點來實現(xiàn) 3 列布局。
缺點跟方法一類似，主要內(nèi)容模塊無法最先加載，當頁面中內(nèi)容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局。
3. 圣杯布局
相關(guān)解釋如下：
(1)中間部分需要根據(jù)瀏覽器寬度的變化而變化，所以要用100%，這里設左中右向左浮動，因為中間100%，左層和右層根本沒有位置上去
(2)把左層margin負100后，發(fā)現(xiàn)left上去了，因為負到出窗口沒位置了，只能往上挪
(3)按第二步這個方法，可以得出它只要挪動窗口寬度那么寬就能到最左邊了，利用負邊距，把左右欄定位
(4)但由于左右欄遮擋住了中間部分，于是采用相對定位方法，各自相對于自己把自己挪出去，得到最終結(jié)果
跟雙飛翼布局很像，有一些細節(jié)上的區(qū)別，相對于雙飛翼布局來說，HTML 結(jié)構(gòu)相對簡單，但是樣式定義就稍微復雜，也是優(yōu)先加載內(nèi)容主體。
4. 雙飛翼布局
圣杯布局實際看起來是復雜的后期維護性也不是很高，在淘寶UED的探討下，出來了一種新的布局方式就是雙飛翼布局，代碼如上。增加多一個div就可以不用相對布局了，只用到了浮動和負邊距。和圣杯布局差異的地方已經(jīng)被注釋。利用的是浮動元素 margin 負值的應用，感興趣的同學可以上網(wǎng)搜搜原理。
主體內(nèi)容可以優(yōu)先加載，HTML 代碼結(jié)構(gòu)稍微復雜點。
5. Flex 布局
簡單實用，未來的趨勢，需要考慮瀏覽器的兼容性
6. Table 布局
缺點：無法設置欄間距
7. 絕對定位布局
使用absolute定位，只需將左右兩欄絕對定位到窗口兩邊，為main添加左右margin創(chuàng)建安全輸入?yún)^(qū)域即可。因為absolute是以第一個定位不是static的父元素定位的，為這個整體添加一個定位不是static的父元素，絕對定位不會與header，footer等重疊。并且main的dom位置在left和right的前面，可在左右兩欄之前完成加載
簡單實用，并且主要內(nèi)容可以優(yōu)先加載。
前端要知道的網(wǎng)絡知識一：TCP/IP 協(xié)議到底在講什么
前端要知道的網(wǎng)絡知識二：TCP協(xié)議的三次握手和四次分手
前端要知道的網(wǎng)絡知識三：認識OSI七層模型
前端要知道的網(wǎng)絡知識四：TCP的概念和HTTP連接管理
前端要知道的網(wǎng)絡知識五：詳細的介紹web緩存
前端要知道的網(wǎng)絡知識六：詳細介紹URL及其用法
前端要知道的網(wǎng)絡知識七：初識HTTP報文
前端要知道的網(wǎng)絡知識八：GET 和 POST 到底有什么區(qū)別
前端要知道的網(wǎng)絡知識九：初識HTTPS加密過程，原來如此
前端要知道的網(wǎng)絡知識十：HTTPS加密核心RSA算法
....
參考文章
https://www.cnblogs.com/chenyablog/p/7918807.html
https://zhuanlan.zhihu.com/p/24305930
https://zhuanlan.zhihu.com/p/25070186
天來說說網(wǎng)頁中實現(xiàn)三欄布局要如何實現(xiàn)的問題，做法有好多，這里就總結(jié)4中常用的方法，感興趣的小伙伴可以看看。
若不是等分分欄的話，一般用得最多的應該是浮動方法，運用浮動做法時候要注意瀏覽器的兼容性！
展示代碼:
網(wǎng)頁布局有很多種方式，一般分為以下幾個部分：頭部區(qū)域、菜單導航區(qū)域、內(nèi)容區(qū)域、底部區(qū)域。
頭部區(qū)域位于整個網(wǎng)頁的頂部，一般用于設置網(wǎng)頁的標題或者網(wǎng)頁的 logo：
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 項目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
/* 頭部樣式 */
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>頭部區(qū)域</h1>
</div>
</body>
</html>菜單導航條包含了一些鏈接，可以引導用戶瀏覽其他頁面：
例
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接 - 修改顏色 */
.topnav a:hover {
background-color: #ddd;
color: black;
}內(nèi)容區(qū)域一般有三種形式:
不相等的列一般是在中間部分設置內(nèi)容區(qū)域，這塊也是最大最主要的，左右兩次側(cè)可以作為一些導航等相關(guān)內(nèi)容，這三列加起來的寬度是 100％。
例：
.column {
float: left;
}
/* 左右側(cè)欄的寬度 */
.column.side {
width: 25%;
}
/* 中間列寬度 */
.column.middle {
width: 50%;
}
/* 響應式布局 - 寬度小于600px時設置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
底部區(qū)域在網(wǎng)頁的最下方，一般包含版權(quán)信息和聯(lián)系方式等。
例
.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}通過以上等學習我們來創(chuàng)建一個響應式等頁面，頁面的布局會根據(jù)屏幕的大小來調(diào)整：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>項目</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 頭部標題 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 導航條 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 導航條鏈接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鏈接顏色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 創(chuàng)建兩列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右側(cè)欄 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 圖像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 響應式布局 - 屏幕尺寸小于 800px 時，兩列布局改為上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 響應式布局 -屏幕尺寸小于 400px 時，導航等布局改為上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}
}
</style>
</head>
<body>
<div class="header">
<h1>我的網(wǎng)頁</h1>
<p>重置瀏覽器大小查看效果。</p>
</div>
<div class="topnav">
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#">鏈接</a>
<a href="#" style="float:right">鏈接</a>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>文章標題</h2>
<h5>xx 年xx月 xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
<p>文本...</p>
<p>當熱誠變成習慣，恐懼和憂慮即無處容身。缺乏熱誠的人也沒有明確的目標。熱誠使想象的輪子轉(zhuǎn)動。一個人缺乏熱誠就象汽車沒有汽油。
善于安排玩樂和工作，兩者保持熱誠，就是最快樂的人。熱誠使平凡的話題變得生動。！</p>
</div>
<div class="card">
<h2>文章標題</h2>
<h5>xx 年 xx 月xx日</h5>
<div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
<p>文本...</p>
<p>一切事無法追求完美，唯有追求盡力而為。這樣心無壓力，出來的結(jié)果反而會更好！</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>關(guān)于我</h2>
<div class="fakeimg" style="height:100px;"></div>
<p>6666</p>
</div>
<div class="card">
<h3>熱門文章</h3>
<div class="fakeimg"><img src="img/fy2_wp.png">\</div>
</div>
<div class="card">
<h3>關(guān)注我</h3>
<p>本站發(fā)布的系統(tǒng)與軟件僅為個人學習測試使用，請在下載后24小時內(nèi)刪除，
不得用于任何商業(yè)用途，否則后果自負，請支持購買正版軟件！如侵犯到您的權(quán)益,請及時通知我們,我們會及時處理。
聲明：為非贏利性網(wǎng)站 不接受任何贊助和廣告。</p>
</div>
</div>
</div>
<div class="footer">
<h2>底部區(qū)域</h2>
</div>
</body>
</html>本文主要介紹了Html的網(wǎng)頁布局結(jié)構(gòu)，如何去了解網(wǎng)絡的布局，介紹了常見的移動設備的三種網(wǎng)頁模式，最后通過一個小項目，總結(jié)之前講解的內(nèi)容。
代碼很簡單，希望可以幫助你學習。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
