手把手带你打造自己的UI样式库

内容简介

市面上开源的 UI 框架有很多，但一般规模比较大的公司都会选择自建一套 UI 框架。自建框架的好处有：

源码可以改动

可以完全满足产品的设计风格

完成功能定制化

利于风险控制

本期专栏学习方法分为 “夯实基础 —— 实战 —— 理解设计思路 —— 项目拓展” 四个层次。从熟悉基础的 HTML、CSS 知识点开始，实战整合每一个 UIDEMO 组件，理解 UI 框架的设计思路到学会开发方法进行项目扩展、开发自己需要的组件。

资源目录

-代码开始-

课程目录已更新45节

全部

第一章 开山-课程介绍

01 开篇词：为什么学习这门专栏？

02 什么是 UI 框架？

03 自已开发 UI 框架

第二章 磨剑-课前准备

04 课前准备

05 页面结构基础

06 CSS选择器（一）之基础选择器

07 CSS选择器（二）之组合选择器

08 CSS选择器（三）之伪类和伪元素选择器

09 页面渲染机制（一）之 DOM 树和 CSSOM 树的构建

10 页面渲染机制（二）之渲染树的构建及渲染过程

11 对比分析 CSS屏幕适配方案

12 CSS规范：写出一套优雅的 CSS 代码

13 本章总结

第三章 列阵-移动端页面布局

14 章节介绍

15 项目的建立

16 字体图标的使用

17 页面布局的设计与开发

18 布局组件的开发

19 表单元素的开发

20 按钮的设计与开发

21 本章总结

第四章 操练-常用样式组件的设计与开发

22 常用样式组件的设计与开发

23 Search搜索框样式的设计与开发

24 List列表样式的设计与开发

25 Grid网格样式的设计与开发

26 Menu菜单样式的设计与开发

27 Modal模态框样式的设计与开发

28 Loading加载提示样式的设计与开发

29 Toast提示工具的样式与开发

30 ActionSheet弹出式菜单组件的设计与开发

31 Article文本样式的设计与开发

32 本章总结

第五章 集结-UI框架的集成

33 UI 框架的集成

34 使用文件形式直接集成

35 使用 npm 形式集成

36 本章总结

第六章 实战-常用页面切图的设计与开发

37 常用页面切图的设计与开发

38 首页的设计与开发

39 列表页的设计与开发

40 文章页的设计与开发

41 个人中心页面的设计与开发

42 结果提示页的设计与开发

43 本章总结

第七章 复盘-知识汇总与课程总结

44 本课程知识点汇总

45 课程总结

-代码结束-