SlideShare a Scribd company logo
1 of 83
Download to read offline
支付宝CSS样式架构
小鱼(@sofish)
关于 sofish
ABOUT




叫我小鱼(林建锋)
两年前在法学院毕业
目前在支付宝搞搞前端
微博:@sofish
博客:http://sofish.de
内容概要
SUMMARY




构建⼀一个可扩展,适合
团队协同开发的库
用方便的方式发布上线
内容概要
SUMMARY




  基础构建    规范、浏览器解决方案(方法+插件)、通用库等



  团队开发    组件代码库+展示平台、工具(TODO)



  静态部署    打包、部署
基础构建(我们的做法)
规范、浏览器解决方案(方法+插件)、通用库等




  ⼀一套编码、组件库构建+维护+升级规范

  ⼀一些些解决方案(插件)

  ⼀一个通用组件库 + 拥有展示平台的库

  ⼀一种打包部署方案
基础构建(我们的做法)
规范、浏览器解决方案(方法+插件)、通用库等




  ⼀一套编码、组件库构建+维护+升级规范

  ⼀一些些解决方案(插件)

  ⼀一个通用组件库 + 拥有展示平台的库

  ⼀一种打包部署方案


          构建             部署
 规范
                组件库           支付宝
  解决方案
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




我们
要解决
的问题
是什么?
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         我们
                         要解
                         的问
                         是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                                  我们
                         CSS 框架   要解
                                  的问
                                  是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                                  我们
                         CSS 框架   要解
                                  的问
                         产品组件     是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         我们
                         要解
                         的问
                         是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




多团队、多产品并行开发              我们
支付宝遇到的问题:                要解
                         的问
                         是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




多团队、多产品并行开发              我们
支付宝遇到的问题:                要解
  PA.CSS 6000行/100KB     的问
  全局设置太多,多产品共用耦合高

  代码冗余严重
                         是什
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  代码多

  全局设置多

  代码冗余严重
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  代码多 => 精简吧

  全局设置多

  代码冗余严重
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  代码多 => 精简吧

  全局设置多 => 做成 CSS 框架吧

  代码冗余严重
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  代码多 => 精简吧

  全局设置多 => 做成 CSS 框架吧

  代码冗余严重 => 严格规定框架不能修改
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




      代码多 => 精简吧

      全局设置多 => 做成 CSS 框架吧

      代码冗余严重 => 严格规定框架不能修改



new
       提供⼀一个解决 BUG 的库
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         new
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




最终她只有 20KB
所有产品都可以基于她来扩展
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




最终她只有 20KB
所有产品都可以基于她来扩展

  不再需要引用 100 KB 的 CSS

  可以只关注本产品的升级维护、不怕改动影响到其他产品的样式

  有浏览器兼容方案帮忙解决头痛的问题
福特说:
如果我当年去问顾客他们想要什么,
他们肯定会告诉我:“⼀一匹更快的马”
福特说:
如果我当年去问顾客他们想要什么,
他们肯定会告诉我:“⼀一匹更快的马”

我们是不是该换⼀一种思路了
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等



                         样式库


                          产品⼀一   产品二


                          产品三    产品四


                          产品五    产品六
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  编码风格不统⼀一:命名、注释、模块化
  产品组内合作困难、换产品组需要适应期

  不能跨产品重复利用
  依赖情况不明,个性化强

  代码仍然冗余
  并不是所有元件都会用到、并且需要覆盖框架
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         new
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         new
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         new
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




  抽象出组件,提供组件 DOM 模板,颗粒化模块

  提供最基础的依赖文件

  制定编码规范,统⼀一命名、注释、模块化

  制定组件库构建、维护和升级规则
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         抽象出组件,提供组件 DOM 模板,

                         提供最基础的依赖文件

                         制定编码规范,统⼀一命名、注释、模

                         制定组件库构建、维护和升级规则
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




 产品组             产品⼀一


 产品组             产品二


  产品组            产品三
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




 产品组             产品⼀一


 产品组             产品二


  产品组            产品三
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




 产品组             产品⼀一


 产品组             产品二


  产品组            产品三
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




 产品组             产品⼀一


 产品组             产品二


  产品组            产品三




  统⼀一的编码方式,在那个位置(产品线)组件代码都⼀一目了然。
  各产品组只关注自己产品组件的构建、维护和升级

  只依赖 base.css,可跨产品使用(为什么有用?)
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




