tab菜单注释模板2.ppt

《网页布局（div+css）》 主讲人：石潇 一、条件注释二、TAB菜单三、模板和库 条件注释来确定IE浏览器版本并进行相关CSS文件调用 注释语句结构： !-- 这儿的内容不显示-- 条件注释结构： !--[if IE]这里是正常的html代码![endif]-- 一、条件注释 注1：条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，不能在CSS文件中使用。 注2：结构和HTML的注释(!– –)是一样 ，所以IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。 注3：IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。 条件注释应用一：判断IE版本 body !--[if IE] h1您正在使用IE浏览器/h1![endif]-- !--[if IE 5.0] h2版本 5.0/h2 ![endif]-- !--[if IE 5.5] h2版本 5.5/h2![endif]-- !--[if IE 6] h2版本 6/h2![endif]-- !--[if IE 7]h2版本 7/h2 ![endif]-- /body 条件注释应用二：判断IE版本2 !–[if?lte?IE?6]……![endif]– Ite：less?than?or?equal?to意思是小于或等于IE6浏览器，常用于CSShack，针对IE的JS等。 lt?：就是Less?than的简写，小于的意思。gte：就是Greater?than?or?equal?to的简写，也就是大于或等于的意思。gt?：就是Greater?than的简写，也就是大于的意思。 !?：不等于 条件注释应用二：判断IE版本2 例：body !--[if lte IE 6] h1您正在使用IE浏览器是小于ie6的版本/h1![endif]-- !--[if gte IE 7] h2您好！你现在使用的浏览器是大于版本 ie7/h2 ![endif]-- /body 条件注释应用三：下拉菜单 1.伪类:hover的使用及BUG 2.解决方法： !–[if?lte?IE?6]tabletrtd![endif]– !–[if?lte?IE?6]/td/tr/table/a![endif]– 条件注释应用四：用于链接不同样式 因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样，具体就是对CSS的解释不同，为了兼容这些，可运用条件注释来各自定义，最终达到兼容的目的 div id=main link type=text/css href=css3.css rel=stylesheet/!--非ie-- !--[if lte IE 6]link href=css1.css“ type=text/css rel=stylesheet/![endif]-- !--[if IE 7]link type=text/css href=css2.css rel=stylesheet/![endif]-- /div 注1：type=text/css是类型说明 ；rel说明是样式表 ；href=“路径” 是引用路径 注2：默认的CSS样式应该位于HTML文档的首行，进行条件注释判断的所有内容必须位于该默认样式之后。 二、tab菜单的应用 CS3中流行的tab菜单的应用 教学要求 (1)根据真实的的案例合理切图 (2)掌握cs3中tab菜单的生成方法 (3)掌握调整css的技巧 CS3中流行的tab菜单的应用 教学重难点 切图技巧 调整css的技巧 CS3中流行的tab菜单的应用 在如今的网页设计中，Tab标签切换的应用已经是非常的广泛，基本在每个网站中都有这样的效果被应用到前台的设计中去，来完成之前无法完成的任务。所以，Tab标签的设计也就成了一个不可小觑的工作流程，在浏览一个网站时，看到了他们的Tab标签制作的导航菜单效果 Tab菜单制作流程 SpryTabbedPanels.css的主要项目 .VT开头的适应于竖直排列的样式 TabbedPanels对整体样式设置，主要是设宽 TabbedPanelsTabGroup选项卡组，主要是设整组 .TabbedPanelsTab设置每一个选项组的样式，如选项卡背景图的更换，可以在其后加子标签 .TabbedPanelsTabHover设置鼠标经过时的样式 .TabbedPanelsTabSelected当前选中的标签样式 .TabbedPanelsContentGroup设置内容面板 关键修改点 .TabbedPanels 中的width: 642px; .TabbedPanelsTab 中的背景图 .TabbedPanelsTab