CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局

CarlBenjamin 發(fā)布于2019-08-28 17:51 / 3474人閱讀

摘要：左右結(jié)構(gòu)，左邊右邊寬度固定代碼代碼左右結(jié)構(gòu)，左邊固定，右邊代碼代碼左中右結(jié)構(gòu)，左邊固定，右邊固定，中間代碼代碼這里是左邊這里是中間這里是右邊

1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定

css代碼：

HTML代碼:

2.左右結(jié)構(gòu)，左邊固定，右邊100%

css代碼:

HTML代碼:

3.左中右結(jié)構(gòu)，左邊固定，右邊固定，中間100%

css代碼:

HTML代碼:



    這里是左邊
    
        這里是中間
    
    這里是右邊

云服務(wù)器 GPU云服務(wù)器基礎(chǔ)篇之基礎(chǔ)篇 css布局 java語(yǔ)言程序設(shè)計(jì)基礎(chǔ)篇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110828.html

相關(guān)文章

CSS基礎(chǔ)篇--頁(yè)面實(shí)現(xiàn)兩列布局，一列固定寬度，一列寬度自適應(yīng)方法

摘要：不管是左是右，反正就是一邊寬度固定，一邊寬度自適應(yīng)。博客園的很多主題也是這樣設(shè)計(jì)的，我的博客園博客也是右側(cè)固定寬度，左側(cè)自適應(yīng)屏幕的布局方式。與配合使用首先我們調(diào)整一下結(jié)構(gòu)自適應(yīng)區(qū)固定寬度區(qū)代碼這樣實(shí)現(xiàn)，的實(shí)際寬度就是屏幕寬度。我在前面有一篇文章《CSS基礎(chǔ)篇--可擴(kuò)展性的頁(yè)面布局》中介紹了如下三種布局方式：1.左右結(jié)構(gòu)，左邊100%；右邊寬度固定2.左右結(jié)構(gòu)，左邊固定，右邊100%...

RichardXG 2019-08-28 17:51 評(píng)論0 收藏0
CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。前言 CSS代碼難維護(hù)眾所皆知。為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)；作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...

newtrek 2019-08-28 18:21 評(píng)論0 收藏0
CSS學(xué)習(xí)筆記(十六) CSS最佳實(shí)踐之可維護(hù)性篇

摘要：國(guó)內(nèi)各大公司都已經(jīng)投入使用，在一些常見(jiàn)的網(wǎng)站，如淘寶騰訊小米等移動(dòng)站點(diǎn)，隨處可見(jiàn)其蹤影。變革之騰訊手機(jī)淘寶的設(shè)計(jì)與實(shí)現(xiàn)前端亂燉適配總結(jié)樣式重置上文已提及，這里推薦閱讀同學(xué)寫的專題文章。前言 CSS代碼難維護(hù)眾所皆知。為一個(gè)元素設(shè)置樣式的方式可以通過(guò)定義的class、定義的id、元素的標(biāo)簽名、元素的屬性等選擇器以及這些選擇器的組合來(lái)實(shí)現(xiàn)；作用于某個(gè)元素上的樣式又可能來(lái)自單個(gè)樣式規(guī)...

keke 2019-08-01 14:55 評(píng)論0 收藏0
前端每周清單半年盤點(diǎn)之 CSS 篇

摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為新聞熱點(diǎn)、開(kāi)發(fā)教程、工程實(shí)踐、深度閱讀、開(kāi)源項(xiàng)目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(hào)（ID：f...

RaoMeng 2019-08-29 13:21 評(píng)論0 收藏0
[譯]148個(gè)資源讓你成為CSS專家

摘要：層疊樣式表二修訂版這是對(duì)作出的官方說(shuō)明。速查表兩份表來(lái)自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來(lái)自的基礎(chǔ)參考指南簡(jiǎn)寫速查表簡(jiǎn)寫形式參考書(shū)使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

impig33 2019-08-29 11:10 評(píng)論0 收藏0