TP07(CSS样式表).pptVIP

Chapter 第七章 回顾与作业点评 方框属性有哪些 ？各包含哪些属性？ float属性的应用场合？有哪些取值？ clear属性的应用场合？有哪些取值？ 有哪几类定位方式？应用场合？ 如何实现绝对定位？ 预习检查 超链接的样式有哪4种状态？ 样式表有哪三类应用方式？ 有哪些典型的局部布局结构？ 本章任务 制作贵美横向主导航条 制作贵美顶部菜单 制作贵美新品上架板块 本章目标 使用div-ul-li实现局部布局 使用div-dl-dt-dd实现图文混编 使用伪类样式控制超链接样式 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 超链接伪类样式 超链接伪类样式 三类应用样式的方式 内部样式表 外部样式表 行内样式 三类应用样式的方式 内部样式表 外部样式表 行内样式 三类应用样式的方式 内部样式表 外部样式表 行内样式表 各类样式有继承 各类样式的优先级 浏览器默认设置 外部样式表文件 内部样式表 行内样式表 ID选择器 类选择器 标签选择器 样式的优先级3-2 “日用百货”链接 样式的优先级3-3 购物车的样式 练习——使用超链接伪类实现导航条 需求说明： 用提供的背景图素材，实现如下导航菜单效果 要求使用外部样式表 div-ul-li结构 共性问题集中讲解 练习——修饰div-ul-li局部布局 需求说明： 重新实现贵美网站的导航菜单 练习——实现贵美对联广告布局 需求说明： 根据提供的素材，重新实现新品上架版块 总结 超链接样式有哪四类状态及对应伪类？ 应用样式有哪三类方式？优先级？ div-ul-li 结构的应用场合？布局注意问题？ div--dl-dt-dd结构的应用场合？布局注意问题？ 作业 本章内容掌握情况 XXX（描述学生对本章内容的掌握情况） 课后作业 必做 教员备课时在此添加内容 选做 教员备课时在此添加内容 提交时间：xxx 提交形式(纸质or电子) 作业情况：XXX（抽查情况） 典型的局部布局结构 div-ul(ol)-li：常用于分类导航或菜单等场合； div-dl-dt-dd：常用于图文混编场合； table-tr-td：常用于图文布局或显示数据的场合； form-table-tr-td：常用于布局表单的场合； HTML标签中，学过哪些典型的块状布局结构？ div-ul-li局部布局的样式修饰2-1 实现思路 布局结构分析 CSS样式分析 布局结构： 1、图文参差并列结构，宜采用div-ul-li实现 2、图标和文字各占一个li 各类样式： 1、小图标：采用背景图偏移 2、右对齐：float浮动 3、超链接：无下划线样式 4、调整文本对齐和间距 div-ul-li局部布局的样式修饰2-2 实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节 演示示例6：制作贵美顶部菜单 如何复用CSS代码 演示示例7：精简CSS代码 .pic1{width:28px;height:26px;background:url(../images/icon.gif) no-repeat;} .pic2{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -28px 0px;} .pic3{width:28px;height:26px;background:url(../images/icon.gif) no-repeat -84px 0px;} .pic4{width:28px;height:26px;background:url(../images/icon.gif) } 大量重复的CSS代码，如何精简？ .抽取重复代码建立类 .pic {//共有的CSS代码;} 应用样式：多个类样式 li class=pic pic1/li 完成时间：25分钟 行高：26px 图标宽度：28px 图标宽度：38px div-dl-dt-dd局部布局样式修饰2-1 实现思路 布局结构分析 CSS样式分析 布局结构： 1、图文混编结构，宜用div-dl-dt-dd结构。 2、dt放图片，dd放文字，dl做结构容器，方便扩展 布局结构： 1、图片和文字一行：采用float 2、文字居中：调整dd宽高与行高 div-dl-dt-dd局部布局样式修饰2-2 实现步骤 先建立HTML标签组织结构 建立CSS样式表，逐一添加各类样式 测试样式细节 演示示例8：制作新品上架 制作新品上架版块样式 小结 基本符号： (空格) ，(逗号) # :（冒号） 组