Mais conteúdo relacionado Semelhante a Koubei banquet 34 (20) Koubei banquet 342. ICP2010 年检通过
YouTube 支持 4K 视频分辨率
4096 x 3072分辨率
25英尺
谷歌中国首页顶部去除 “来吧” 和 “问答” 链接
Android 美国份额继续增长,其它智能手机份额全
部下跌
Android Market 应用数量将在本月突破十万大关
Google能够远程卸载用户手机里的Android应用
4. 最佳CEO
史蒂夫·
乔布斯(Steve Jobs),苹果CEO
杰夫·
贝佐斯(Jeff Bezos),亚马逊CEO
米奇·
戈德(Mitch Gold),Dendreon公司CEO
马云,阿里巴巴CEO
理查德·
罗森布拉特(Richard Rosenblatt),
Demand Media公司CEO
5. iphone 4 vs iphone 3Gs / iphone 4
Google
Who is Jay chou / how old is jay chou / jay chou's albums / bush's son
new york / asia / 故宫
Icq
boy
…
http://www.kngine.com
又一个百度搜索开放平台?
6. 收集世界上的所有信息,并且整理出信息之间的关系。
计算机和人共同组织维护。
wikipedia, MusicBrainz的知识源。
人工上传和编辑,对知识和信息进行采集,整理,归纳。
…
http://www.freebase.com/explore 类目
http://www.freebase.com/view/m/075wx7_ 例子
7. CSS
-moz-resize
○ Only for <textarea>.
○ none | both | horizontal | vertical | inherit
-moz-calc()
○ The current implementation supports the +, -, *, /, mod, min, and max operators.
○ Doesn’t work.
-moz-image-rect
○ No example
background-size
○ -moz-background-size is no longer supported.
-moz-any
○ h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{text-decoration:underline;}
○ -moz-any(h1,h2,h3,h4,h5,h6) a{text-decoration:underline;}
-moz-transition(Gecko 1.9.3)
:visited
8. Mozilla开始在firefox 4限制“:visited”的可用样式!!!
http://demo.zhouqicf.com/css/2010/firefox4_visited.html
http://demo.zhouqicf.com/css/2010/visited_history.html
http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited
9. 补充常之漏讲的两点:
1.两个事件:
box.addEventListener( 'webkitTransitionEnd', function( event ) { alert( "Finished
transition!" ); }, false );
box.addEventListener( 'webkitAnimationEnd', function( event ) { alert( "Finished
animation!" ); }, false );
通过webkitTransitionEnd,transition可以模拟animation
http://demo.zhouqicf.com/css/2010/transition_can_do_animation.html
2.动画完成后的样式
http://demo.zhouqicf.com/css/2010/animation_transition.html
http://wlsy.me/lab/css3ppt
10. <div id=“news” class=“mod”>
<h2 class=“mod-title”>新闻</h2>
HTML
<div class=“mod-body”>
<ol>
<li><a href=“#”>title</a></li>
<li><a href=“#”>title</a></li>
…
</ol>
</div>
</div>
模块化:
h2{…} /*reset*/
CSS
ol{…} /*reset*/
.mod ol {…}
.mod h2 {…}
#news h2{…}
面向对象:
h2{…} /*default style*/
CSS
ol{…} /*default style*/
.mod ol{…}
.mod h2{…}
#news h2{…}
11. Keyword :重用
Links:
http://github.com/majic3/oocss
What is Object Oriented CSS?
Object Oriented CSS UML
OOCSS FAQ
Object Oriented CSS
The Cascade, Grids, Headings, and Selectors from an OOCSS
Perspective, Ajax Experience 2009
12. Nothing is impossible
常见的
Fix float
Paint样式表 content:attr(href);
:hover时显示辅助内容
还可以做什么?
遮罩
访问过链接打勾
替代icon
画画
http://www.zhouqicf.com/html-css/draw-with-content
http://nicolasgallagher.com/demo/pure-css-speech-bubbles/bubbles.html
优化sprites (对比-moz-image-rect)
http://demo.zhouqicf.com/css/2010/content_sprites.html
三列等高
…
原则
装饰性(非内容性)、辅助性、渐进增强…
思考题
纯CSS可以为一个元素创造多少条边框(不能用背景图)?
http://demo.zhouqicf.com/css/2010/how_many_borders.html