一文讀懂頁面布局

時(shí)間：2023-09-09 07:12:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-09 07:12:02 來源：網(wǎng)站運(yùn)營

一文讀懂頁面布局：

一. 前端布局

談到瀏覽器頁面，我們肯定是希望頁面越美觀越好，這樣才能吸引用戶點(diǎn)擊。頁面美觀就自然需要用到各種布局，好的布局不僅能提高用戶體驗(yàn)感留住用戶，還能提高維護(hù)的效率。本文就列舉一下常用的前端布局，并配上視頻進(jìn)行講解。

1. 固定布局

給頁面元素設(shè)置固定的寬度和高度。不管屏幕分辨率如何變化，看到的都是固定寬度的內(nèi)容。優(yōu)點(diǎn)：設(shè)計(jì)簡(jiǎn)單，瀏覽器支持率高。缺點(diǎn)：用戶體驗(yàn)感不好，對(duì)于不同尺寸屏幕的兼容性不好。

2. 流式布局

流動(dòng)網(wǎng)頁布局，也稱為流體網(wǎng)頁布局，其實(shí)現(xiàn)方法則是大多數(shù)組件都設(shè)成百分比寬度，并且根據(jù)用戶的屏幕分辨率自適應(yīng)。

3. 彈性布局

當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞?。能夠根?jù)屏幕大小自適應(yīng)，且文字大小會(huì)改變。

4. 自適應(yīng)布局

通過檢測(cè)視口分辨率，來判斷當(dāng)前訪問的設(shè)備是：pc端、平板、手機(jī)，從而請(qǐng)求服務(wù)層，返回不同的頁面。缺點(diǎn)：需要為每個(gè)設(shè)備寫一個(gè)媒體查詢。對(duì)于未知的寬度不能自適應(yīng)。

5. 響應(yīng)式布局

響應(yīng)式布局 = 自適應(yīng)布局 + 流式布局。理解為自適應(yīng)布局的精細(xì)版本。缺點(diǎn)：要匹配足夠多的屏幕大小，工作量大，設(shè)計(jì)也需要多個(gè)版本。



上面介紹的都是需要了解前端，需要學(xué)習(xí)HTML，CSS等計(jì)算機(jī)語言，上手門檻比較高，那對(duì)于懂業(yè)務(wù)、有需求的計(jì)算機(jī)小白來說，可以使用SuccAP低代碼平臺(tái)，點(diǎn)擊下方鏈接免費(fèi)使用，通過易用的、可視化的操作的方式快速的搭建業(yè)務(wù)應(yīng)用。下面簡(jiǎn)單給大家介紹一下低代碼的布局。

二. 低代碼頁面搭建布局

低代碼的布局非常簡(jiǎn)單，只需三步，引入數(shù)據(jù)——選擇組件——調(diào)整布局。
無論是存儲(chǔ)在數(shù)據(jù)庫的數(shù)據(jù)，還是excel、csv等格式的數(shù)據(jù)，都可以快速上傳到系統(tǒng)中。左側(cè)的組件欄內(nèi)置了豐富的組件，直接拖拽到面板上。
在頁面上可以調(diào)整畫布的布局，寬高都可以用可視化的方式，設(shè)置為像素、百分比和自適應(yīng)，做出固定布局、流式布局等前端頁面效果。



組件也可以調(diào)整，有絕對(duì)位置、相對(duì)位置和撐滿父容器，通過畫布的布局和容器嵌套，可以快速制作出這樣的網(wǎng)站式頁面。



文檔的介紹總是有限的，我們把低代碼布局錄制成了系列課程，從原理介紹-->經(jīng)典布局-->案例解析，布局的組件屬性都有詳細(xì)的解釋，學(xué)完基本能搞定大部分的復(fù)雜頁面，快來一起動(dòng)手操作吧。




相比于傳統(tǒng)的前端代碼頁面，低代碼布局全程可視化操作，簡(jiǎn)單易學(xué)。SuccAP是模型驅(qū)動(dòng)類的低代碼產(chǎn)品，通過多種可視化“建模”工具快速搭建業(yè)務(wù)系統(tǒng)，SuccAP通過多種工具配合使用，可以搭建復(fù)雜的、個(gè)性化的業(yè)務(wù)應(yīng)用。



希望以上內(nèi)容對(duì)大家有所幫助，文末我們還鏈接了幾篇相關(guān)文檔，歡迎大家來嘗試搭建自己的頁面，也歡迎大家留言討論。

(2條消息) 一文讀懂低代碼，低代碼實(shí)施方法論助你快速搭建系統(tǒng)_山川軟件的博客-CSDN博客
(2條消息) 低代碼之搭建個(gè)性化頁面【SuperPage介紹】_山川軟件的博客-CSDN博客

更多精彩

官網(wǎng)：山川軟件

示例DEMO地址：https://demo.succbi.com/

產(chǎn)品文檔地址：SuccBI產(chǎn)品文檔 | 山川軟件產(chǎn)品文檔

DEMO體驗(yàn)版下載地址：4.20.x版本發(fā)行日志 | 山川軟件產(chǎn)品文檔

B站視頻地址：SuccBI的個(gè)人空間-SuccBI個(gè)人主頁-嗶哩嗶哩視頻

CSDN：山川軟件的博客_CSDN博客-領(lǐng)域博主