除了规范外
最重要的是: 通用解决方案
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




除了规范外
最重要的是: 通用解决方案

layout、1px round corner
rorate、css3-like shadow
force wrap、vertical & horizonal align
flash copy、float:center
line-gradient、iframe auto adjust ...
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         除了规范外
                         最重要的是: 通用解决

                         layout、1px round cor
                         rorate、css3-like shado
                         force wrap、vertical &
                         flash copy、float:cente
                         line-gradient、iframe a
基础构建(为什么这样做)
规范、浏览器解决方案(方法+插件)、通用库等




                         除了规范外
    产品⼀一    产品二
                         最重要的是: 通用解决
    产品三     产品四


     产品五    产品六
                         layout、1px round cor
                         rorate、css3-like shado
                         force wrap、vertical &
                         flash copy、float:cente
                         line-gradient、iframe a
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




基于统⼀一规范的库,
产品组只需要关注自己的组件库。
即使因有临时需要转到其他产品组,
也可以因为相同的规范很迅速适应。
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




基于统⼀一规范的库,
产品组只需要关注自己的组件库。
即使因有临时需要转到其他产品组,
也可以因为相同的规范很迅速适应。
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




基于统⼀一规范的库,
产品组只需要关注自己的组件库。
即使因有临时需要转到其他产品组,
也可以因为相同的规范很迅速适应。

如果要重复使用组件代码呢?
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




基于统⼀一规范的库,
产品组只需要关注自己的组件库。
即使因有临时需要转到其他产品组,
也可以因为相同的规范很迅速适应。

如果要重复使用组件代码呢?
  告诉队友放在那个地方(svn)
  有个可视的方式让他确认是否是自己需要的
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)



  建立产品组件库的展示平台
  提供方便的组件代码获取方式
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




(1)组件代码库不得跨产品引用
(2)关于重得劳动
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




(1)组件代码库不得跨产品引用
(2)关于重得劳动
      BUG 是头痛的问题(通用解决方案)
      业务是头发的问题,基础技术还得应用于产品
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




(1)组件代码库不得跨产品引用
(2)关于重得劳动
      BUG 是头痛的问题(通用解决方案)
      业务是头发的问题,基础技术还得应用于产品
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




(1)组件代码库不得跨产品引用
(2)关于重得劳动
      BUG 是头痛的问题(通用解决方案)
      业务是头发的问题,基础技术还得应用于产品



有通用解决方案,能不能有通用产品组件?
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




目前我们在正从交互
到视觉,再到前端
建立⼀一套全站统⼀一的规范
并构建成⼀一个通用库
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




目前我们在正从交互
到视觉,再到前端
建立⼀一套全站统⼀一的规范
并构建成⼀一个通用库
团队开发(统⼀一、透明)
组件代码库+展示平台、工具(TODO)




目前我们在正从交互
到视觉,再到前端
建立⼀一套全站统⼀一的规范
并构建成⼀一个通用库

保护头发,从减少产品重复劳动开始!
团队开发(TO-DO)
 组件代码库+展示平台、工具(TO-DO)




(1)Code	
  Review
(2)跨产品组件复制的背景图片问题
团队开发(TO-DO)
 组件代码库+展示平台、工具(TO-DO)




(1)Code	
  Review
(2)跨产品组件复制的背景图片问题
       扩展 CSS(如扩展 LESS CSS)
       Auto Sprites(CSS Gaga、imagemagic)
静态部署
 版本管理、打包、压缩,最级部署线上环境




(1)版本管理、打包压缩
(2)GUI	
  界面部署
静态部署
 版本管理、打包、压缩,最级部署线上环境




(1)版本管理、打包压缩


(2)GUI	
  界面部署
