寫給後台人員看的前端開發指南 布局篇

2021-08-19 07:26:45 字數 1136 閱讀 4897

原文:

後台人員剛開始寫前端頁面,最最頭疼的要數頁面布局了: 

- 想讓某個元素居中,網上找了半天也沒有乙個好的方法? 

- 加個了float:left怎麼整個頁面都亂套了? 

- 怎麼讓這個元素換行,怎麼讓那個元素不換行? 

- 怎麼把這幾個div橫向排列不換行? 

- 看別人的**滿屏都是div,眼花繚亂? 

- 書了看了,網上的教程也跟著學了,為什麼等到自己要真正開始寫的時候卻寫不出來,那麼多標籤、那麼多css樣式,要用哪個? 

- …前端知識基本靠實踐和經驗,而這恰恰是經典書籍所欠缺的,書本上都是介紹基本概念,每乙個標籤、每乙個樣式的使用,而實際頁面需要多方面結合;

前端知識太靈活多變,框架一年甚至幾個月大變血一次。

理解盒子模型。width、height、margin、padding、bodder

position屬性定位

float屬性

display屬性

行內元素、塊級元素

盒模型position屬性

描述absolute

生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

fixed

生成絕對定位的元素,相對於瀏覽器視窗進行定位。元素的位置通過 「left」, 「top」, 「right」 以及 「bottom」 屬性進行規定。

relative

生成相對定位的元素,相對於其正常位置進行定位。因此,」left:20」 會向元素的 left 位置新增 20 畫素。

static

預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z-index 宣告)。

inherit

規定應該從父元素繼承 position 屬性的值。

display屬性

輕鬆布局第一條:子元素使用絕對定位

輕鬆布局第二條:行內元素與塊級元素轉換

輕鬆布局第三條:寬高從裡到外單行文字水平/垂直居中

什麼時候用float:left布局

float 可用於實現文字環繞 

善用ul/li

html/css/js書寫流暢

Magento前端開發指南 二

對傳統符號的模組和主題路徑 magento的應用元件,包括模組 主題和語言包技術可以位於任何地方的magento的根目錄下。這是指,magento預設和自定義元件。下面的相對路徑是用於模組和主題 theme dir 主題目錄。通常用在自定義主題,或任何主題一般。magento的盒子前端的主題,絕對路...

Facebook的libra幣開發指南

近期facebook擬發行的libra幣,可以說是加密貨幣界和傳統金融行業的一件大事,很多人都認為這次數字貨幣真的可能改變世界。作為程式設計師而言,怎樣搭上這班車,相信是大家都非常關心的。我覺得我們可以從開發libra幣的智慧型合約入手,將現實世界中的支付場景,尤其是跨境支付場景,在libra幣的環...

以太坊儲存Swarm的開發指南

它有兩個主要的特性使swarm有別於其他分散的分布式儲存解決方案 儘管bittorrent和zeronet等現有服務允許使用者註冊和共享它們在伺服器上的內容,但swarm提供了一種分布式雲儲存服務託管。群體上上傳的內容可以在以後檢索,所有內容都可能不需要硬碟。另乙個重要特徵是獎勵制度。激勵系統解決了...