前端网页设计杜黎强第4次课幻灯片.ppt

PPT研究院 POWERPOINT ACADEMY * * 尚辅网 / 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 第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、“容器属性”(边距、边框等) 5、光标属性 1、字体属性 小写转换为大写 text-decoration:文本修饰(none、underline、overline、line-through、blink) font:字体复合属性，设置字体的所有属性。字体、字形、颜色等，属性值之间用空格隔开 2、颜色和背景属性 background:背景复合属性，定义元素的各种背景属性。 背景颜色、背景图像、背景重复、背景附件、背景位置，各属性值空格隔开 3、文本属性 4、“容器”属性 CSS的容器属性包括边距、边框、填充距和图文混排(宽度、高度、浮动、清除)等属性。 ※边距属性 顺序：上、右、下、左 设置四周边距 margin ※边框属性 border复合属性：使四条边框的属性值一样 ※填充距属性 填充距指的是文本边框与文本之间的距离。 顺序：上、右、下、左 设置四周填充距 padding 5、光标属性 用CSS来改变鼠标光标的属性，(如：鼠标移动到不同的地方时；鼠标需要执行不同的功能时；系统处于不同的状态时等)，让鼠标指针以不同的形状、图案显示。 “cursor”属性实现鼠标光标的改变，下图是cursor属性的属性值 cursor 属性 n Ne e Se s Nw w Sw CSS列表属性 1、列表类型list-style-type 2、项目符号图像list-style-image 3、列表位置list-style-position 4、列表复合属性list-style CSS列表属性用来定义列表元素的显示效果 CSS定位属性 CSS定位主要是在页面的布局和控制上进行定义，使页面从这两个方面都展现得非常完美，更加富有动感。 分相对定位和绝对定位。 定位属性的详细列表 空间定位 适用绝对定位 P196-198 注：红色框属性不常使用 CSS滤镜属性 滤镜属性是CSS属性的扩展，定义网页元素的静态效果(对页面中的文字进行特效处理);滤镜属性的选择符是filter。 通用语法格式： filter：filtername（parameters） filtername是滤镜属性名，包括alpha、blur、chroma等14种滤镜属性； parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。 发光 颠倒 滤镜属性列表 色彩浓度 模糊 面具 任务实施：网页对象布局——图文混排 根据本次课复习的知识点内容，按下列网页样例，做出相同效果页面布局 图像、文本素材可以自定义 课后作业 完成第4次课任务3-子任务2实施总结和第5次课任务4-子任务1实施准备 上传: FTP:///up/ 第2周作业 注意：作业文件夹一定要按命名规则命名 馋死 * *