静态部署
 版本管理、打包、压缩,最级部署线上环境




(1)版本管理、打包压缩
   maven + ant + yui compressor

(2)GUI	
  界面部署
静态部署
 版本管理、打包、压缩,最级部署线上环境




(1)版本管理、打包压缩
   maven + ant + yui compressor

(2)GUI	
  界面部署
   maven + nodejs
静态部署
 版本管理、打包、压缩,最级部署线上环境




(1)版本管理、打包压缩
   maven + ant + yui compressor

(2)GUI	
  界面部署
   maven + nodejs

 使用支付宝前端架构组基于
 Maven 的(组件库)版本管理、部署系统
支付宝CSS构架
说完我们的这套方案
说完我们的这套方案

  然后呢?
说完我们的这套

然后呢?
说完我们的这套
我们还在做更多的事
            然后呢?
说完我们的这套

然后呢?
 我们还在做更多
开源    说完我们的这套

     然后呢?
      我们还在做更多
说完我们的这套

然后呢?
 我们还在做更多

  开源
如果你感兴趣    说完我们的这套
 可以联系我
         然后呢?
          我们还在做更多

           开源
如果你感兴趣
  可以联系我

 说完我们的这套

然后呢?
 我们还在做更多

  开源
sofish@163.com
 如果你感兴趣
  可以联系我

 说完我们的这套

然后呢?
 我们还在做更多

   开源
sofish@163.com
                     如果你感兴趣
                      可以联系我

                     说完我们的这套
Thank You!          然后呢?
  你们的:小鱼(@sofish)
                     我们还在做更多

                       开源

More Related Content

What's hot

鳳山高中/網頁應用程式開發入門 I
鳳山高中/網頁應用程式開發入門 I鳳山高中/網頁應用程式開發入門 I
鳳山高中/網頁應用程式開發入門 ILorex L. Yang
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanismlifesinger
 
快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚Lorex L. Yang
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇fangdeng
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染Ailsa126
 
北護大/FHIR 開發簡介與應用
北護大/FHIR 開發簡介與應用北護大/FHIR 開發簡介與應用
北護大/FHIR 開發簡介與應用Lorex L. Yang
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJSlifesinger
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練Joseph Chiang
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼jay li
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇传贵 谢
 
5.網站設計與前端框架
5.網站設計與前端框架5.網站設計與前端框架
5.網站設計與前端框架Nelson Chen
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享wantingj
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考greengnn
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計rainlan
 
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架Vincent Chi
 
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34Koubei UED
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練Joseph Chiang
 

What's hot (18)

鳳山高中/網頁應用程式開發入門 I
鳳山高中/網頁應用程式開發入門 I鳳山高中/網頁應用程式開發入門 I
鳳山高中/網頁應用程式開發入門 I
 
KISSY Mechanism
KISSY MechanismKISSY Mechanism
KISSY Mechanism
 
快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚快速入坑 Node.js - 0613 SITCON 雲林定期聚
快速入坑 Node.js - 0613 SITCON 雲林定期聚
 
Style基础优化之独角兽篇
Style基础优化之独角兽篇Style基础优化之独角兽篇
Style基础优化之独角兽篇
 
浅析浏览器解析和渲染
浅析浏览器解析和渲染浅析浏览器解析和渲染
浅析浏览器解析和渲染
 
北護大/FHIR 開發簡介與應用
北護大/FHIR 開發簡介與應用北護大/FHIR 開發簡介與應用
北護大/FHIR 開發簡介與應用
 
Intro-to-SeaJS
Intro-to-SeaJSIntro-to-SeaJS
Intro-to-SeaJS
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼
 
2011新版首页总结 技术篇
2011新版首页总结 技术篇2011新版首页总结 技术篇
2011新版首页总结 技术篇
 
5.網站設計與前端框架
5.網站設計與前端框架5.網站設計與前端框架
5.網站設計與前端框架
 
CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享CSS preprocessor 介紹,與 SASS 入門分享
CSS preprocessor 介紹,與 SASS 入門分享
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
 
