【靜態(tài)頁面架構(gòu)】HTML之布局

imtianx 發(fā)布于2019-08-02 11:21 / 3329人閱讀

摘要：一布局水平居中第一種居中方式以屬性設(shè)置父級元素和設(shè)置行內(nèi)塊級元素將屬性設(shè)置父級元素設(shè)置文本內(nèi)容水平方向居中設(shè)置行內(nèi)塊級元素愛新覺羅呼延覺羅第二種居中方式以設(shè)置塊級元素和外邊距特性來設(shè)置外邊距實現(xiàn)水

一.布局； 1.水平居中 第一種居中方式；

以text-align屬性設(shè)置父級元素和設(shè)置行內(nèi)塊級元素





    愛新覺羅

呼延覺羅

第二種居中方式；

以設(shè)置塊級元素和外邊距特性來設(shè)置

 



    愛新覺羅

愛新覺羅

第三種居中方式；

以設(shè)置絕對定位和trannsform屬性值來實現(xiàn)居中





    愛新覺羅
    

愛新覺羅

第四種居中方式；

以設(shè)置相對定位和trannsform屬性值(translateX)

 



    愛新覺羅
    

愛新覺羅

2.垂直居中； 第一種居中方式；

以設(shè)置父級元素為單元格，垂直方向居中





    愛新覺羅
    

愛新覺羅

第二種居中方式；

以設(shè)置子級相對定位和transform屬性值(translateY)





    愛新覺羅
    

愛新覺羅

第三種居中方式；

以設(shè)置子級元素相對定位和transform屬性值(translateY)

 



    愛新覺羅
    

愛新覺羅

3.居中布局； 第一種居中布局；

以設(shè)置父級相對定位和子級絕對定位；transform屬性值translate;

第二種居中布局；

以設(shè)置父級單元格和外邊距特性

4.兩列布局； 第一種兩列布局；

設(shè)置左浮動和外左邊距




這是作為左邊的定寬

第二種兩列布局；

以設(shè)置左浮動和開啟BFC模式來設(shè)置

 


這是作為左邊的定寬

第三種兩列布局；

以右浮動和外左邊距來設(shè)置




這是作為左邊的定寬

第四種兩列布局；

以設(shè)置父級為display屬性值(table)





    這是作為左邊的定寬

云服務(wù)器 GPU云服務(wù)器 html頁面布局 html塊頁面布局 html頁面布局命令 html5頁面布局

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

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

相關(guān)文章

【靜態(tài)頁面架構(gòu)】CSS之表格

摘要：架構(gòu)表格元素表格的基本結(jié)構(gòu)以元素建立表格元素是表格行，元素是表示表格單元格表格以行和列表示容器元素屬性默認的表格和單元格都有邊框表格默認是有寬度的單元格之和決定元素表示表格中的單元格單元格默認寬度由內(nèi)容決定姓名年齡職業(yè)桐人 CSS架構(gòu) 表格: 1.元素: 表格的基本結(jié)構(gòu)；以table元素建立表格tr元素是表格行，td元素是表示表格單元格 ...

instein 2019-08-29 16:32 評論0 收藏0
webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

dinfer 2019-07-01 12:21 評論0 收藏0
webpack多頁應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開發(fā)模式下夾縫生存

摘要：回到純靜態(tài)頁面開發(fā)階段，讓頁面不需要后端渲染也能跑起來。改造開始本文著重介紹如何將靜態(tài)頁面改造成后端渲染需要的模板?？偨Y(jié)在后端渲染的項目里使用多頁應(yīng)用架構(gòu)是絕對可行的，可不要給老頑固們嚇唬得又回到傳統(tǒng)前端架構(gòu)了。本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/119000000820338...

dingda 2019-08-20 13:57 評論0 收藏0
webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng)

摘要：原文地址如果您對本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁頁面模板我們基本上已經(jīng)搞清楚如何利用來生成普通網(wǎng)頁頁面模板，本文將以我的腳手架項目介紹如何在這基礎(chǔ)上搭建一套簡單的模板布局系統(tǒng)。本文首發(fā)于Array_Huang的技術(shù)博客——實用至上，非經(jīng)作者同意，請勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007...

yedf 2019-08-20 11:36 評論0 收藏0
設(shè)計架構(gòu)

摘要：先來看一張系統(tǒng)前后端架構(gòu)模型圖。一種接口的約定本文用于定義一種統(tǒng)一的接口設(shè)計方案，希望具有參考價值。，和都是常見的軟件架構(gòu)設(shè)計模式，它通過分離關(guān)注點來改進代碼的組織方式。如何無痛降低 if else 面條代碼復(fù)雜度相信不少同學(xué)在維護老項目時，都遇到過在深深的 if else 之間糾纏的業(yè)務(wù)邏輯。面對這樣的一團亂麻，簡單粗暴地繼續(xù)增量修改常常只會讓復(fù)雜度越來越高，可讀性越來越差，有沒...

graf 2019-06-24 17:56 評論0 收藏0