【2017年整理】模块1 - HTML.pptVIP

* 强调：顺时针赋值 * * 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 商品类目的内容不要求。 * 必须有效果图 * 必须有效果图 * * 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 * 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 * 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 * 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 * 以贵美购物网站为例，提问学员说明需求分析的几项。 主要让学员有如下两点意识： 1、时刻记住：以客户需求为导向 2、做静态Demo是确认客户需求的常用办法 * 强调：顺时针赋值 * 说明本页选用DIV+CSS * * 为了方便控制各块，推荐在外部加上顶级容器container，以便进行统一设置及整体加载 ，中间三块放入main容器块中。 注意此处不用现场演示，通过和学员交互的方式分析思路，展示代码即可，不用现场手写代码 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 2、注意背景色在背景图的后面 * * 分别提问：购物车、帮助中心、登录图标的坐标偏移量是多少？ 强调：页面坐标左上角坐标为（0，0），如背景图左移，即背景图的原点坐标往左移动了，所以左移为负数。同理右移为正数。 * 分别提问：购物车、帮助中心、登录图标的坐标偏移量是多少？ * 2、注意背景色在背景图的后面 * 商品类目的内容不要求。 * * 产品介绍的框架页效果：即点击左边的产品目录，右边显示具体内容。 什么是盒子模型？样式控制思路？ * 盒子模型比较抽象，需要从页面布局类似报纸排版，需划分块，各块可以看做一个一个的盒子，从而引出盒子模型。 内容 ：月饼）。 填充（padding）：泡沫纸。 边框（border）：盒子框。 边界（margin）：月饼盒到大盒子（容器）四周的距离，或者说盒子之间的距离 。 强调：本章只需要对盒模型有个初步认识即可，下一章将会对盒模型进行深入讲解。 * 1）盒内样式修饰 包括字体修饰，背景色及背景图，列表属性等，主要修饰盒子内容。 2）盒子位置布局 包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。 此处讲解思路和5.0课程不同，各类样式的讲解顺序按盒内样式（字体修饰，背景色及背景图，列表属性等），再次为盒子位置布局的样式（包括宽高，定位，浮动，边框，填充，边界等，主要是布局相关属性。），最后才是三种样式表应用方式（内部样式、行内样式、外部样式）。 这样讲的角度全是为了后续的页面布局。 * 强调：顺时针赋值 * 盒子高度 = height属性 + 上下填充高度 + 上下边框高度 答案：20*2+5*2+40=90px * 典型的三行两列布局 * 典型的三行两列布局 * 典型的三行两列布局 * * * 演示：因为IDV都是块级元素，前后换行显示原因，所以会出现两块竖排情形？怎么解决？使用float * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、