Html Checker

https://validator.w3.org/nu/

https://validator.w3.org/unicorn/?ucn_lang=zh-Hant

CSS 垂直置中的七個方法

  • 設定行高 ( line-height )
  • 添加偽元素
  • calc 動態計算
  • 使用表格或假裝表格
  • transform
  • 絕對定位
  • 使用 Flexbox

CSS z-index 層級概念與使用方法

CSS中的z-index屬性用於設置節點的堆疊順序.但同時,我們總是對堆疊順序捉摸不透,將z-index的值設得很大也未必能將節點顯示在最前面!今天Designrock分享一篇用一些例子對z-index的使用方法進行分析,並且為各位帶入z -index層級樹的概念

(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 語法。參考與圖片來源為: