■ 類別: HTML/CSS

語法 | 用 Jsfiddle 分享 CSS3 button hover 效果

March.23, 2012 (Friday)
語法 | 用 Jsfiddle 分享 CSS3 button hover 效果
很久以前就知道 Jsfiddle 這個網站，當時只覺得他是用來分享一些打好的語法，想要隨時傳給別人看。雖然很便利，但一時之間我也不知道要拿它做甚麼。 直到最近才發現原來它可以內嵌到blog跟大家分享效果阿:D，哈哈，我真的很落伍，這個網站推出也好一陣子了，居然最近才知道他可以分享。 因此我也手癢起來，想利用 Jsfiddle跟大家分享一些語法，然後把它貼到我的blog，因此就簡單寫了幾個css3 的按鈕變換效果。 真的是非常......繼續閱讀 »

語法 | HTML5 DOCTYPE 及標籤簡化寫法

February.20, 2012 (Monday)
語法 | HTML5 DOCTYPE 及標籤簡化寫法
從嚴謹的XHTML，開始慢慢進化到較寬容的HTML5，說不上是好是壞。但對我來說，真有些不習慣。以往看到不嚴謹的語法，都會偷偷在心裡唾棄這些code，沒想到現在我自己也要朝著不嚴謹之路邁進。 好吧，應該說是，朝著簡化之路邁進(這樣比較好聽)。 那麼以下跟大家簡單介紹幾個HTML5的簡化寫法，相信習慣用XHTML的朋友，第一瞬間應該會跟我一樣訝異吧:P 1. !DOCTYPE 宣告 XHTML有三種宣告方式，我一直都是採用最嚴謹的 strict: ......繼續閱讀 »

語法 | 幾種用圖片代替文字的方法

February.19, 2012 (Sunday)
語法 | 幾種用圖片代替文字的方法
設計部落格不像設計網站一般容易，我認為主要原因是部落格不會開放 source code (例如HTML) 給使用者修改，所以要設計部落格，只能從官方發佈的模板下手，然後去更改CSS。 通常設計部落格的第一步，一定都會想把自己的部落格標題用圖片裝飾的漂漂亮亮，而不是用部落格預設的制式文字。但如同前面所提到，一般要用圖片就是在HTML裡寫下插入圖片的語法，可是部落格不開放修改HTML，我們所能使用的方法是，隱藏這些制式文字，用......繼續閱讀 »

教學 | 用Compass取代CSS，寫個html專案

October.05, 2011 (Wednesday)
教學 | 用Compass取代CSS，寫個html專案
老實說，我一直很排斥blueprint, sass, compass這種非CSS正統格式的快速工具。擁護者常會說他們很快速、方便，而且可以幫你把hack全部處理完，還可以有效簡化流程balabala一堆，但對我來說，我還是喜歡自己慢慢刻的那種成就感，而且Compass所產生出來的css讓我覺得非常的髒，註解一堆，也不是按照我所愛的編排習慣。 但，我還是開始碰觸Compass了...。大概有10%原因是受到這張比較圖的影響▼ 甚麼!!Compass居然自居是武裝過......繼續閱讀 »

教學 | 深入CSS之line-height應用

September.01, 2010 (Wednesday)
教學 | 深入CSS之line-height應用
前幾天改版後，發現留言的版面，頭像上面的樓層顯示出了點問題，在IE6、IE7底下看，會發現文字被截掉(如下圖)。 文字會被截斷 後來詢問CSS達人：風痕影以及SR之後，發現只要設置line-height，問題就會解決。 於是當下我對line-height產生了興趣，想知道為什麼要這麼設定才可以解決字被截斷的困擾，因此上網搜尋了一下，查到了幾篇文章。 在ISD webteam這裡有一篇翻譯過後的文章：深入CSS行高，雖然標題打「深入」二字，但其......繼續閱讀 »

語法 | 用css讓區塊水平垂直置中

June.01, 2010 (Tuesday)
語法 | 用css讓區塊水平垂直置中
有時候我們想要做個簡單的首頁(有人稱前導頁、形象頁...等)，或是購物車平台要做圖片展示，會運用到水平+垂直置中的技巧。以前都是直接用text-align:center以及vertical-align:middle兩行解決。 但使用這個語法，有時成功、有時又會失效，在不太清楚原因的情況下，我改用了其他方法實現我想要的區塊水平垂直置中，在這邊也整理出來分享給大家，希望對你們有所幫助:) 首先先看範例： 首頁、前導頁、形象頁，區塊水平垂直置中......繼續閱讀 »

「親手打造部落格的家：WordPress架站、管理、經營」二刷訊息 & bug修正

March.26, 2010 (Friday)
「親手打造部落格的家：WordPress架站、管理、經營」二刷訊息 & bug修正
親手打造部落格的家：WordPress架站、管理、經營 剛剛收到消息說，我寫的這本書要二刷了!!! 不過可能是因為換了新工作，一直處在早起晃神的狀態，所以一開始收到這個訊息還蠻平淡的。直到過了幾分鐘才慢慢有種興奮的感覺，哇塞，二刷耶，好屌唷!!!! 然後這個月也要開始在大陸發行這本書了，真的很期待吶。 但是.... 這邊要跟大家致上深深的歉意，因為我只是個超小咖的作者，所以當我收到要二刷的訊息時，書已經在印製了。 ......繼續閱讀 »

「親手打造部落格的家：WordPress架站、管理、經營」上市囉

February.09, 2010 (Tuesday)
「親手打造部落格的家：WordPress架站、管理、經營」上市囉
親手打造部落格的家：WordPress架站、管理、經營 2010年2月2日，我寫的書正式上市囉。 各大通路販售地點 目前已知可在以下地點購買(香港也買得到囉!!!)： 【網路書店】 1. 博客來書籍館(9折)： http://www.books.com.tw/exep/prod/booksfile.php?item=0010460373 2. 松崗購物網(85折)： http://www.kingsinfo.com.tw/item_detail.asp?pro_id=7406 3. 金石堂網路書店(79折)： http://www.kingstone.com.tw/book/book_page.asp......繼續閱讀 »

分享 | 我的reset.css是這麼寫的

February.05, 2010 (Friday)
分享 | 我的reset.css是這麼寫的
今天aj問我，要怎麼製作reset.css？ 我才想到原來我一直沒有釋出reset.css的檔案給大家，文章只有兩篇相關介紹文而已。 所以我決定把我自己在使用的reset.css分享給大家，順便簡單說明我是怎麼設定的 想使用的朋友，直接抓取以下的css語法即可。 reset.css 語法 body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, button,textarea, p, blockquote, th, td { margin: 0; padding: 0; } img {border: 0;} :focu......繼續閱讀 »

出書 | 親手打造部落格的家 WordPress架站管理經營

January.12, 2010 (Tuesday)
出書 | 親手打造部落格的家 WordPress架站管理經營
親手打造部落格的家 WordPress架站、管理、經營 從去年9月開始寫的WordPress書籍，終於要在今年年初問世了。 因為是第一次寫書，也怕可能寫到最後被腰斬、或是寫不好不出版的情況下，我一直都很低調，默默進行我的寫書活動，也因此知道我要出書的朋友們並不多。直到確定送印了，連封面都出來了，我才敢開始大肆宣揚 1/29新增公告：上市日期確定啦!!!! 1/18新增公告：本書的促銷活動 1/13新增：本書的作者陣容 1/13新增......繼續閱讀 »
Page 1 of 41234»