18337149582 / fengshunlei@51xueweb.cn 第4讲：静态网站开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12.

Presentation on theme: "18337149582 / fengshunlei@51xueweb.cn 第4讲：静态网站开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12."— Presentation transcript:

1 18337149582 / fengshunlei@51xueweb.cn
第4讲：静态网站开发 冯顺磊 /

2 本讲主要内容 静态开发的几点经验 几个前端插件介绍

3 1.静态开发的几点经验 善用浏览器调试模式

4 1.静态开发的几点经验 尽量合并小图片

5 1.静态开发的几点经验 重置浏览器样式，减少默认 样式可能带来的问题

6 1.静态开发的几点经验 合理的标签使用、清晰的代码结构、良好的注释、语义准确的类名称与ID

7 base.css+common.css+page.css 1.静态开发的几点经验 尽量重用CSS
common则是模块化组件，即将功能相对独立的划分为模块，重复次数多的模块划分为组件，提取到common层，这一层需要尽可能实现封装，对可能经常变化的部分提供灵活的接口 page是页面级别的样式表，提供各页面独有的样式，可以再根据需求细分如page-index.css，page-connect.css

8 1.静态开发的几点经验 尽量不要使用行内样式

9 2、几个前端插件介绍 可视化插件 Echars D3.js

10 2、几个前端插件介绍 Echars 官网：

11 2、几个前端插件介绍 D3.js 官网：

12 2、几个前端插件介绍 多媒体插件 视频播放：VIDEOJS 音乐播放：MPlayer

13 2、几个前端插件介绍 VIDEOJS 官网：

14 2、几个前端插件介绍 Mplayer 官网：

15 2、几个前端插件介绍 在线编辑器： CKEditor UEditor

16 2、几个前端插件介绍 CKEditor 官网：

17 2、几个前端插件介绍 UEditor 官网：

18 2、几个前端插件介绍 字体图标 推荐网址：

19 Thanks.