昨天才發了一篇快速寫好css的5種方法，第一點開宗明義提到要使用css重置表(reset.css)，我在翻譯的時候有在後頭特別註明一下reset.css的觀念。老實說，本來想點到為止，但是今天卻偶然讓我發現內地的朋友寫了一篇「打造自己的reset.css」，不知是巧合還是註定？總之就把這篇分享給大家閱覽吧。 我覺得這篇文章寫的還不錯，但是裡頭很多元素平常人是不會去接觸的，所以在此我簡單解釋一下幾個html標籤、屬性的應用。 1. <......繼續閱讀 »

這次翻譯自NETTUTS的文章，作者為Trevor Davis。其實他點出的這五點不能說是寫css的一種捷徑，但我認為就初學者而言，確實可以培養這種不錯的撰寫習慣。畢竟css的語法是死的，所以大家能推出的觀點就是針對撰寫習慣而言。當然以下五點都是很多css designer知道的事情，只是在於你要不要去實踐罷了。 原文出處： @ 5 Ways to Instantly Write Better CSS / Trevor Davis 譯者： @ muki / MUKI space* 1.CSS重置 Photo by red......繼續閱讀 »

縮寫css語法不但可以減少css檔案的大小，讓讀取速度加快，同時也更方便閱讀。會想寫這篇文章是基於前篇介紹CSS整形與優化工具的關係，怕大家優化後也不清楚到底有什麼更動？或者是怕css出問題而不敢優化，所以在這邊我整理了幾個基本的css縮寫給大家，希望以後大家在寫css時能更瞭解他的原理。 CSS語法縮寫 - 顏色 使用16進制的色碼，假設這6個數字裡頭每2個數字相同，就可以進行縮寫。舉例如下： #000000 → #000 #880000 →......繼續閱讀 »

如果我們尚未培養良好的css撰寫習慣，常常會將一段簡單扼要的語法拖得落落長，除了視覺上不美觀外，也會讓檔案大了些增加讀取速度。因此現在有許多人都在致力開發CSS的優化，以期讓閱讀更加清晰，讀取更加快速。 今天要介紹的這款優化工具叫做CSSTidy，他全程使用php撰寫，原始碼也完全公開，方便大家將此程式架設在自己的主機上。架設方法非常簡單，也不需要新增資料庫，只要將你下載的檔案上傳到新建的目錄底下，執行css_......繼續閱讀 »

這是剛剛找資料的時候發現的css圓角5種效果 這5種完全沒有用到圖片，純粹是用css，配合1px的像素堆疊達成效果 我把這五種代碼貼回家，並且把效果釋放出來給大家觀賞，有興趣的人可以繼續往下看。 @ 文章出處 / 用CSS實現圓角框框 我也把代碼貼到自己的網誌，有需要的人，可以從我這邊拷貝回家，也可以從那篇文章拷貝代碼。 簡潔型css圓角矩形： .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}......繼續閱讀 »

這篇是之前發在pixnet的舊文章了 剛好最近有需要所以一直在翻找，想說大家可能也會有這方面的需求 所以我就重新發上來XD! 使用愉快(笑 相信我，使用IE6的人在世界上應該還是占大多數。 不過火狐的標準瀏覽器也開始嶄露頭角了 另外，IE7悄悄的蔓延整個地球 所以.....css就碰到困擾了，調了這個錯那個，改了那個卡這個，光是想到就一個頭兩個大.... 到底要怎麼做才可以讓三個瀏覽器都乖乖的聽話呢(?) 這邊給大家一個小撇步......繼續閱讀 »

今天花了一點時間改個版面 其實也只有把外觀換了一下，內頁仍然不變(懶?) 因為我現在使用的瀏覽器是opera，加上我又有灌firefox、google瀏覽器，以及內建的ie6.0，在排版上面真的搞了一陣子orz。 本家是用opera，當然是以他為主，不過他跟FF的差異也沒太大， google瀏覽器也許是依據W3C，我看了也沒太大問題，唯一怪異的地方就是文字太小。 已經設定11px號字體，用google瀏覽器看到的字卻很奇怪(如圖) 使用google瀏覽器看到......繼續閱讀 »

簡單來說，就是把你放在部落格的mybloglog裡頭「View Reader Community、Join this Community、(provided by MyBlogLog)」這三行字給刪除 圖片解說： 有興趣的人請繼續閱讀吧 語法很簡單，只有短短三行 請將下面的這三行css放置在你自己的css檔案裡頭，然後上傳→重新整理 你就會發現字樣都沒囉Q .mbl_fo_hidden{display:none;} .mbl_join_img{display:none;} #tr0{display:none;} 當然..還是不推薦大家這樣做XD!!! 畢竟......繼續閱讀 »

首先來看一下變化的效果吧 這個是專門給使用pixnet的網友們做的css語法，就是後台的「誰來我家」功能 需要的人請自行取用 語法部分，請對照標籤覆蓋，如果沒有此標籤就直接新增即可 #links .box-text a { display: block; width: 100%; } #visitor .box-text li { float: left; } #visitor .box-text li a { width: 30px; height: 30px; border: 0px; background: url("http://img443.imageshack.us/img443/3905/viseo8.g......繼續閱讀 »