目錄表
W3C CSS
http://www.w3.org/Style/CSS/current-work
Get Started with CSS 3: http://www.webmonkey.com/tutorial/Get_Started_with_CSS_3
CSS3.info：http://www.css3.info/
Animation & Transforms
- Sidebar Transitions - Transition effects for off-canvas views
Icon
do template
Free online web templates generator.
Top 10 CSS Table Designs
12 Basic CSS Templates
50 Beautiful CSS-Based Web-Designs in 2006
53 CSS-Techniques You Couldn’t Live Without
53個CSS技術網站
free CSS templates
Free CSS Templates
CSSeasy
CSS Layouts
CSS Dock Menu
25 Code Snippets for Web Designers
http://tutorialblog.org/25-code-snippets-for-web-designers-part1/
http://tutorialblog.org/25-code-snippets-for-web-designers-part2/
60 best CSS directories you would die to watch!
70 Expert Ideas For Better CSS Coding
Best of CSS Design 2007
nuvio(Open Source CSS)
簡易圓角框
Even More Rounded Corners With CSS
Zen Garden
YUI: CSS Grid Builder
區塊垂直置中
Vertical Centering in CSS：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
讓文章中的照片自動縮圖以符合版面
http://blog.martylan.com/?p=825
img {
max-width:570px;height:auto;
zoom:expression( function(elm) {
if (elm.width>>570) {
var oldVW = elm.width; elm.width=560;
elm.height = elm.height*(560 /oldVW);}
elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}
針對所有圖片，或
#div img {
max-width:570px;height:auto;
zoom:expression( function(elm) {
if (elm.width>>570) {
var oldVW = elm.width; elm.width=560;
elm.height = elm.height*(560 /oldVW);}
elm.style.zoom = '1';}(this));
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > >570)?"560px":"auto"});}
針對區域。
頁數樣式
http://blog.roodo.com/jaceju/archives/3936285.html
<div class="pagination digg"> <ul> <li class="disabled">第一頁</li> <li class="disabled">上一頁</li> <li class="current">1</li> <li><a href="?page=2">2</a></li> <li><a href="?page=3">3</a></li> <li><a href="?page=4">4</a></li> <li><a href="?page=5">5</a></li> <li><a href="?page=2">下一頁</a></li> <li><a href="?page=5">最後一頁</a></li> </ul> </div>
/*512megas.com */
div.pagination.megas512 {
padding: 3px;
margin: 3px;
text-align:center;
}
div.pagination.megas512 a {
border: 1px solid #dedfde;
margin-right:3px;
padding:2px 6px;
background-position:bottom;
text-decoration: none;
color: #99210B;
}
div.pagination.megas512 a:hover, div.pagination.megas512 a:active {
border: 1px solid #000;
background-image:none;
background-color:#777777;
color: #fff;
}
div.pagination.megas512 li.current {
margin-right:3px;
padding:2px 6px;
font-weight: bold;
color: #99210B;
}
div.pagination.megas512 li.disabled {
margin-right:3px;
padding:2px 6px;
color: #adaaad;
}
IE與Firefox的CSS兼容大全
http://www.lougoo.com/blog/article.asp?id=731 , http://hi.baidu.com/%DA%F7%BE%A7/blog/category/Oscommerce
IE與Firefox的CSS兼容大全 作者:AYI 日期:2006-10-25 1.DOCTYPE 影響 CSS 處理 2.FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行 3.FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 設置 padding 後, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width 5.FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式，值得注意的是，一定要將xxxx !important 這句放置在另一句之上 6.div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然後插入文字，就垂直居中了。缺點是要控制內容不要換行 7.cursor: pointer 可以同時在 IE FF 中顯示游標手指狀， hand 僅 IE 可以 8.FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格。 9.在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：div{margin:30px!important;margin:28px;} 注意這兩個margin的順序一定不能寫反，據阿捷的說法!important這個屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實解釋成這樣：div{maring:30px;margin:28px} 重複定義的話按照最後一個來執行，所以不可以只寫margin:XXpx!important;
10.IE5 和IE6的BOX解釋不一致 IE5下div{width:300px;margin:0 10px 0 10px;} div的寬度會被解釋為300px-10px(右填充)-10px(左填充)最終div的寬度為280px，而在IE6和其他瀏覽器上寬度則是以 300px+10px(右填充)+10px(左填充)=320px來計算的。這時我們可以做如下修改div{width:300px! important;width //:340px;margin:0 10px 0 10px} 關於這個//是什麼我也不太明白，只知道IE5和firefox都支持但IE6不支持，如果有人理解的話，請告訴我一聲，謝了！：）
11.ul標籤在Mozilla中默認是有padding值的,而在IE中只有margin有值所以先定義ul{margin:0;padding:0;} 就能解決大部分問題
注意事項：
1、float的div一定要閉合。
例如：(其中floatA、floatB的屬性已經設置為float:left;)<#div id=\“floatA\” > <#div id=\“floatB\” > <#div id=\“NOTfloatC\” > 這裡的NOTfloatC並不希望繼續平移，而是希望往下排。 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標籤，必須將float標籤閉合。 在<#div class=\“floatB\”> <#div class=\“NOTfloatC\”> 之間加上<#div class=\“clear\”> 這個div一定要注意聲明位置，一定要放在最恰當的地方，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關係，否則會產生異常。 並且將clear這種樣式定義為為如下即可：.clear{ clear:both;} 此外，為了讓高度能自動適應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自動適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。 例如某一個wrapper如下定義：.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}
2、margin加倍的問題。
設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。 解決方案是在這個div裡面加上display:inline; 例如： <#div id=\“imfloat\”>
相應的css為 #IamFloat{ float:left; margin:5px;/*IE下理解為10px*/ display:inline;/*IE下再理解為5px*/}
3、關於容器的包涵關係
很多時候，尤其是容器內有平行佈局，例如兩、三個float的div時，寬度很容易出現問題。在IE中，外層的寬度會被內層更寬的div擠破。一定要用Photoshop或者Firework量取像素級的精度。
4、關於高度的問題
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎麼回事）
5、最狠的手段 - !important;
如果實在沒有辦法解決一些細節問題,可以用這個方法.FF對於“!important”會自動優先解析,然而IE則會忽略.如下.tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要將xxxx !important 這句放置在另一句之上，上面已經提過
Other
