前端网页设计 教学课件 作者 杜黎强第4次课.ppt

《前端网页设计 教学课件 作者 杜黎强第4次课.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3次课教学回顾第3次课实训任务检查教学导入教学实施知识点讲解任务实施请大家完成本次课课中页：任务3-子任务2实施过程.doc第4次课教学内容及实施环节项目准备：任务3使用CSS样式表修饰HTML网页–子任务2网页对象布局分发本次课所用文件项目准备-任务3–子任务2-任务实施过程.doc项目准备-任务3–子任务2-任务实施总结.doc项目准备-任务4–子任务1-任务实施准备.doc知识点：CSS常用属性CSS格式属性(字体、文本、边框、边界填充、背景、光标)CSS列表属性CSS定位属性CSS滤镜属性CSS格式属性1、字体属性2、颜色和背景属性3、文本属性4、“容器属性”(边距、边框等

2、)5、光标属性1、字体属性小写转换为大写text-decoration:文本修饰(none、underline、overline、line-through、blink)font:字体复合属性，设置字体的所有属性。字体、字形、颜色等，属性值之间用空格隔开2、颜色和背景属性background:背景复合属性，定义元素的各种背景属性。背景颜色、背景图像、背景重复、背景附件、背景位置，各属性值空格隔开3、文本属性4、“容器”属性CSS的容器属性包括边距、边框、填充距和图文混排(宽度、高度、浮动、清除)等属性。※边距属性顺序：上、右、下、左设置四周边距margin※边框属性border复合属性

3、：使四条边框的属性值一样※填充距属性填充距指的是文本边框与文本之间的距离。顺序：上、右、下、左设置四周填充距padding5、光标属性用CSS来改变鼠标光标的属性，(如：鼠标移动到不同的地方时；鼠标需要执行不同的功能时；系统处于不同的状态时等)，让鼠标指针以不同的形状、图案显示。“cursor”属性实现鼠标光标的改变，下图是cursor属性的属性值cursor属性nNeeSesNwwSwCSS列表属性1、列表类型list-style-type2、项目符号图像list-style-image3、列表位置list-style-position4、列表复合属性list-styleCSS列表

4、属性用来定义列表元素的显示效果CSS定位属性CSS定位主要是在页面的布局和控制上进行定义，使页面从这两个方面都展现得非常完美，更加富有动感。分相对定位和绝对定位。定位属性的详细列表空间定位适用绝对定位P196-198注：红色框属性不常使用CSS滤镜属性滤镜属性是CSS属性的扩展，定义网页元素的静态效果(对页面中的文字进行特效处理);滤镜属性的选择符是filter。通用语法格式：filter：filtername（parameters）filtername是滤镜属性名，包括alpha、blur、chroma等14种滤镜属性；parameters是表示各个滤镜属性的参数，也正是这些参数决

5、定了滤镜将以怎样的效果显示。发光颠倒滤镜属性列表色彩浓度模糊面具任务实施：网页对象布局——图文混排根据本次课复习的知识点内容，按下列网页样例，做出相同效果页面布局图像、文本素材可以自定义课后作业完成第4次课任务3-子任务2实施总结和第5次课任务4-子任务1实施准备上传:FTP://192.168.60.1/up/第2周作业注意：作业文件夹一定要按命名规则命名