3 CSS样式表.ppt

* 产品介绍的框架页效果：即点击左边的产品目录，右边显示具体内容。 * 图片添加了边框，文本添加了下划线 * 解释：.nav li a的含义，限定范围 * 强调：顺时针赋值 * 强调：顺时针赋值 * 强调：顺时针赋值 * * 说明重点讲解前两者的样式修饰，后两者的样式美化比较简单。 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属性 * 商品类目的内容不要求。 * 提一下CSS编码规范： 1）代码都小写 2）可以添加注释说明：同C#,单行//，多行/*......*/ * 规定块的样式，一般和DIV标签配对使用 * * 1、font为缩写形式，又细分为font-weight、 font-size、 font-family 2、不断行：指一行内容较多，浏览器默认会换行显示。如设置为不断行，则超过一行时也不断行。例如：本例新闻标题的链接，因从数据库读出，布置新闻标题有多长。为了页面美观起见，可以规定新闻标题不断行，及时超过一行也不换行显示。 行高：line-heigth还有一功能，它规定行高后，可以是本行内容垂直居中。 * 注意font字体样式的缩写形式： font:粗细 大小/行高 字体;” 示例4的相关代码可合并为：“font:12px/28px 宋体;”。 * 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、 background为缩写形式，又细分为background-color等几个子属性 * 1、 background为缩写形式，又细分为background-color等几个子属