iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0
Modern Web

三十哩路,我的前端學習路程系列 第 17

Day17::我所知道的 CSS重構 第四章之三

影像

圖片可以透過<img><picture>標籤來呈現。
因為<img>元素可以在行內的格式情境中使用,此外<img>元素會在大小已定的區域層級元素中顯示,為了避免影像超出其容量的範圍,可將其max-width設定成父容器(父層)的100%

在設定基底樣式時可考慮設定下列屬性:
border
max-width
vertical-align

組件樣式

可複用組件(reusable components) 是我們在其上套用樣式,讓她們具視覺隱喻,使用者可更容易地透過他們與網站互動的元素或元素組件。如按鈕(buttons)、下拉式選單(drop-down menus)、對話框(modal windows)、進度列(progress bar)與頁籤(tab)都是可複用組件。

我們很容易就可以認出這些可複用組件,但要正確地將它們做好、有時並不容易。
在製作可複用組件時,可以思考下列的問題:

  1. 要做的是獨立組件還是要有幾個組件套在一起使用?
  2. 這個組件的行為通常會向行內組件、區塊層級元素或以其他方式運作(即獨立置放在文件結構(document flow)之外)?

這兩個問題有答案後,就可以簡化製作可複用組件的流程:

  1. 在製作組件前,先定義所需的行為。
  2. 保持組件樣式粒度並設定合理的預設值。
  3. 在其周圍置放具不同類別之容器元素的方法,視需要覆寫群組物件的視覺樣式
  4. 讓結構容器為其指定大小

心得

第四章大概介紹許多常用到的標籤通常會有那些預設的樣式
最後面有提到關於物件元件化的作法,在不同的情境就會有不同的製作方法
有興趣的朋友可以翻翻看,因為範例真的很詳盡還有附圖說明...!!


上一篇
Day16::我所知道的 CSS重構 第四章之二
下一篇
Day18::我所知道的 CSS重構 第五章測試
系列文
三十哩路,我的前端學習路程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言