第十四屆 冠軍

web
防禦性 CSS - 建立「防患未然」的匠人心態
Taiming

系列文章

DAY 1

【Day01】參賽前言 & 精神喊話

參賽前言 大家好!我又來啦~~~在心裡默默下定決心,說好今年絕對死不參加,但是好死不死又因為各種難以啟齒的原因、五味雜陳的心情,所以我又來啦 XD 相信每一位參...

DAY 2

【Day02】什麼是防禦性 CSS?

在海賊王這部漫畫當中,有一個高人氣的反派角色,夏洛特·卡塔庫栗,他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...

DAY 3

【Day03】間距 - 標題與圖示

情境 今天我們來討論一個常見的設計,標題與圖示。下面這是一張很常見的卡片式設計,看起來很正常不是嗎? 我們在生活當中很常遇到類似這樣的設計,就是在一個卡片式的...

DAY 4

【Day04】間距 - 元件間的間距

間距、間距、間距! 情境 在討論今天的主題之前,我們先來看看下面這張圖: 第一張圖的情境,有可能是在介面上我們試圖要做一些不可逆的操作,例如你要去刪除某篇文章...

DAY 5

【Day05】內容長度 - 類別標籤

情境 如下圖,網站中有這樣一塊又一塊的圖形設計,稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配,因此無論...

DAY 6

【Day06】內容長度 - 過長的內容

情境 我們用下面這個垂直下拉選單來說明這個情境: 上圖示我們常見的下拉選單形式,這些選單有一些選項,例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...

DAY 7

【Day07】內容長度 - 過短的內容

情境 決定畫面的平衡有許多要考慮的因素,除了過長的內容會造成畫面破版之外,反過來,如果過短的內容是不是也會造成視覺上的不協調呢? 你能看見多遠的未來呢? 看看下...

DAY 8

【Day08】內容長度 - 固定的高度

情境 不知道大家有沒有設計過官網或是活動頁的經驗呢? 主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面,其目的是要提出一個該網站最重要...

DAY 9

【Day09】內容長度 - 固定的寬度

情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三,既然固定高度下,內容過長有可能會溢出,那換個...

DAY 10

【Day10】圖片 - 圖片比例

情境 現今科技越來越進步,手機拿起來,隨時隨地都可以拍照,記錄下生活中美好的瞬間。 並且,我們一天到晚在瀏覽網站,我們將越來越少看間一個網站是完全沒有圖片的。因...