中国 CSS 开发者大会(第三届)

大会日程以及PPT:

Mathias Bynens

别轻易使用!important
Css注释:http://www.xanthir.com/b4U10
错误://…..

正确:/注释内容/

fontfamily:字体名称如果有空格-则字体名称需要用引号括起来。

以下是一些使用纯CSS做的效果

不用js来写动画http://youmightnotneedjs.com/
https://www.詹姆斯.com/blog/2016/07/html-kong
https://kong.詹姆斯.com/
脱离一些不好的css选择器,慎用css表达式
http://csszengarden.com/
http://csszengarden.com/216/
http://csszengarden.com/217/
http://csszengarden.com/218/
http://csszengarden.com/219/

大漠com :主题:Grid LayOut

1、Flexbox (https://drafts.csswg.org/css-flexbox)

阮一峰中文基础教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。

2、CSS Grid Layout (https://drafts.csswg.org/css-grid)——主要分享这个:2017.3月下旬-大部分主流浏览器都会支持

目前浏览器还不支持(新的前沿技术),预告一下-具体的教程会在附件中体现CSS-Grid-Layout

.cards {

display: grid;

grid-template-columns: 33.33% 33.33% 33.33%;

grid-template-rows: 200px 200px 200px;

grid-gap: 20px;

}

.cards {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

grid-template-rows: 200px 200px 200px;

grid-gap: 20px;

}

3、Box Alignment (https://drafts.csswg.org/css-align)

勾三股四:闪电分享-附件:CSS in Native – CSSConf Guangzhou 2016

1、weex:是阿里2016年开源的一套跨移动端(Andriod/IOS/Wap)的前端框架,采用VUE,较React Native入门相对简单

廖洧杰SASS & CSS 设计模式

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目。

Sass、css设计模式
命名规范(以BEM为核心)、 合理的reset、 模块化、
设计稿标注、并且有对应的css生成、
SKetch
Gulp
快速开发,目前我们公司的前端项目有应用

罗正烨SVG

http://www.flaticon.com/search?word=search

http://www.iconfont.cn/
使用svg代替一些小的icon

用法:
.svg{ background-image: url(svg.svg); }

方潇仪(微信前端工程师)方潇仪-SVG

查看ppt教程

Css
Canvas
Svg:images 、xml、path、描线、动画、动画路径、填充pattern、路径、滤镜(高斯模糊)、
文件体积:换成16进制
Green Sock:http://greensock.com/products/
变形插件:svg.js

**张文婷 css icon **

http://cssicon.space/#/
主要利用css来描绘了一些CSS ICON

发表评论

电子邮件地址不会被公开。 必填项已用*标注