HTML/CSS
  • 日期：
  • 留言數：5

用 css 讓區塊水平垂直置中

有時候我們需要做個前導頁或是簡單的名片形象頁，在內容不多的情況下，可能需要讓 DIV 垂直以及水平置中；除了 DIV...
HTML/CSS
  • 日期：
  • 留言數：6

利用純 CSS3 做出自適應的 lightbox

因為工作需求，要做一個使用說明頁。但「使用說明」並非這個案子的主要需求，所以決定利用 Lightbox 取代多做一頁 HTML，但使用功能強大的 Lightbox...

display: table-cell 無法使用 margin/ padding 的解法
HTML/CSS
  • 日期：
  • 留言數：0

display: table-cell 無法使用 margin/ padding 的解法

只要是使用 HTML+DIV 排版的人，應該都很清楚table 是用來繪製表格，而非用來排版的這件事情。然而因...
Design, HTML/CSS
  • 日期：
  • 留言數：0

動手更換 Facebook 的新版面

Facebook 終於改版了！但體驗不太好，雖然塗鴉牆的圖片尺寸變大了，訊息的間距也因此變小。假設一個人每天要看的資訊流很大，或像我一樣是 FB...

利用 css 讓 ul div 置中
HTML/CSS
  • 日期：
  • 留言數：0

利用 css 讓 ul div 置中

我們常利用ul做選單、做列表、做頁碼 …等等，但會碰到一種狀況，是想讓ul置中，如果你直接寫tex...
HTML/CSS, JavaScript
  • 日期：
  • 留言數：0

使用 CSS:not 與 data-index 即時搜尋頁面

去年看了一篇文章「Client-side full-text search in CSS」可以在單一頁面即時搜...
HTML/CSS
  • 日期：
  • 留言數：1

用 data-* 屬性做出純 CSS 的 tooltip

最近因為案子需求，要做「tooltip」的功能，簡單來說，tooltip 是一種「當滑鼠移過文字時，會跳出一個...

在 wp nav menu 前後增加自定義連結
WordPress
  • 日期：
  • 留言數：0

在 wp nav menu 前後增加自定義連結

WordPress 有一個很好用的 WP_nav_menu function，可以在 WordPress 控制...
Design
  • 日期：
  • 留言數：0

用 Photoshop 做出相機圖示

今天參考了網路上的教學，用 PhotoShop 做出相機圖示。其實像這類的 icon 應該要用 Illustr...
HTML/CSS
  • 日期：
  • 留言數：0

強烈推薦收藏好物 – CSS Specificity (CSS 權重一覽)

(點上圖可開啟高清版本) CSS 權重表來自於今年的 CSS DevConf，利用漫畫「圖+文」的表現方式，清...
HTML/CSS
  • 日期：
  • 留言數：3

使用 CSS nth-child 必須要注意的事情

之前有寫過一篇 利用 :nth-child() 讓網頁展示商品時左右對齊 的文章，裏面有稍微提到:nth-ch...

WordPress 內建階層選單製作
WordPress
  • 日期：
  • 留言數：0

WordPress 內建階層選單製作

WordPress 3.0 改版後，新增的內建選單功能，算是我最愛的功能之一，做佈景的時候也常常會用到。所以決...