學習 Flexbox 版面配置

Flexbox 是 CSS3 裡一個比較特殊的版面設計模式。最初被設計出來的主要原因是為了提供更有效率的方式來完成傳統 CSS 無法輕易達成的效果 (例如垂直置中)。 Flexbox 適用於小區塊的版面使用,因此,整體版面結構還是建議用傳統的 Grid 模式做調整。本文將簡介目前最新標準的 Flexbox 語法。參考與圖片來源為:

適應性設計與表格

01. 原始的表格:不做任何 CSS 設定,是一個 100% 寬度的 <table>

02. 隱藏部分項目:於不同寬度的螢幕隱藏一些非必要的 <th>、<td>欄位

03. 水平 Scroll Table:於某解析度以下螢幕將 thead 換至左方且右方的 tbody tr 以水平方式排列並可 Scroll

04. 破壞 Table 排版:直接將 thead 拿掉而剩下的 tbody tr td 都使用 display:block 排版

05. CSS 製作 Div Table:拒絕使用 <table> 改用 CSS 搭配 DIV 呈現出 table style

(梅問題) CSS3 滿版背景圖

國內外有些時尚型的網站,為了完美的呈現出視覺的張力,則會採用全螢幕的表現手法,因此最常使用Flash來作呈現,但礙於智慧型手機不支援Flash的緣故,也開始陸續的改採用Html的方式,且透過javascript就可達到此效果,同時網路上也有不少相關的外掛元件,但若只是要全螢幕背景, 只要利用CSS3,就可輕易的完成,雖然CSS2也可辦到,但縮放視窗大小時,全螢幕背景則不會跟著一起縮放,因此透過CSS3提供的新屬性後,就可輕易的製作出,自動縮放全螢幕的背景,真是超方便的,但唯一最大的問題, 則是IE的部分,需要IE9以上版本才有支援,至於Chrome、Firefox、Safari、Oprea皆可正常顯示。

漫談 RWD 佈局 - 關於 960px

網格佈局的關鍵在於利用直欄切割網頁內容,然後將網頁內容分類配置直欄中,早期主流裝置還是Windows電腦的年代,有一段不算短的時間,網格佈局不約而同的採用960px作為固定寬度尺寸,並以 12列直欄進行設計。

(Muki) 用 css 讓區塊水平垂直置中

有時候我們需要做個前導頁或是簡單的名片形象頁,在內容不多的情況下,可能需要讓 DIV 垂直以及水平置中;除了 DIV 外,甚至連文字也需要垂直與水平置中。

就如同下圖範例,這是一個很簡單的名片形象頁,深灰色底是一個 DIV。可以看到除了 DIV 之外,文字也是垂直水平置中。

(Muki) 使用 sass 有效控管 z-index 圖層順序

z-index可以讓多個圖層互相重疊,這件事情已經不稀奇了。但假設今天碰到複雜的版面,需要很多個z-index圖層,通常我們會用99,100,101,9999… 這種無限上綱的的寫法。

但其實,這不是一種好的寫法,因為寫到最後你會不知道現在寫到哪個數字?如果是多人寫一份網站,維護也很不容易,說不定最後為了省麻煩,會 99999 不知道 9 到幾位數去 OTL…。為了解決這個問題,我們可以使用 SASS 幫我們有效管理z-index喲!