写 CSS 也要开脑洞:万能的 `:checked + label`

价       格: 10.24
讲座评分: 暂无评分
视频时长:1小时24分钟
等 91 人参与
10 收藏

讲师信息

Meathill
2.7k 声望
037

我是翟路佳,微博 | 博客

今年的目标是在技术开发培训上取得长足的进展,完成25场直播,收获至少一千个观众。

热爱编程,希望把程序员作为终身职业。享受不断学习、不断进步的过程,享受解决难题后的畅快。
从业10年有余,目前是一名全栈工程师,技术偏前端。
喜欢分享,好奇心旺盛,喜欢琢磨产品,喜欢观察商业模式。

内容简介

你可能不知道,网上那些看起来高大上的表单控件,实现的机制都是 :checked + label。这一对 CSS3 新增的选择器帮助我们将纯 CSS 组件的版图拓展出去一大块。再复合其它的元素和选择器,比如动画、~ 、flexbox,我们可以开发出更多又好看又好用兼容性又好的表单控件。

本次分享将包含以下重点:

  1. 使用 <label> 替换常规 radiocheckbox

  2. 开关控件的编写

  3. 多选控件的编写

  4. 星星打分控件的编写

  5. 结合 Vue 开发标签输入组件

通过学习本次分享,您将学会:

  1. CSS 预处理工具 Stylus 的使用

  2. 了解到 CSS3 若干新增元素

  3. CSS 动画基础

分享长度:约1小时,以现场写+调试代码为主

面向观众:

  1. 写过 CSS,具备 CSS 基础。

  2. 平时布局写的比较多,希望学习了解其它 CSS 技巧。

  3. 对组件比较感兴趣的同学。


0 条评价

暂无评价

相似讲座推荐

SegmentFault 讲堂是什么?

SegmentFault 讲堂是以开发者为中心的视频演讲平台。 旨在和开发者一起分享和创造有价值的技术内容。 目前讲堂主要有视频观看,下载相关文档以及和主讲人聊天互动的功能。

关注 SegmentFault 服务号

  • 订阅讲堂开播提醒
  • 及时获取更多直播动态

添加 SF.GG 讲堂粉丝 QQ 群

  • 群号码:642336612(备注 SF 用户名)
  • 不定期获取讲座优惠信息,随时和开发者交流互动