第12章 CSS实例.doc

第12章CSS实例课前导读前面，我们已经较为全面地介绍了CSS技术以及与CSS相关的几种技术。应该说CSS技术本身不难理解，运用CSS技术最关键的是经验的积累。本章将以一系列的实例来展示CSS的使用技巧。本章重点在本章我们将重点学习：o 如何解决CSS属性在IE和FF浏览器下显示不一致的问题o 几种菜单效果的实现12.1 CSS兼容问题解决我们在学习CSS基本属性的时候已经了解到，很多CSS属性在IE浏览器和FF浏览器下的显示效果是不同的，这是使用CSS技术最让人头痛的问题之一。实际上很多大型网站通常通过判断访问者浏览器的类型、版本以及分辨率的大小来以不同的页面来响应，这当然是一个安全的解决办法，但是对于大多数的网站来说这有些小题大做了，我们可以使用一些小技巧在一定程度上解决这一问题。12.1.1 条件注释借助于微软的私有属性条件注释，可以针对于IE浏览器单独定义一些样式，而不影响主样式表的定义。条件注释在IE5以上的版本里被支持，但我想对于今天的IE浏览器用户来说这包括了绝大多数，更重要的是即使在不支持这种条件注释的低版本浏览器中也不会出现什么严重问题。条件注释的形式如下： 样式声明需要注意以下几方面的问题：1. 条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而忽略它们。 2. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。 3. 条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。4. 在if条件语句中可以使用“gt”和“lte”表示“大于”和“小于等于”。我们看接下来的这个例子。例12-1 条件注释的使用条件注释您正在使用IE浏览器版本 5版本 5.0版本 5.5版本 6版本 7该例在IE6.0下运行结果如图。而在FF2.0下显示结果为一空白页。因此我们可以利用这一特性，针对IE浏览器做一些设置。图12-1 以条件注释判断浏览器类型12.1.2 !important语句对于IE浏览器和FF浏览器来说，!important语句可以用来指定仅适用与FF浏览器的CSS样式，原因是!important语句IE浏览器不能识别。但是需要注意的是为保证适用于IE浏览器的样式生效，要将其写在后边以覆盖前面的设置。我们观察例12-2。例12-2 !important语句的使用!important语句#content1 border:1px solid #F00; width:150px; margin:2px; #content2 border:1px solid #F00; width:130px !important; width:150px; margin:2px;content1的内容。content2的内容。该例在IE浏览器和FF浏览器下的运行结果分别如图12-2，图12-3。我们看到由于IE浏览器不识别!important语句，对于id为“content2”的元素显示宽度依然为150px。因此，凭借此差异可以分别定义适用于两种浏览器的CSS样式。图12-2 IE浏览器显示效果图12-3 FF浏览器显示效果12.1.3 子对象选择符和相邻选择符子对象选择符和相邻选择符同样由于IE浏览器不能识别，也可以用来分别定义两种浏览器下的CSS样式。例12-3和例12-4分别使用了子对象选择符和相邻选择符来同样实现例12-2的内容。例12-3 子对象选择符的使用子元素选择符#content1,#content2 border:1px solid #F00; width:150px; margin:2px; body#content2 border:1px solid #F00; width:130px; margin:2px;content1的内容。content2的内容。例12-4 相邻选择符相邻选择符#content1,#content2 border:1px solid #F00; width:150px; margin:2px; #content1+#content2 border:1px solid #F00; width:130px; margin:2px;content1的内容。content2的内容。例12-3和例12-4在IE浏览器和FF浏览器下显示结果均与图12-2和图12-3一致。因此，凭借此差异可以分别定义适用于两种浏览器的CSS样式。12.2 CSS实例12.2.1选项卡效果在浏览网页时，我们经常会看到呈现为选项卡效果的菜单，如图12-4。图12-4 选项卡效果的菜单实现选项卡的方法有很多，效果也不尽相同，但是很多在IE浏览器下和FF浏览器下显示的效果有细微差别。接下来我们仅以最简单的方法来实现选项卡效果，并要求在IE和FF浏览器下外观一致，以此来学习某些细节的处理。本例实现的基本思路是让当前选定的选项卡和内容区域的边框颜色一致并紧紧贴在一起。实现这一效果只需要让内容区域的“margin-top”属性为“0”就可以了，但是仅仅是这样在FF浏览器下浏览就会有些瑕疵，如图12-5所示。图12-5 margin-top在FF浏览器下的效果出现这一问题的原因是由于IE浏览器与FF浏览器在盒状（Box）模型这一问题上的解释有差异所导致。因此我们可以凭借上节学习的内容分别定义IE浏览器和FF浏览器下的效果。例12-5 选项卡效果选项卡效果#menuwidth:250px;/*放置窗口宽度较窄时选项页换行显示*/#menu a background:#FC9; text-decoration:none; #menu a:hover,#menu .current background:#F60; #content border:2px solid #F60; margin-top:-1px!important;/*该语句FF浏览器能够识别，通过优先级提高覆盖后边的设置*/ margin-top:0px; width:250px; 第一章第二章第三章第四章当前是第一章的内容。12.2.2 缩放菜单缩放菜单也是一种常见的菜单形式，本例将要实现一个简单的缩放菜单，如图12-6。图12-6 缩放菜单实现本例的思路是点击主菜单项后，能够使其对应的子菜单收起或展开。本例的关键点是：一、子菜单缩放效果的实现；二、点击主菜单项，如何获取其相对应的子菜单。我们学习CSS属性的时候接触过可以使网页元素隐藏的属性，如“display”和“visibility”，在这里要使用“display”属性来实现菜单的缩放效果，因为“display”属性和“visibility”属性都可以实现元素的隐藏效果，但是“visibility”属性值为“hidden”时，尽管元素不可见，但是元素所在的区域依然保留。对于本例如果使用“visibility”属性实现，那么点击“音乐”菜单项后呈现的效果将如图12-7所示，这显然不是缩放菜单的效果，因此要使用“display”属性控制菜单项的缩放。图12-7 使用visibility控制菜单项的显示隐藏对于第二个关键点，解决的办法也有很多，本例中的办法是将一组子菜单项放置在一个元素内，点击主菜单项时将元素的引用传递给缩放菜单的方法。例12-6 缩放菜单可缩放菜单.mc a,.sc1 a,.sc2 a display:block; width:80px; text-decoration:none; padding:2px 0px 2px 10px; background:#F90; color:#000; border-bottom:1px solid #DDD; .sc1 a,.sc2 a background:#FC6; text-indent:20px;/*使子菜单缩进一些，以使层次分明*/ .mc a:hover,.sc1 a:hover,.sc2 a:hover background:#EEE;/*鼠标移入菜单项，变换菜单项的背景色*/ 音乐古典流行爵士电影喜剧片战争片12.2.3 下拉菜单下拉菜单是更为常用的菜单形式，有了前面实现缩放菜单的基础，实现下拉菜单的也就容易了很多。主要就是将主菜单的点击事件更换为鼠标事件来控制子菜单的显示与隐藏，我们在例12-6的基础上修改成为下拉菜单，运行结果如图12-8。例12-7 下拉菜单下拉菜单.menu1float:left;.mc,.sc1 a,.sc2 a text-align:center; display:block; width:80px; text-decoration:none; padding:2px 0px 2px 10px; background:#F90; color:#000; border:1px solid #eee; .sc1 a,.sc2 a background:#FC6; .sc1 a:hover,.sc2 a:hover background:#EEE;/*鼠标移入菜单项，变换菜单项的背景色*/ #sub1,#sub2display:none;音乐古典流行爵士电影喜剧片战争片图12-8 下拉菜单12.2.4 可放大的图片缩略图图片缩略图是较为常用的图片展示形式。本例将要实现的效果是在网页上首先排列展示图片的缩略图，当鼠标放到某个图片的缩略图上，会显示相应图片的放大效果。我们分析实现该例的关键点，实际上与我们前面介绍的下拉菜单的实现有些类似，将每个图片的实际效果图做为一个隐藏的元素，然后将缩略图绑定鼠标移入移出事件以控制实际效果图是否显示。但是对于本例，我们可以仅使用伪类来实现，而不必使用JavaScript函数。我们知道对于元素，伪类“:hover”能够区别鼠标移入移出两种状态，因此我们可以使用“:hover”定义两种图片的缩略图的样式。那么缩略图的样式如何影响到实际效果图的显示与隐藏呢？那显然可以将实际效果图作为缩略图的子元素。然后使用包含选择符定义实际效果图的显示与隐藏。用文字描述就是：缩略图 实际效果图隐藏缩略图:hover 实际效果图显示根据上述实现思路，该例代码如例12-8。例12-8 图像缩略图可放大的缩略图图12-9 可放大的图像缩略图当然我们还可以在此效果基础上进一步美化、完善，比如在实际效果图所在元素内添加图片的说明文字等。本例仅就实现方法介绍到这里。本章小结本章先介绍了几个小技巧用于解决部分CSS属性在IE浏览器