CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 2, Day 8

流 當我們定義好一個 flex 的容器時,昨天有說過了,預設會使用 row 這個設定來定義容器的流向。所以,在容器定義好的當下,我們把基本的容器設定展開來看,另外,我們賦予他 wrap 的設定,避免當中的元件被切掉, .flexbox { display: flex; flex-direction: row; flex-wrap: wrap; /* 以上等同於 */ /* flex-flow: row wrap; */ width: 100%; } 關於容器內容的流向、邊界、對齊等等,我們可以簡單的說明如下,

  • Hina Chen
    Hina Chen
5 min read
CSS

[12th 鐵人賽] Flexbox 的使用姿勢 Part 1, Day 7

簡單介紹 雖然說 Flexbox 已經推出好一段時間了,但說實在話我自己好像沒有特別著墨。當然,我覺得如果可以的話,去看一下 Amos 的課程,一定比看我在這邊講幹話來得實際! 首先,我們先理解一下 flex 的作法, .flexbox { display: flex; } 首先是把一個 DOM 元件定義成 flex,這樣接下來的設計才會生效。這個 flex 元件預設會使用 row 這個維度來顯示資料。換句話說,你若什麼都不寫的話,他的 flex-flow 預設就會是

  • Hina Chen
    Hina Chen
7 min read
CSS

[12th 鐵人賽] 從內容開始看格線系統 Day 5

內容為王 如果以現在的趨勢來看,應該叫「廣告為王」。 當然我不會設計,所以也就不會設計廣告。網站主要的目的,是要傳達內容,所以關於文件流、斷點、區塊設計這些事情,在整個版面上才會這麼重要。至於你說那些內容農場,基本上都屬於廣告為王的範疇,我就不討論了。如果對於文件設計很有經驗的人,基本上可以跳過這一天沒有關係。 那麼,由於設計我不會,那這邊還是有幾件事情可以跟各位前端工程師分享。主要的前置作業,我們還是會回到前幾天所說的,與 viewport, @media 跟基本格線系統有關。 viewport 能不能改? @media 怎麼設計? 那個 rem 單位設計。

  • Hina Chen
    Hina Chen
10 min read
2020

[12th 鐵人賽] 我是誰,我在哪裡 Day 3

回到未來 網頁在很久很久以前,是使用 HTML 來製作的,約莫過了 20 幾個年頭,現在的網頁還是 HTML 製作的。只是版本號的推演進度比較慢,目前來到 HTML5,約莫也有 6 年的發展痕跡。 胡說!網頁明明就是 FrontPage 製作的。 工具的大鳴大放大概真的是從 FrontPage 開始,然後 Dreamwaver,然後 Photoshop 也可以匯出,到現在 Sketch 的外掛工具也能幫你做好這些事情。不過,

  • Hina Chen
    Hina Chen
10 min read
ITHome

[12th 鐵人賽] 那個網頁設計 Day 2

網頁有什麼 粗略上來看,目前市面上瀏覽器打開的那個「畫面」,就屬於我們俗稱的「網頁」或是「網站」。而且不難發現每次去到各種網站,最常見的大概就是廣告。上方廣告橫幅、下方廣告橫幅、蓋版廣告、文章內容背景捲動廣告、看影片先看 10 秒廣告、Download 本身是廣告(下載按鈕在下面用小字)、點站外連結先幫你檢查(看)是(一)否(下)是(聯)惡(播)意(網)連(

  • Hina Chen
    Hina Chen
6 min read
ITHome

[12th 鐵人賽] 我說那個手機版 Day 1

說在最前面 網頁這種萬年老埂應該是沒什麼人會看,會想要撰寫這種偏冷門的東西,純粹是個人比較邊緣的關係。目前市面上各種關於網頁製作、切版的工具五花八門,真的會想手動自己來的應該屬於抖 M 屬性(吧)。總之,如果對於網頁製作有興趣,或者是想看看到底在做些什麼東西的人,可以繼續看下去。 至於是不是要看滿 30 天,如果我寫得完的話應該可以考慮按一下追蹤之類的。 大概會說些什麼 網頁「設計」在「設計」什麼? 給「人類」看的,給「機器」看的有什麼差別? 區塊、內文、文件流要流去哪裡?

  • Hina Chen
    Hina Chen
2 min read
口罩

口罩地圖記錄

因應武漢肺炎(NCP,2019 新型冠狀病毒)造成的口罩之亂,原本由便利商店販售的動作,改由政府接手,這件事情確實在 g0v 上面發酵,然後我只是跟風而已。 起源 其實在 Facebook 看到這個訊息,覺得這應該是很多工程師的肝換來的!政府方面也透過唐鳳的協助,在短短 3 天內,提供了全台健保藥局加上衛生所的開放資料 API(神!),目前在 g0v 上面還是有公開筆記可以查閱。 https://g0v.hackmd.io/gGrOI4_aTsmpoMfLP1OU4A?fbclid=

  • Hina Chen
    Hina Chen
3 min read