QQ空間個(gè)人中心怎么排版

進(jìn)入QQ空間點(diǎn)擊“小齒輪”“空間設(shè)置”“個(gè)人中心”“三欄布局?！被蛘摺皟蓹诓季?；

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供盂縣網(wǎng)站建設(shè)、盂縣做網(wǎng)站、盂縣網(wǎng)站設(shè)計(jì)、盂縣網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、盂縣企業(yè)網(wǎng)站模板建站服務(wù)，10年盂縣做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

設(shè)置成“三欄布局”模式后的頁(yè)面顯示圖：

設(shè)置成“兩欄布局”模式后頁(yè)面顯示，如圖：

提示：若在“三欄布局?！惫催x“取消標(biāo)題欄”，那么空間的標(biāo)題欄就不會(huì)顯示。

《web前端筆記30》css三欄布局、左右兩欄寬度固定，中間自適應(yīng)

三欄布局一般指的是頁(yè)面中一共有三欄， 左右兩欄寬度固定，中間自適應(yīng)的布局 ，三欄布局的具體實(shí)現(xiàn)：

利用浮動(dòng)和負(fù)邊距來(lái)實(shí)現(xiàn)。父級(jí)元素設(shè)置左右的 padding，三列均設(shè)置向左浮動(dòng)，中間一列放在最前面，寬度設(shè)置為父級(jí)元素的寬度，因此后面兩列都被擠到了下一行，通過(guò)設(shè)置 margin 負(fù)值將其移動(dòng)到上一行，再利用相對(duì)定位，定位到兩邊。

實(shí)現(xiàn)三欄布局的六種方式

六種布局方式總結(jié)：圣杯布局、雙飛翼布局、Flex布局、絕對(duì)定位布局、表格布局、網(wǎng)格布局。

圣杯布局是指布局從上到下分為header、container、footer，然后container部分定為三欄布局。

基礎(chǔ)HTML：

基礎(chǔ)CSS：

對(duì)于container，給它設(shè)置一個(gè) overflow: hidden 使其成為一個(gè) BFC ，使三欄浮動(dòng)，并相對(duì)定位，給左右兩個(gè)容器設(shè)置 200px 的寬度中間的容器設(shè)置 100% 的寬度。

此時(shí) left 和 right 被相對(duì)于父元素 container 寬度的 100% 的 center 擠到下面。

BFC 的作用：

步驟：

這時(shí)，圣杯布局就完成了，但是在拖到很小的時(shí)候，布局會(huì)亂，以下是最終樣式。

這種布局方式同樣分為header、container、footer。圣杯布局的缺陷在于 center 是在 container 的 padding 中的，因此寬度小的時(shí)候會(huì)出現(xiàn)混亂。

雙飛翼布局給 center 部分包裹了一個(gè) main 通過(guò)設(shè)置 margin 主動(dòng)地把頁(yè)面撐開(kāi)。

基礎(chǔ)HTML：

步驟 1 和 2 同圣杯布局

區(qū)別：

第三步：

給 main 設(shè)置 margin: 0 200px ，同時(shí)設(shè)置 overflow: hidden 使其成為一個(gè) BFC

這時(shí)窗口寬度過(guò)小時(shí)就不會(huì)出現(xiàn)混亂的情況了，關(guān)鍵點(diǎn)在于內(nèi)容部分是包裹在 main 中。

以下是最終樣式：

Flex布局是由CSS3提供的一種方便的布局方式。

基礎(chǔ)HTML：

步驟：

flex-shrink :

定義項(xiàng)目的縮小比例，默認(rèn)為1，如果空間不足則項(xiàng)目縮小，如果有一項(xiàng)為0，其他為1，當(dāng)空間不足時(shí)，前者不縮小。

可以看到，flex 布局是一種極其靈活的布局方式。

以下是最終樣式：

基礎(chǔ)HTML：

步驟：

這種方式的缺點(diǎn)是依賴于left 和 right 的高度，如果兩邊欄的高度不夠，中間的內(nèi)容區(qū)域的高度也會(huì)被壓縮。

表格布局的好處是能使三欄的高度統(tǒng)一。

基礎(chǔ)HTML：

步驟：

這種布局方式能使得三欄的高度是統(tǒng)一的，但不能使center放在最前面得到最先渲染。

網(wǎng)格布局可能是最強(qiáng)大的布局方式了，使用起來(lái)極其方便，但目前而言，兼容性并不好。網(wǎng)格布局，可以將頁(yè)面分割成多個(gè)區(qū)域，或者用來(lái)定義內(nèi)部元素的大小，位置，圖層關(guān)系。

基礎(chǔ)HTML：

步驟：

僅僅四條樣式命令就能完成三欄布局，可見(jiàn)網(wǎng)格布局之強(qiáng)大

網(wǎng)頁(yè)標(biāo)題：三欄布局zblog模板 三欄布局自定義是多少
標(biāo)題URL：http://jinyejixie.com/article24/ddogije.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、App開(kāi)發(fā)、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)