CSS金矿

CSS 金矿 http://www.flickr.com/photos/twenty_questions/3491868827

:first 与 :last http://www.flickr.com/photos/luiscdiaz/330340600

:first-of-type Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. p { font-size : 1em ; }

:first-of-type Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna. Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. p { font-size : 1em ; } p:first-of-type { font-size : 1.2em ; }

:last-of-type Lorem ipsum Dolor sit amet Consectetuer adipiscing elit Phasellus hendrerit td { border-bottom : 1px solid pink ; }

:last-of-type td { border-bottom : 1px solid pink ; } td:last-of-type { border-bottom : 1px solid gray ; } Lorem ipsum Dolor sit amet Consectetuer adipiscing elit Phasellus hendrerit

网格布局 http://www.flickr.com/photos/22426181@N00/3651174488

一个理想的世界 .block .block .block .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros.

现实世界 .block .block .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada.

变通方案 .block .block .block .block .block .block .wrapper .wrapper Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque volutpat mattis eros.

的确很差的变通方案 .block .block .block Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. .block { height : 400px ; } Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.

解决方案 .block .block .block 4 .block 5 .block 6 .block 3 2 1 .block:nth-of-type(3n+1) { clear : both ; }

Margin 怎么样呢 ? .block .block .block 3 2 1

margin 怎么样呢 ? .block .block .block 3 2 1 .block:nth-of-type(3n+3) { margin-right : 0 ; }

它能做的，不只是这些 .block .block .block .block .block .block

这是我之前做的

伪随机性 .tag:nth-of-type(3n+1) { transform : rotate(2deg) ; } .tag:nth-of-type(5n+1) { transform : rotate(-2deg) ; }

阴影 http://www.flickr.com/photos/varmlandspojk/4026394526

阴影 .block { box-shadow : 2px 2px 6px #333333 ; } .block

内阴影 .block { box-shadow : inset 2px 2px 6px #333333 ; }

各自的 -webkit-box-shadow -moz-box-shadow filter : shadow(color=gray, direction=100, strength=5) ; Safari Firefox 该死的 IE

变形 http://www.flickr.com/photos/stevedave/3566325269

变形 .block .block { transform : rotate(2deg) ; }

变形 .block .block { transform : rotate(2deg) ; padding : 3px ; background-color : white ; border : 1px solid gray ; box-shadow : 2px 2px 3px gray ; }

Icons http://www.flickr.com/photos/piet_musterd/3294909186

[attr] 选择器

文件类型 a[href$=’.pdf’], a[href$=’.PDF’] { background-image : url(../images/icons/pdf.gif) ; } $ 意思是以 * 结束

外部网站 a[href*=”http://flickr.com”], a[href*=”http://www.flickr.com”] { background-image : url(../images/icons/flickr.gif) ; } * 意思是包含

支持 http://www.flickr.com/photos/melissamaples/2887070187

兼容性 Firefox 3.5+ Safari 4.0 Chrome Konqueror Opera 10 该死的 IE http://www.quirksmode.org/css/contents.html

http://www.qianduan.net	1802
http://www.webjx.com	283
http://www.chinaz.com	198
http://www.poluoluo.com	194
http://chinaz.com	27
http://www.zmool.com	22
http://www.lingzhong.cn	19
http://www.pqshow.com	19
http://static.slidesharecdn.com	14
http://www.yindaoxian.com	14
http://www.gb2312.net	13
http://www.zheng-ming.com	13
http://www.22333.com	13
http://www.bobd.cn	12
http://youth.huanghuai.edu.cn	11
http://www.dabaoku.com	11
http://www.cssk8.com	9
http://www.slideshare.net	9
http://wap.qianduan.net	8
http://xianguo.com	7
http://www.pcjcw.net	6
http://demo.virtualtest.net	6
http://blog.html5css3js.com	5
http://www.zhzhzh.com	5
http://www.warting.com	5
http://www.zoolc.com	4
http://www.3389hack.com	4
http://www.waweb.cn	4
http://www.zhuaxia.com	4
http://big5.chinaz.com:88	4
http://www.diybl.com	3
http://www.web1997.com	2
http://www.linggansheji.com	2
http://www.cnzz.tw	2
http://www.03759.com	2
http://www.th7.cn	2
http://www.isyb.net	2
http://zmool.com	2
http://hunuonew.gzdot.com	2
http://www.xiaoyaolife.com	1
http://jokerliang.com	1
http://www.hrzzz.com	1
http://www.ksheji.com	1
http://127.0.0.2	1
http://03759.com	1
http://www.du8.org	1
http://www.itxuexi.com	1
http://yhceo.com	1
http://feed.qianduan.net	1
http://www.itfeed.cn	1
http://www.soidc.net	1

CSS金矿

by shenfei lee on Oct 27, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

64 Embeds 2,789

Statistics

CSS金矿 — Presentation Transcript