Koubei F2E 由校2010.07.12

ICP2010 年检通过

YouTube 支持 4K 视频分辨率 4096 x 3072分辨率

25英尺

谷歌中国首页顶部去除 “来吧” 和 “问答” 链接

Android 美国份额继续增长，其它智能手机份额全部下跌

Android Market 应用数量将在本月突破十万大关

Google能够远程卸载用户手机里的Android应用

最佳CEO 史蒂夫·乔布斯(Steve Jobs)，苹果CEO

杰夫·贝佐斯(Jeff Bezos)，亚马逊CEO

米奇·戈德(Mitch Gold)，Dendreon公司CEO

马云，阿里巴巴CEO

理查德·罗森布拉特(Richard Rosenblatt)，Demand Media公司CEO

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

收集世界上的所有信息，并且整理出信息之间的关系。

计算机和人共同组织维护。

wikipedia, MusicBrainz的知识源。

人工上传和编辑，对知识和信息进行采集，整理，归纳。

…

http://www.freebase.com/explore 类目

http://www.freebase.com/view/m/075wx7_ 例子

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

Mozilla开始在firefox 4限制“:visited”的可用样式！！！

http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited

http://demo.zhouqicf.com/css/2010/firefox4_visited.html

http://demo.zhouqicf.com/css/2010/visited_history.html

补充常之漏讲的两点： 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

<div id=“news” class=“mod”>

<h2 class=“mod-title”>新闻</h2>

<div class=“mod-body”>

<ol>

<li><a href=“#”>title</a></li>

<li><a href=“#”>title</a></li>

…

</ol>

</div>

</div>

模块化：

h2{…} /*reset*/

ol{…} /*reset*/

.mod ol {…}

.mod h2 {…}

#news h2{…}

HTML

CSS

面向对象：

h2{…} /*default style*/

ol{…} /*default style*/

.mod ol{…}

.mod h2{…}

#news h2{…}

CSS

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

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

谢谢