教網部落格模版設計
教網部落格模版設計教網部落格模版設計
教網部落格模版設計
 
網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架網頁設計 - Bootstrap前端框架
網頁設計 - Bootstrap前端框架
 
Koubei banquet 34
Koubei banquet 34Koubei banquet 34
Koubei banquet 34
 
HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練HTML 入門 - 前端工程開發實務訓練
HTML 入門 - 前端工程開發實務訓練
 

Viewers also liked

实时/可接入的 Web 技术
实时/可接入的 Web 技术实时/可接入的 Web 技术
实时/可接入的 Web 技术Sofish Lin
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事Sofish Lin
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行Sofish Lin
 
分享我的骗骗他
分享我的骗骗他分享我的骗骗他
分享我的骗骗他Sofish Lin
 

Viewers also liked (6)

实时/可接入的 Web 技术
实时/可接入的 Web 技术实时/可接入的 Web 技术
实时/可接入的 Web 技术
 
关于 Html5 那点事
关于 Html5 那点事关于 Html5 那点事
关于 Html5 那点事
 
CSS 101
CSS 101CSS 101
CSS 101
 
新 · 交互
新 · 交互新 · 交互
新 · 交互
 
Html5的应用与推行
Html5的应用与推行Html5的应用与推行
Html5的应用与推行
 
分享我的骗骗他
分享我的骗骗他分享我的骗骗他
分享我的骗骗他
 

Similar to 支付宝CSS构架

前端样式开发演变之路
前端样式开发演变之路前端样式开发演变之路
前端样式开发演变之路Zhao Lei
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)百範 陳
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪小 米猪
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结jieorlin
 
快速定位开发常见的前端问题
快速定位开发常见的前端问题快速定位开发常见的前端问题
快速定位开发常见的前端问题taobao.com
 
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站Hipfox
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京Joseph Chiang
 
Css and Xhtml part01
Css and Xhtml part01Css and Xhtml part01
Css and Xhtml part01Sean Yeh
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3Duran Hsieh
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)Adam Wang
 
css框架研究
css框架研究css框架研究
css框架研究chandleryu
 
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享areyouok
 
Web爬虫那点事
Web爬虫那点事Web爬虫那点事
Web爬虫那点事Yihua Huang
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructurekyhpudding
 
前端开发规范
前端开发规范前端开发规范
前端开发规范aNd1coder
 
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构  王保平Top100summit前端的云时代支付宝前端平台架构  王保平
Top100summit前端的云时代支付宝前端平台架构 王保平drewz lin
 
猫粮快报
猫粮快报猫粮快报
猫粮快报tbmallf2e
 

Similar to 支付宝CSS构架 (20)

前端样式开发演变之路
前端样式开发演变之路前端样式开发演变之路
前端样式开发演变之路
 
Alice v3
Alice v3Alice v3
Alice v3
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)Modern Web with CSS and CSS Grid (image with links inside)
Modern Web with CSS and CSS Grid (image with links inside)
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
一淘新首页总结
一淘新首页总结一淘新首页总结
一淘新首页总结
 
快速定位开发常见的前端问题
快速定位开发常见的前端问题快速定位开发常见的前端问题
快速定位开发常见的前端问题
 
DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站DrupalCamp Taipei 2012 迷人的有「型」網站
DrupalCamp Taipei 2012 迷人的有「型」網站
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
Css and Xhtml part01
Css and Xhtml part01Css and Xhtml part01
Css and Xhtml part01
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練32016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
 
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
 
css框架研究
css框架研究css框架研究
css框架研究
 
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
腾讯大讲堂18 让我们戴上有色眼镜--qzone前台架构的优化分享
 
Web爬虫那点事
Web爬虫那点事Web爬虫那点事
Web爬虫那点事
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructure
 
前端开发规范
前端开发规范前端开发规范
前端开发规范
 
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构  王保平Top100summit前端的云时代支付宝前端平台架构  王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
 
猫粮快报
猫粮快报猫粮快报
猫粮快报
 

Recently uploaded

函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 

Recently uploaded (15)

函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 

支付宝CSS构架