響應式選單大集合1

A ton of CSS, jQuery, and JavaScript responsive navigation examples, demos, and tutorials from all over the web.

(OXXO) meta 標籤與資料結構化之SEO

SEO 最重要的第一項重點就是 meta 標籤,這也是要告訴搜尋引擎和社群網站,你的 blog 或是網站主旨是什麼,作者是誰,分享的縮圖是什麼...等這些我們認為理所當然的資訊,畢竟這些搜尋引擎的蜘蛛和社群網站的人工智慧,現在還無法分辨你我網站內容的重點,因此我們必須靠這些 meta 或結構化資料 itemprop,來告訴它們。

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

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

學習 Flexbox 版面配置

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