第12章 CSS实例文档格式.docx
《第12章 CSS实例文档格式.docx》由会员分享，可在线阅读，更多相关《第12章 CSS实例文档格式.docx（19页珍藏版）》请在冰点文库上搜索。
4.在if条件语句中可以使用“gt”和“lte”表示“大于”和“小于等于”。
我们看接下来的这个例子。
例12-1条件注释的使用
html>
head>
title>
条件注释<
/title>
/head>
body>
--[ifIE]>
h1>
您正在使用IE浏览器<
/h1>
--[ifIE5]>
版本5<
--[ifIE5.0]>
版本5.0<
--[ifIE5.5]>
版本5.5<
--[ifIE6]>
版本6<
--[ifIE7]>
版本7<
/body>
/html>
该例在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语句<
styletype="
text/css"
>
#content1{
border:
1pxsolid#F00;
width:
150px;
margin:
2px;
}
#content2{
130px!
important;
}
/style>
divid="
content1"
content1的内容。
/div>
content2"
content2的内容。
该例在IE浏览器和FF浏览器下的运行结果分别如图12-2，图12-3。
我们看到由于IE浏览器不识别!
important语句，对于id为“content2”的元素显示宽度依然为150px。
因此，凭借此差异可以分别定义适用于两种浏览器的CSS样式。
图12-2IE浏览器显示效果
图12-3FF浏览器显示效果
12.1.3子对象选择符和相邻选择符
子对象选择符和相邻选择符同样由于IE浏览器不能识别，也可以用来分别定义两种浏览器下的CSS样式。
例12-3和例12-4分别使用了子对象选择符和相邻选择符来同样实现例12-2的内容。
例12-3子对象选择符的使用
子元素选择符<
#content1,#content2{
130px;
例12-4相邻选择符
相邻选择符<
#content1+#content2{
例12-3和例12-4在IE浏览器和FF浏览器下显示结果均与图12-2和图12-3一致。
12.2CSS实例
12.2.1选项卡效果
在浏览网页时，我们经常会看到呈现为选项卡效果的菜单，如图12-4。
图12-4选项卡效果的菜单
实现选项卡的方法有很多，效果也不尽相同，但是很多在IE浏览器下和FF浏览器下显示的效果有细微差别。
接下来我们仅以最简单的方法来实现选项卡效果，并要求在IE和FF浏览器下外观一致，以此来学习某些细节的处理。
本例实现的基本思路是让当前选定的选项卡和内容区域的边框颜色一致并紧紧贴在一起。
实现这一效果只需要让内容区域的“margin-top”属性为“0”就可以了，但是仅仅是这样在FF浏览器下浏览就会有些瑕疵，如图12-5所示。
图12-5margin-top在FF浏览器下的效果
出现这一问题的原因是由于IE浏览器与FF浏览器在盒状（Box）模型这一问题上的解释有差异所导致。
因此我们可以凭借上节学习的内容分别定义IE浏览器和FF浏览器下的效果。
例12-5选项卡效果
选项卡效果<
#menu{width:
250px;
}/*放置窗口宽度较窄时选项页换行显示*/
#menua{
background:
#FC9;
text-decoration:
none;
#menua:
hover,#menu.current{
#F60;
#content{
1pxsolid#F60;
margin-top:
-1px!
/*该语句FF浏览器能够识别，通过优先级提高覆盖后边的设置*/
0px;
menu"
ahref="
#"
class="
current"
第一章<
/a>
第二章<
第三章<
第四章<
content"
当前是第一章的内容。
12.2.2缩放菜单
缩放菜单也是一种常见的菜单形式，本例将要实现一个简单的缩放菜单，如图12-6。
图12-6缩放菜单
实现本例的思路是点击主菜单项后，能够使其对应的子菜单收起或展开。
本例的关键点是：
一、子菜单缩放效果的实现；
二、点击主菜单项，如何获取其相对应的子菜单。
我们学习CSS属性的时候接触过可以使网页元素隐藏的属性，如“display”和“visibility”，在这里要使用“display”属性来实现菜单的缩放效果，因为“display”属性和“visibility”属性都可以实现元素的隐藏效果，但是“visibility”属性值为“hidden”时，尽管元素不可见，但是元素所在的区域依然保留。
对于本例如果使用“visibility”属性实现，那么点击“音乐”菜单项后呈现的效果将如图12-7所示，这显然不是缩放菜单的效果，因此要使用“display”属性控制菜单项的缩放。
图12-7使用visibility控制菜单项的显示隐藏
对于第二个关键点，解决的办法也有很多，本例中的办法是将一组子菜单项放置在一个<
div>
元素内，点击主菜单项时将<
元素的引用传递给缩放菜单的方法。
例12-6缩放菜单
可缩放菜单<
.mca,.sc1a,.sc2a{
display:
block;
80px;
padding:
2px0px2px10px;
#F90;
color:
#000;
border-bottom:
1pxsolid#DDD;
.sc1a,.sc2a{
#FC6;
text-indent:
20px;
/*使子菜单缩进一些，以使层次分明*/
.mca:
hover,.sc1a:
hover,.sc2a:
hover{
#EEE;
/*鼠标移入菜单项，变换菜单项的背景色*/
scripttype="
text/javascript"
--
functionToggleMenu（cls）{
varchild=document.getElementById（cls）;
/*获得子菜单div元素*/
if（child.style.display=="
none"
）/*判断该元素display属性值*/
child.style.display='
block'
;
else
none'
-->
/script>
divclass="
mc"
javascript:
ToggleMenu（'
sub1'
）"
音乐<
sub1"
sc1"
"
古典<
流行<
爵士<
sub2'
电影<
sub2"
sc2"
喜剧片<
战争片<
12.2.3下拉菜单
下拉菜单是更为常用的菜单形式，有了前面实现缩放菜单的基础，实现下拉菜单的也就容易了很多。
主要就是将主菜单的点击事件更换为鼠标事件来控制子菜单的显示与隐藏，我们在例12-6的基础上修改成为下拉菜单，运行结果如图12-8。
例12-7下拉菜单
下拉菜单<
.menu1{float:
left;
.mc,.sc1a,.sc2a{
text-align:
center;
1pxsolid#eee;
.sc1a:
#sub1,#sub2{display:
functionToggleMenu（cls,val）{
document.getElementById（cls）.style.display=val;
menu1"
onmouseover="
'
onmouseout="
图12-8下拉菜单
12.2.4可放大的图片缩略图
图片缩略图是较为常用的图片展示形式。
本例将要实现的效果是在网页上首先排列展示图片的缩略图，当鼠标放到某个图片的缩略图上，会显示相应图片的放大效果。
我们分析实现该例的关键点，实际上与我们前面介绍的下拉菜单的实现有些类似，将每个图片的实际效果图做为一个隐藏的元素，然后将缩略图绑定鼠标移入移出事件以控制实际效果图是否显示。
但是对于本例，我们可以仅使用伪类来实现，而不必使用JavaScript函数。
我们知道对于<
A>
元素，伪类“:
hover”能够区别鼠标移入移出两种状态，因此我们可以使用“:
hover”定义两种图片的缩略图的样式。
那么缩略图的样式如何影响到实际效果图的显示与隐藏呢？
那显然可以将实际效果图作为缩略图的子元素。
然后使用包含选择符定义实际效果图的显示与隐藏。
用文字描述就是：
缩略图实际效果图｛隐藏｝
缩略图:
hover实际效果图｛显示｝
根据上述实现思路，该例代码如例12-8。
例12-8图像缩略图
可放大的缩略图<
.thumbnail{
position:
relative;
z-index:
0;
.thumbnail:
#FAA;
1;
.thumbnaildiv{
absolute;
#AAA;
5px;
visibility:
hidden;
.thumbnaildivimg{
border-width:
2px;
hoverdiv{
visible;
top:
left:
40px;
-->
aclass="
thumbnail"
href="
imgsrc="
thumbnail1.jpg"
width="
50px"
height="
36px"
border="
0"
#t"
thumbnail2.jpg"
图12-9可放大的图像缩略图
当然我们还可以在此效果基础上进一步美化、完善，比如在实际效果图所在元素内添加图片的说明文字等。
本例仅就实现方法介绍到这里。
本章小结
本章先介绍了几个小技巧用于解决部分CSS属性在IE浏览器和FF浏览器下显示不一致的问题，接着介绍了几个简单的运用CSS技术实现特效的例子。
当前，实际上我们在浏览网页的时候经常接触到的更为特别的效果，比如元素能够拖动以改变页面布局、进度条控件效果、即时输入提示等等，更多要借助到JavaScript语言、XMLHttpRequest对象来实现。
前面我们介绍过，我们将这几种技术综合称为Ajax技术。
因此，我们说学习CSS技术是基础，要提升到更高的一个层次就难免要面对多种技术的结合使用，即学习掌握Ajax技术。
升级会员 