CSS教程之CSS手艺分离图象完成静态效果的菜单导航

当遇到几个选择器共享一个声明的时候，可以分组放在一起，每个选择器必须以逗号隔开。例：h1,h2,h3,h4{colorred;}选择器分组时要将每个选择器路径写全，分组结尾不能有逗号。
　　CSS手艺分离图象完成静态效果的菜单导航
　　本文先容一些我们常常利用但很少存眷的器材，鄙人面的叙说中我们假定你的CSS利用的是@import手艺，由于这里CSS大概会让你对Opera4得到信念。假如你把图象作为你的页面结构的一部分，在CSS的把持之下嵌进图象极可能是你不但愿失掉的了局假如你利用的是一个不撑持CSS2尺度的扫瞄器比方Opera4。上面先容一个例子，利用一些GIF图象往润色圆角。
　　现实上我不想在网页的HTML代码中嵌进图象，由于它们代表的只是视觉上的器材，而不是内容上的表现，因而我将它们和别的一些有代表性的部分放在CSS之下把持。这个办法将使你加倍便利地把持页面，让其变得加倍大度。为了做出围绕的效果，我使用了CSS背景图象:利用这些背景图象的目标是要更好地顺应CSS的结构，我们将这些图象嵌进层的背景中。
　　在这里你能够瞥见我是如何界说图片的巨细的(19px*37px)，并且在每一个图片的末了有响应的背景图象。然后将这两幅图片安排在事后断定好了的线性工具里边。固然良多这些道理都是能够反复利用的，因而你最初的CSS代码不必要很年夜。这个办法的独一弱点就是它不克不及用来调剂静态的图片的巨细，假如你的层比图象小的话，它将被疏忽，假如你的层比图象年夜的话，它将重复被填进空缺区。可是你很有大概就是不但愿图象在运作中的任何地位都能被发觉到。
　　CSS静态图象手艺
　　给CSS文本菜单付与静态的手艺，比方网页的左边菜单，这类菜单如今被愈来愈多的人所喜好。可是我不以为我已经瞥见过这类手艺:一个地道利用CSS来完成这一效果的手艺。它让菜单具有图象转换功效，这里的成绩就是我们用纯CSS往完成这一效果。上面利用两个步骤下世完成菜单的图象变更手艺。第一步仅仅变化背景色彩;第二步，就是准确的扭转多维图象。(告诫:这门手艺的弱点就是个中一些手艺不克不及与Opera6一同利用，固然他们在Opera7中是一种很好的手艺。)
　　变更背景图象1
　　假如这是一幅通明的背景图象，那我们就能够十分简单地利用选择器改动其背景致。在本例中图象被嵌进在HTML资本中，这就意味着在不撑持CSS2尺度的扫瞄器中它也会显现(除文本扫瞄器!).其代码将比上面的例子庞大，但它能在我实验的一切扫瞄器中运作。要注重的是在完成效果的过程当中一次仅能下载一张图象。
　　变更背景图象2
　　这个版原形对版本1长短常复杂的。其图象是CSS背景图象，因而不撑持CSS2尺度的扫瞄器中不会显现出来:可是我们供应了一个可选择的文本链接，这是一个被减少了的例子。
　　扭转按钮1
　　如今针对不必要JS剧本言语举行支持的扭转图象报告一些新的办法，第一种办法是利用背景图,使用a:hover特征，当指针指向图象时改动背景图,因而假如封闭了CSS的话图象就不会显现,同时我们还能够取得可选择的文本链接.该办法撑持IE6,Netscape7,MozillaandOpera7,但不撑持Opera6.第三类按钮形态能够经由过程类似办法:活泼选择器来传给图象。读者能够把这类办法看成是实习做一做。
　　扭转按钮1a
　　这是个分歧于按钮1的按扭.我们再次利用一幅CSS背景图,可是不是利用一个扭转选择来加载一幅新的图象给按钮的别的形态,我们利用CSS来改动现有图象的地位.如许利用假如图象太年夜,则背景图象被修剪.因而我们的按钮是独自的图象包括两种按钮形态.一般显现上半部图象,可是当按钮扭转图象则交换显现下半部.因而这是完全的图象.利用这类办法这里有两种上风.起首,假如会见按钮时为了削减下载数据数目-仅下载一幅图象带替两幅-因而这是更快的.其次,在第一次会见时没有提早往守候下载第二幅图象:它已在这了.不需预载庞大的图象。倒霉方面就是假如按钮不被会见,则一些位带宽被华侈了,这些是在利用时的看法,对按钮1,HTML和CSS也是云云.次要的差别在:扭转选择。
　　结转按钮2
　　以下,另外一路子完成CSS扭转图象为利用图象的Z索引特征,Z索引把持显现哪一个元素在最顶层.不幸的是,它不撑持IE6或Opera6.Opera7,Mozilla和Netscape7能事情,可是在这类情形下Mozilla是云云的慢,在CSS2扫瞄器扭转不事情,仅顶层图象显现一般.在非CSS2扫瞄器顶层和扭转图象并排显现,看起来是乖僻的.InternetExplorer的事情区包括一个小处置程序,假如图象背景致改动了,则Z索引也改动,InternetExplorer取得变更举行相干事情.菲利一般过改动三原色值改动色彩(比方将#ffffff改成#fffffe)云云很小的改动效果都是明显的。
　　新版网页陶吧上线

</p>
凡是和我讨论客户段效率的全是脑子有问题的，影响的全是图片和Flash，所以我一直建议一个提交按钮就不要用图片带代替了。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。