Web前端开发项目实训 第4讲:静态网站开发 18337149582/fengshunlei@51xuewebcn 201712
Web前端开发项目实训 第4讲：静态网站开发 冯顺磊 18337149582 / fengshunlei@51xueweb.cn 2017.12 1
2 本讲主要内容 口静态开发的几点经验 口几个前端插件介绍
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 本讲主要内容 静态开发的几点经验 几个前端插件介绍 2
3 1静态开发的几点经验 i回 口善用浏览器调试模式 veeiv Iewrweper" stle'ataple sleet" 的1每 enutren-tncer sergi 6m14“r“at tnt, tros site (i.e. dt+feret .TLa-1) 1t111e 二:物影:我法 e,tm(弄以程名应x自ca E拉合绍:山
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 3 善用浏览器调试模式
4 1静态开发的几点经验 口尽量合并小图片 百度软件中心 提交软件 ri. baidu. com 123456789L★★★★★☆ 是交软件 提交软件 下载下载 a
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 4 尽量合并小图片
5 1静态开发的几点经验 口重置浏览器样式,减少默认 口样式可能带来的问题 户定转售组对同能响,用户可体 注意票元 u,的】eCt,《份 border.collapse: collapse: display:block:
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 5 重置浏览器样式，减少默认 样式可能带来的问题
6 1静态开发的几点经验 口合理的标签使用、清晰的代码结构、良好的注释、语乂准确的类名称与I r mode Text=['顺序攝放',‘单曲循环',随机播放’,‘列表循环’ var player- new MPlayer( t //容器选择器名称 container Selector:.mp //播放列表 songList aver son /专辑图片错误时显示的图片 defaultImg: 'img/mplayer error. png autoPlay: true /播放模式(0-)顺序播放,1->单曲循环,2->随机播放,3->列表循环(默认)) playMode: 0, playList: 0 playSong: 0, 词距离顶部的距离 IrcTopPos: 34 表模板,用{变量名5入模板变量 listFormat:'s{name}s/tdssinger}s/td>/tr>', 音量滑块改变事件名称 1slideEventName: change lefaultvolume: 80
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 6 合理的标签使用、清晰的代码结构、良好的注释、语义准确的类名称与ID
7 1静态开发的几点经验 口尽量重用CsS base. css+common. CSs +page. css base提供最底层的、功能和粒度最小的的通用类样式,可以被所有页面引佣用,力求精简和通用 common则是模块化组件,即将功能相对独立的划分为模块,重复次数多的模块划分为组件,提取到 common层,这一层需要尽可能实现封装,对可能经常变化的部分提供灵活的接口 page是页面级别的样式表,提供各页面独有的样式,可以再根据需求细分如 page-index.css,page- connect. css
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 7 尽量重用CSS base.css+common.css+page.css base提供最底层的、功能和粒度最小的的通用类样式，可以被所有页面引用，力求精简和通用 common则是模块化组件，即将功能相对独立的划分为模块，重复次数多的模块划分为组件，提取到 common层，这一层需要尽可能实现封装，对可能经常变化的部分提供灵活的接口 page是页面级别的样式表，提供各页面独有的样式，可以再根据需求细分如page-index.css，pageconnect.css
8 1静态开发的几点经验 口尽量不要使用行内样式 div>
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 1.静态开发的几点经验 8 尽量不要使用行内样式
9 2、几个前端插件介绍 口可视化插件 Chars 33 Data-Driven documents D3. js
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2、几个前端插件介绍 9 可视化插件 Echars D3.js
10 2、几个前端插件介绍 口 Chars 口官网:htp;/ echarts baidu. com/ 开源免费 功能丰富 社区活跃 多维度数据分析 回由遇量,发 多图表联动造看
河南中医学院 / 阮晓龙 / 13938213680 / http://web.book.51xueweb.cn 2、几个前端插件介绍 10 Echars 官网：http://echarts.baidu.com/