Submit Search
Upload
2011淘宝首页开发实践
•
114 likes
•
5,801 views
jay li
Follow
2011新年版淘宝首页开发实践总结
Read less
Read more
Design
Report
Share
Report
Share
1 of 51
Download now
Download to read offline
Recommended
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
哲宇 吳
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
NAVER D2
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Akihiro Ikezoe
Edge of the Web
Edge of the Web
Todd Anglin
XPages Binary Output
XPages Binary Output
JohnFoldager
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
Recommended
Highly Maintainable, Efficient, and Optimized CSS
Highly Maintainable, Efficient, and Optimized CSS
Zoe Gillenwater
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
以 Vue / GSAP / D3 為核心的網頁視覺動態整合與架構設計 - 吳哲宇
哲宇 吳
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
NAVER D2
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
Incremental DOM and Recent Trend of Frontend Development
Incremental DOM and Recent Trend of Frontend Development
Akihiro Ikezoe
Edge of the Web
Edge of the Web
Todd Anglin
XPages Binary Output
XPages Binary Output
JohnFoldager
Maintainable Frontend Development with BEM
Maintainable Frontend Development with BEM
Varya Stepanova
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
CARA_Lyon
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Html5
Html5
Chris Young
Basics of css and xhtml
Basics of css and xhtml
sagaroceanic11
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Paul Withers
Twitter bootstrap
Twitter bootstrap
Veck Hsiao
Intro to CSS3
Intro to CSS3
Denise Jacobs
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Innoteam Srl
Building single page applications
Building single page applications
SC5.io
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Eduardo Castro
Understanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat
How browser engines work?
How browser engines work?
haricot
HTML5
HTML5
Hatem Mahmoud
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
Widget Summit 2008
Widget Summit 2008
Volkan Unsal
Hello websocket(cn)
Hello websocket(cn)
g65537
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Oscon 20080724
Oscon 20080724
linkedin_resptest2
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
The Dojo Build System
The Dojo Build System
klipstein
More Related Content
What's hot
Developing Your Ultimate Package
Developing Your Ultimate Package
Simon Collison
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
CARA_Lyon
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Rachel Cherry
Html5
Html5
Chris Young
Basics of css and xhtml
Basics of css and xhtml
sagaroceanic11
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Patrick Lauke
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Paul Withers
Twitter bootstrap
Twitter bootstrap
Veck Hsiao
Intro to CSS3
Intro to CSS3
Denise Jacobs
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Innoteam Srl
Building single page applications
Building single page applications
SC5.io
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Eduardo Castro
Understanding Webkit Rendering
Understanding Webkit Rendering
Ariya Hidayat
How browser engines work?
How browser engines work?
haricot
HTML5
HTML5
Hatem Mahmoud
What's hot
(15)
Developing Your Ultimate Package
Developing Your Ultimate Package
Building complex and modular RIAs with OSGi and Flex
Building complex and modular RIAs with OSGi and Flex
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Battle of the Front-End Frameworks: Bootstrap vs. Foundation
Html5
Html5
Basics of css and xhtml
Basics of css and xhtml
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011
BP210 XPages: Enter The Dojo
BP210 XPages: Enter The Dojo
Twitter bootstrap
Twitter bootstrap
Intro to CSS3
Intro to CSS3
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Costruire applicazioni multi-tenant e piattaforme SaaS in PHP con Innomatic
Building single page applications
Building single page applications
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Easing ASP.NET Web and SQL Server Database Deployment withVS 2010 and MsDeploy
Understanding Webkit Rendering
Understanding Webkit Rendering
How browser engines work?
How browser engines work?
HTML5
HTML5
Similar to 2011淘宝首页开发实践
The Web Becomes Graceful
The Web Becomes Graceful
colorhook
Widget Summit 2008
Widget Summit 2008
Volkan Unsal
Hello websocket(cn)
Hello websocket(cn)
g65537
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Walter Ebert
Oscon 20080724
Oscon 20080724
linkedin_resptest2
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Todd Anglin
The Dojo Build System
The Dojo Build System
klipstein
Modern UI Development With Node.js
Modern UI Development With Node.js
Ryan Anklam
Javascript Bundling and modularization
Javascript Bundling and modularization
stbaechler
Developing web applications in 2010
Developing web applications in 2010
Ignacio Coloma
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
Wolf Loescher
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Sadaaki HIRAI
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Steve Souders
Html5
Html5
Ben MacNeill
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
vincent_scheib
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Matt Raible
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
Adam Lu
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
Marvelic Engine Co., Ltd.
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Building Blocks
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Yuki Okada
Similar to 2011淘宝首页开发实践
(20)
The Web Becomes Graceful
The Web Becomes Graceful
Widget Summit 2008
Widget Summit 2008
Hello websocket(cn)
Hello websocket(cn)
Web Performance Optimierung - DWX13
Web Performance Optimierung - DWX13
Oscon 20080724
Oscon 20080724
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
Accelerated Adoption: HTML5 and CSS3 for ASP.NET Developers
The Dojo Build System
The Dojo Build System
Modern UI Development With Node.js
Modern UI Development With Node.js
Javascript Bundling and modularization
Javascript Bundling and modularization
Developing web applications in 2010
Developing web applications in 2010
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
This Old Website: : Applying HTML5, CSS3, and Responsive Design to An Existin...
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
Html5
Html5
HTML5 and Other Modern Browser Game Tech
HTML5 and Other Modern Browser Game Tech
Front End Development for Back End Developers - UberConf 2017
Front End Development for Back End Developers - UberConf 2017
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
HTML5 and Joomla! 2.5 Template
HTML5 and Joomla! 2.5 Template
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Technical Tips: Visual Regression Testing and Environment Comparison with Bac...
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
Web開発の技術選び、 好き嫌いでやってませんか 〜技術選びで注目すべきポイントとは〜
More from jay li
犀牛书第六版
犀牛书第六版
jay li
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Jswebapps
Jswebapps
jay li
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
深入剖析浏览器
深入剖析浏览器
jay li
HTML/CSS/JS基础
HTML/CSS/JS基础
jay li
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
F2e security
F2e security
jay li
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
jay li
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
jay li
编码大全 拔赤
编码大全 拔赤
jay li
小控件、大学问
小控件、大学问
jay li
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Javascript autoload
Javascript autoload
jay li
Html5form
Html5form
jay li
Slide
Slide
jay li
Js doc toolkit
Js doc toolkit
jay li
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
jay li
夏之 专题设计
夏之 专题设计
jay li
More from jay li
(20)
犀牛书第六版
犀牛书第六版
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Jswebapps
Jswebapps
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
Responsive Web UI Design
Responsive Web UI Design
深入剖析浏览器
深入剖析浏览器
HTML/CSS/JS基础
HTML/CSS/JS基础
淘宝前端技术巡礼
淘宝前端技术巡礼
F2e security
F2e security
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
编码大全 拔赤
编码大全 拔赤
小控件、大学问
小控件、大学问
Mobile UI design and Developer
Mobile UI design and Developer
Javascript autoload
Javascript autoload
Html5form
Html5form
Slide
Slide
Js doc toolkit
Js doc toolkit
新业务新员工培训 Banner设计
新业务新员工培训 Banner设计
夏之 专题设计
夏之 专题设计
Recently uploaded
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Yantram Animation Studio Corporation
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
SwaraliBorhade
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
diploma 1
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
F dds
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
mrchrns005
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
z xss
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
ssuser7cb4ff
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
Sumit Lathwal
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
A SSS
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
nhjeo1gg
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
Fi sss
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
uasjlagroup
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
neelspinoy
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
yuu sss
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
D SSS
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
F La
Recently uploaded
(20)
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
Unveiling the Future: Columbus, Ohio Condominiums Through the Lens of 3D Arch...
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理(USYD毕业证书)澳洲悉尼大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
Business research proposal mcdo.pptxBusiness research proposal mcdo.pptxBusin...
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
办理(UC毕业证书)查尔斯顿大学毕业证成绩单原版一比一
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Call Girls Aslali 7397865700 Ridhima Hire Me Full Night
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
办理学位证(NTU证书)新加坡南洋理工大学毕业证成绩单原版一比一
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
在线办理ohio毕业证俄亥俄大学毕业证成绩单留信学历认证
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
1比1办理美国北卡罗莱纳州立大学毕业证成绩单pdf电子版制作修改
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
2011淘宝首页开发实践
1.
2011淘宝首页开发实践 • 拔赤 http://jayli.github.com
2011-01-14
2.
拔赤 - 前端开发工程师 2008.4
- 2009.9 Yahoo! 2009.9 - present Taobao
3.
http://www.taobao.com
4.
一、从单兵作战到团队开发
5.
约定“词汇表” css/js命名规则源自词汇表
6.
各自独立的demo.html 统一的layout.html 通过SSI调用各模块demo
7.
搭建本地a.tbcdn.cn环境,模拟cdn的combo http://wiki.ued.taobao.net/doku.php?id=ued.bj:f2e:tbcdn http://www.slideshare.net/lijing00333/yui-combo?from=ss_embed
8.
基于kissy 1.1.6 各自使用沙箱,避免全局变量冲突
9.
使用打包脚本 build.sh 统一发布js/css
10.
小结: • 约定词汇表
• 基于 SSI 和 combo 的本地开发环境 • 打包脚本 目的:减少冲突
11.
ref • http://wiki.ued.taobao.net/doku.php?id=ued.
bj:f2e:tbcdn • http://www.slideshare.net/lijing00333/yui- combo?from=ss_embed
12.
二、摆脱栅格的束缚
13.
栅格 “万变”的layout布局?
14.
淘宝现有 950 栅格原型
15.
290
990 栅格 30(列宽) x 25(列) + 10(槽宽) x 24(槽数)
16.
300
1000px “栅格”? C(列宽) x n(列) + 10(槽宽) x (n-1)(槽数) n∈[15,40],C∈Z 无解
17.
设计和实现都不必拘泥于栅格系统
18.
典型的双飞翼布局,无确切语义的多余标签
19.
标识位置的“语义” => 描述内容的“语义”
绝对定位,简单高效
20.
ref • http://grid.mindplay.dk/ • http://ued.taobao.com/blog/2008/10/22/grid
_system_research_1/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_2/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_3/ • http://ued.taobao.com/blog/2008/10/22/grid _system_research_4
21.
三、从 HTML4 到
HTML5
22.
IE 9
Chrome 4+ Safari 4+ Firefox 3.6+ Opera 10+
23.
让ie6/7/8 支持 HTML5
标签 <html> <head> <style> figure { color:orange; } </style> <script>document.createElement("figure");</script> </head> <body> <figure> 淘宝网! </figure> </body> </html>
24.
25.
Let’s Do it!
26.
淘宝网 ie6/7/8 禁用脚本访问量占
0.1%+ 如果ie6/7/8禁用脚本?
27.
<!--[if lte IE
8]> <noscript> <style> .html5-wrappers {display:none !important;} </style> <div class="ie-noscript-warning"> 您的浏览器禁用了脚本,请<a href="">查看这里</a>来启用脚本! 或者<a href="/?noscript=1">继续访问</a>. </div> </noscript> <![endif]-->
28.
如果禁用了 ie 脚本
29.
IE 禁用脚本访问 /?noscript=1 Firefox 禁用脚本 Opera
禁用脚本
30.
IE 6/7/8 禁用脚本用户的选择
• 跟随向导启用脚本 • 进入 html4 标签页面
31.
根据可用性设计的思想,这个时候,你应该 告诉用户,哪些事是不对的,以及怎样纠正, 这种做法被称之为"防御性设计" (Defensive Design)。
—— Joel Spolsky
32.
ref • http://ejohn.org/blog/html5-shiv/ • http://www.alistapart.com/articles/previewofh
tml5 • http://www.impressivewebs.com/demo- files/easy-html5-template/ • http://www.facebook.com/home.php?_fb_no script=1
33.
四、fast by default
34.
我们过于依赖 Yslow 和
pageSpeed?
35.
却忽视了影响体验最重要的因素:时间!
36.
目标:将 first rendering(绿)
提前
37.
传统优化策略依然适用
• 内容的延时加载 • Dom节点的延时渲染 • 函数的延时执行 • 将 sprites 载入提前 • 缓存、combo…
38.
最易被忽视的真相:JavaScript 执行效率
• 首页去 Tbra • 减少对DomReady的依赖 • 重构臃肿的逻辑
39.
客户端 CPU 损耗对
FirstRendering 的影响 2010c (旧)版首页 CPU 消耗 2011a (新)版首页 CPU 消耗
40.
E-Shopping 网站渲染速度
0.5s 1.0s 1.5s 2.0s 3s ebay amazone dangdang buy360 taobao
41.
ref • http://v.youku.com/v_show/id_XMjM2MTkxNTI
w.html • http://www.webpagetest.org/result/110110_0 J_879P • http://www.webpagetest.org/result/110110_7 N_87A7
42.
五、其他细节
43.
必要的菜单延时
44.
/* except for
ie 6/7/8 */ .J_slide li { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; height:20px; } 圆角的实现
45.
/* 圆角 for
ie6,7,8 use vml */ var css = document.createStyleSheet(); css.addRule("v:roundrect", "behavior: url(#default#VML);display:inline-block;"); var rect = document.createElement('v:roundrect'); setAttribute(rect, { arcsize:"20px", stroked:false }); rect.css({ width:"20px",height:"20px", antialias:true }); IE 6/7/8使用js实现圆角
46.
首页开发文档
47.
Just for fun…
48.
ref • http://msdn.microsoft.com/en-
us/library/bb250524%28v=vs.85%29.aspx • http://wiki.ued.taobao.net/doku.php?id=team :udc:fp_2011a_dev:start
49.
鸣谢!
50.
昂首挺胸 迈进HTML5时代!
51.
拔赤
bachi@taobao.com http://jayli.github.com
Download now