编 写：晋 哲 时 间：2015-10-29 说 明：文章底部附实例练习文件的下载地址 > 前端培训步骤 一、前端规范文档的了解 请查看geek上的规范文档 《HTML编码规范》http://blog.geekman.vip/archives/353 《CSS编码规范》http://blog.geekman.vip/archives/352 二、基础HTML结构编写 了解常用标签，结构布局。 请查看geek上的《DIV+CSS布局》http://blog.geekman.vip/archives/426 三、手机页面常用CSS样式属性 了解常用样式属性，请查看文章底部的《页面常用样式属性》 可以对应w3school上的解说快速了解 四、PS切图工具的基本使用 请查看geek上的操作文档 《Photoshop基本切图操作文档》http://blog.geekman.vip/archives/476 《CSS Sprites》http://blog.geekman.vip/archives/497 五、手机页面实例练习 按顺序练习Demo1-4，从简到繁。 六、审核页面、疑问解答 1、审查元素，调试页面 2、与后端配合须知 到此步基本可以实现简单页面的编写。先示范讲解，再自己练习。 之后是丰富知识和熟练程度，需自己学习了解、实例练习。 七、手机端常用的简单Js或jQuery网页动态交互效果 结合Demo5中的交互效果，熟悉jQuery的常用交互效果 八、手机端常用的CSS3新属性 结合Demo6了解CSS3的过渡、动画属性用法，再对应w3school上的解说进行详细了解 九、强化实例练习，理解、解决遇到的实际问题 十、阅读《公司前端项目规范文档》 geek地址：http://blog.geekman.vip/archives/495 -----------------------分割线----------------------- > 文件说明（具体内容见底部附件） 一、手机页面固定HMTL框架、PS切图练习源文件 简单了解HTML页面的组成，编写环境；通过对“每日新衣首页”页面的解析，了解页面整体框架。 二、Demo1_HTML简单局部 通过编写简单的登录页面，练习HTML代码架构，以及简单标签的使用。 三、Demo2_CSS基础样式运用 该练习初步涉及到CSS样式设置定位布局和浮动布局，以及间距、颜色等基础样式的运用。 四、Demo3_深入定位布局、背景图片 定位布局的灵活嵌套运用，强化浮动布局和盒模型设置，以及图片的运用，区别<img>标签图片和背景图片的设置 五、Demo4_切图操作、强化布局 稍复杂布局结构，开始PS切图练习，以及Sprite图合并与使用 六、Demo5_交互效果、完整练习（分两步） 1、弹窗页面的编写 通过练习了解页面固定定位、弹窗蒙层设置、预留Class设置交互效果，了解Js基础交互效果实现。 2、详情页整体页面练习 全局架构，简单的Js交互效果编写，如切换效果、显示隐藏效果、滑动效果等。 七、Demo6-CSS3动画效果介绍 了解常用的CSS3属性，以及实现效果练习。 -----------------------分割线----------------------- > 页面常用样式属性 通过www.w3school.com.cn了解以下属性，即可应对日常样式调整。 一、布局 1、定位：position 2、位置：top / right / bottom / left 3、浮动：float 4、框类型：display 5、溢出：overflow 6、层叠顺序：z-index 二、盒模型 1、边框：border 2、外边距：margin 3、内边距：padding 4、宽度：width 5、高度：height 三、文本排版 1、文本系列： a、字号：font-size b、字体：font-family c、字体粗细：font-weight 2、排版系列： a、行高：line-height b、水平对齐：text-align c、垂直对齐：vertical-align d、缩进：text-indent 四、视觉效果 1、背景系列：background a、背景色：background-color b、背景图片：background-image c、背景平铺方式：background-repeat d、背景图片定位：background-position e、背景图片尺寸：background-size 2、颜色：color a、十六进制值（如：#fff） b、rgba形式值（如：rgb(255,255,255,.9)） 3、圆角边框：border-radius 4、边框阴影：box-shadow
附件：前端实例练习文件下载地址
\\192.168.0.18\运维网络硬盘\y袁亮\p培训\前端培训流程