CSS网页设计标准教程.ppt

网页设计标准教程 制作：薄静仪 * * 第十章 应用spry制作高级网页组件 10.1 Tab菜单与Tab面板简介 总的来说，网上的Tab面板和菜单分为两种： 1）切换各个Tab页中的内容时并不刷新浏览器窗口，说明各个页中的内容已经装载到页面上了，只是被隐藏起来，只有被选中的Tab页内容才会显示。例如：(Tab面板) 2）切换各个Tab页中的内容时，会刷新浏览器窗口，实际上就是更换了一个新的html页面。例如：（Tab菜单） 10.2 Tab菜单（浏览器刷新） 实例的最终效果如图： 操作过程： 1）搭建html结构 首先跟所有的菜单一样建立相应的项目列表。所不同的是，因为有多个页面，所以需要给每个项目都定义一个css类型，并为body标记分配各自的id。 具体代码如下： body id=home ul id=tabnav li class=homea href=home.htmHome/a/li li class=deva href=dev.htmWeb Dev/a/li li class=designa href=design.htmWeb Design/a/li li class=mapa href=map.htmMap/a/li /ul div id=content ul id=list li1. There are some good news./li li2. Not only good news./li li3. The text here are examples./li li4. Not only good news./li li5. The text here are examples/li /ul /div /body 2）在外部的css文件中定义各个属性。首先定义content： #content{ border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */ border-bottom:1px solid #11a3ff; /* 下边框 */ padding:5px; font-size:12px; } 3）设置Tab的样式 隐藏项目符号，添加下边框，用来当作正文内容的上边框。代码如下： ul#tabnav{ list-style-type:none; margin:0px; padding-left:0px; * 左侧无空隙 */ padding-bottom:23px; border-bottom:1px solid #11a3ff; /* 菜单的下边框 */ font:bold 12px verdana, arial;} 4）设置li标记，将所有的列表项水平排列。 ul#tabnav li{ float:left; height:22px; background-color:#a3dbff; margin:0px 3px 0px 0px; border:1px solid #11a3ff;} 5）设置所有超链接的3个伪类别。 ul#tabnav a:link, ul#tabnav a:visited{ display:block; /* 块元素 */ color:#006eb3; text-decoration:none; padding:5px 10px 3px 10px; } ul#tabnav a:hover{ background-color:#006eb3; color:#FFFFFF; } 6）设置当前页的Tab样式 设置当前页面的菜单项，关键在于给当前页面的菜单项添加白色的下边框，从而覆盖了ul标记中设置的蓝色下边框，实现Tab菜单的效果。 body#home li.home, body#dev li.dev, /* 当前页面的菜单项 */ body#design li.design, body#map li.map{ border-bottom:1px solid #FFFFFF; /* 白色下边框，覆盖ul中的蓝色下边框 */ color:#000000; background-color:#FFFFFF; } 7）为当前页面的菜单项添加单独的超链接效果。 10.3 借助于spry实现Tab面板 如果需要一个真正的Tab菜单，需要javascript的配合，开发者必须有js的经验。没有经验的设计师可以借助于DW CS3中新增加的spry功能来方便的实现。 最终效果图： 操作过程如下: 1）建立基本的Tab面板 查看