css語法.筆記
2009年04月29日
有時候換了一個版面,常常會發現部落格的側邊欄「噗通」地掉下去,這應該是許多 blogger都會碰到的問題。甚至有時候在火狐及其他瀏覽器觀看正常,偏偏到IE就掛點,此種情況應該會讓每個人恨得牙癢癢的吧。
如果你碰到了這些問題,先別急著求助別人,建議使用以下方式測試看看,也許你自己也可以修復「側邊欄掉下去」的問題唷
用每個瀏覽器看,側邊欄都掉下去了
狀況1:側邊欄會掉下去的主要原因就是寬度的設置,不管是你內......繼續閱讀 »
2009年03月04日
昨天才發了一篇快速寫好css的5種方法,第一點開宗明義提到要使用css重置表(reset.css),我在翻譯的時候有在後頭特別註明一下reset.css的觀念。老實說,本來想點到為止,但是今天卻偶然讓我發現內地的朋友寫了一篇「打造自己的reset.css」,不知是巧合還是註定?總之就把這篇分享給大家閱覽吧。
我覺得這篇文章寫的還不錯,但是裡頭很多元素平常人是不會去接觸的,所以在此我簡單解釋一下幾個html標籤、屬性的應用。
1. <......繼續閱讀 »
2009年03月03日
這次翻譯自NETTUTS的文章,作者為Trevor Davis。其實他點出的這五點不能說是寫css的一種捷徑,但我認為就初學者而言,確實可以培養這種不錯的撰寫習慣。畢竟css的語法是死的,所以大家能推出的觀點就是針對撰寫習慣而言。當然以下五點都是很多css designer知道的事情,只是在於你要不要去實踐罷了。
原文出處:
@ 5 Ways to Instantly Write Better CSS / Trevor Davis
譯者:
@ muki / MUKI space*
1.CSS重置
Photo by red......繼續閱讀 »
2009年02月03日
縮寫css語法不但可以減少css檔案的大小,讓讀取速度加快,同時也更方便閱讀。會想寫這篇文章是基於前篇介紹CSS整形與優化工具的關係,怕大家優化後也不清楚到底有什麼更動?或者是怕css出問題而不敢優化,所以在這邊我整理了幾個基本的css縮寫給大家,希望以後大家在寫css時能更瞭解他的原理。
CSS語法縮寫 - 顏色
使用16進制的色碼,假設這6個數字裡頭每2個數字相同,就可以進行縮寫。舉例如下:
#000000 → #000
#880000 →......繼續閱讀 »
2009年02月03日
如果我們尚未培養良好的css撰寫習慣,常常會將一段簡單扼要的語法拖得落落長,除了視覺上不美觀外,也會讓檔案大了些增加讀取速度。因此現在有許多人都在致力開發CSS的優化,以期讓閱讀更加清晰,讀取更加快速。
今天要介紹的這款優化工具叫做CSSTidy,他全程使用php撰寫,原始碼也完全公開,方便大家將此程式架設在自己的主機上。架設方法非常簡單,也不需要新增資料庫,只要將你下載的檔案上傳到新建的目錄底下,執行css_......繼續閱讀 »
2008年12月10日
這是剛剛找資料的時候發現的css圓角5種效果
這5種完全沒有用到圖片,純粹是用css,配合1px的像素堆疊達成效果
我把這五種代碼貼回家,並且把效果釋放出來給大家觀賞,有興趣的人可以繼續往下看。
@ 文章出處 / 用CSS實現圓角框框
我也把代碼貼到自己的網誌,有需要的人,可以從我這邊拷貝回家,也可以從那篇文章拷貝代碼。
簡潔型css圓角矩形:
.b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b{display:block;overflow:hidden;}......繼續閱讀 »
2008年12月05日
這篇是之前發在pixnet的舊文章了
剛好最近有需要所以一直在翻找,想說大家可能也會有這方面的需求
所以我就重新發上來XD!
使用愉快(笑
相信我,使用IE6的人在世界上應該還是占大多數。
不過火狐的標準瀏覽器也開始嶄露頭角了
另外,IE7悄悄的蔓延整個地球
所以.....css就碰到困擾了,調了這個錯那個,改了那個卡這個,光是想到就一個頭兩個大....
到底要怎麼做才可以讓三個瀏覽器都乖乖的聽話呢(?)
這邊給大家一個小撇步......繼續閱讀 »
2008年09月04日
今天花了一點時間改個版面
其實也只有把外觀換了一下,內頁仍然不變(懶?)
因為我現在使用的瀏覽器是opera,加上我又有灌firefox、google瀏覽器,以及內建的ie6.0,在排版上面真的搞了一陣子orz。
本家是用opera,當然是以他為主,不過他跟FF的差異也沒太大,
google瀏覽器也許是依據W3C,我看了也沒太大問題,唯一怪異的地方就是文字太小。
已經設定11px號字體,用google瀏覽器看到的字卻很奇怪(如圖)
使用google瀏覽器看到......繼續閱讀 »
2008年05月11日
簡單來說,就是把你放在部落格的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!!!
畢竟......繼續閱讀 »
2008年04月02日
首先來看一下變化的效果吧
這個是專門給使用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......繼續閱讀 »


