(簡單究好) 使用 Open Graph Tags、Schema、Twitter Card

當有人在Facebook, Google+, Twitter這些社群網站平台分享您網站的內容時,這些社群網站會自動從我們的網站中抓取分享的資訊。但這些自動抓取的資訊不見得符合網站的內容,因為社群網站只能猜測哪些內容重要、哪些不重要。若是可以由我們自己決定分享的資訊,是不是可以更符合網站的內容呢?如果希望可以控制分享的資訊該怎麼做呢?這篇文章就是要教你如何利用社群分享的中繼標籤(social meta tags)來自訂分享內容的標題、圖片和說明文字。

學習 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 之外,文字也是垂直水平置中。