HTML+CSS网页样式解析.ppt

模块5：HTML+CSS网页样式 任务8 (2)加上背景色，为网页添加红色背景。 style !-- body{ background-color:#bb0102; /* 页面背景颜色 */ margin:0px; padding:0px; } -- /style (3)在添加背景的基础上，设置图片的浮动方式,及图片的边框效果。 style !-- img{ float:left; /* 文字环绕图片 */ border:#FCF dashed 1px; /*图片的边框效果*/ } -- /style 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 (4)在添加背景的基础上，设置图片的浮动方式后，对p标签整体加入CSS语句控制。 style !— p{ color:#FFFF00; /* 文字颜色 */ margin:0px; padding-top:10px; padding-left:5px; padding-right:5px; } -- /style （5）设置首字下沉效果。 style !— span{ float:left; /* 首字放大 */ font-size:85px; font-family:黑体; margin:0px; padding-right:5px; } -- /style (6)将完整的代码保存为31.html。完整的代码参看书152页-153页。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 ○任务评价 学习任务名称： 制作《春节由来》网页 班级： 学号： 姓名： 指导教师： 评价项目 评价标准 评价依据（指信息、佐证） 评价方式 权重 得分小计 总分 自我评价 小组评价 教师（企业）评价 10% 20% 70% 关键能力 1.计算机操作的规范性； 2.能参与小组讨论，相互交流； 3.能积极主动、勤学好问； 4.能清晰、准确表达。 1.课堂表现2.学习任务的完成 40% 专业能力 1.图片浮动设置的方法 2．图片样式的边框颜色、边框粗细、边框样式等基本属性的使用 3.效果图制作是否和教师讲解的一致。 1.课堂表现2.学习任务的完成3.效果图质量 60% 指导教师综合评价 指导教师签名： 日期： 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 ○任务总结 本任务详细讲解了《春节由来》网页的制作，在制作过程中使用到了首字下沉效果的制作方法，图片的边框颜色、边框粗细、边框样式等属性的使用，掌握设置图片浮动设置的方法，理解这些属性在操作步骤中的作用及展示出来效果，结合制作分析，明确这些属性的作用。 ○必备知识 CSS所支持的图片样式主要包含边框颜色、边框粗细、边框样式等基本属性。 学 习 导 入 学 习 目 标 任务1 任务2 任务3 任务4 任务5 任务6 任务7 任务8 任务9 任务10 任务11 任务12 模块5：HTML+CSS网页样式 任务8 属性 描述 可用值 注释 border-width 用于设置元素边框的粗细 thin medium thick length 定义细边框 定义中等边框（默认粗细） 定义粗边框 自定义边框宽度（如1px） border-style 用于设置元素边框的样式 none hidden dotted dashed soild double groove 定义无边 与none相同，对于表，用于解决边框冲突 定义点状边框，在大多数浏览器中显示为实线 定义虚线，在大多数浏览器中显示为实线 定义实线 定义双线，双线的宽等于border-width的值 定义3