繁體中文当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 巧用CSS的Border属性制作特效菜单
- HTML/XHTML教程
- ie7打开页面有源文件但页面空白问题的解决方法
- firefox支持webdings字体的方法
- HTML 相对路径和绝对路径区别分析
- ie6 失真问题
- 关闭IE启用图片工具列
- HTML5 Canvas 起步(1) - 基本概念
- 网页表单元素Input的高级用法11例
- 漂亮样式表在XHTML+CSS网页制作中的应用
- html ReadOnly 和 Enabled 区别
- 如何正确地在XHTML文档中使用JavaScript和CSS
- IE6 为什么最多人使用
- 给网站添加 favicon的技巧 网址前面的小图标
- 什么是 WML？
- WML 标签汇总
- HTML相对路径 上级目录及下级目录的写法
- html 自定义标签使用实现方法
- Firefox下英文字母不换行的解决方案
- HTML 文本转义小窍门
- 设置IE8使用IE7的样式的代码
- HTML 标记一定不要忘记关闭
HTML/XHTML教程 中的 巧用CSS的Border属性制作特效菜单
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 89 ::
收藏到网摘: n/a
上面这种菜单效果的制作思路是这样的：利用CSS属性可以动态改变的特点，我们先定义两组CSS，一组是鼠标不在菜单上的CSS，另一组是鼠标在菜单上用的CSS。再在onmouseover和onmouseout事件中分别调用不同的CSS就能实现本例的效果了。下面讲具体的制作方法：
1、先作一个1*4的表格，在表格中填入菜单名称并设置好链接；
2、为了使菜单产生立体效果，实际上只要把菜单的上边框线和左边框设置为白色，右边框线和下边框线设置为黑色，就能产生立体效果了。在3中按F7（或点击快速启动栏里那个象“八卦图”似的图标），调出CSS面板，选择“none”，再点击面板下部的编辑图标，在弹出的“Edit Style Sheet”对话框上按“New”按钮，在弹出的“New Style”对话框中选择“Make Custom Style (class)”后，在下面的“Name”输入框中输入“.menustyle1”(也就是给要定义的class取个名字，注意前面那个小点不要漏了），按OK，立即弹出“Style Definition for menustyle1”对话框，这时就开始定义CSS的“style1”了。在左边的选择窗口中选择“Border”，在右边的面板上定义（也是选择），在“style”属性中选择“solid(实线)”；在“Top”中输入“1”；然后把“Top”“left”的颜色定义为“#FFFFFF”（白色），“bottom”“right”的颜色定义为“#000000”（黑色）。到此，“menustyle1”已全部定义好，按OK返回，在“Edit Style Sheet”对话框上按“Done”按钮结束。我们再用同样的方法定义一个“menustyle2”的CSS，在鼠标移开时用，定义的方法相同，只是在定义边框线颜色时，把四条边框线的颜色取与菜单背景相同的颜色。在这里顺便讲一下，直接把边框线的宽度设置为“0”，也能达到类似的效果，但整个页面要抖动一下，效果不好。
3、为了达到整个菜单条在通常是暗色，鼠标在上面时是明亮色的效果，要设置两个CSS的alpha滤镜，menustyle3和menustyle4，在Dreamweaver中设置CSS滤镜在方法上与一般的CSS设置相同（具体可参看“CSS滤镜”专题），只是“alpha”滤镜的参数较多，其实在这里只要其中的一个参数就行了，我在这里给出CSS代码，直接加在〈head〉和〈/head〉之间也行。CSS全部设置好后，在〈head〉和〈/head〉之间可见到这样的代码：
〈style type="text/css"〉
〈!--
.menustyle1 { border: solid; border-width: 1px 1px 1px 1px; border-color: #FFFFFF #000000 #000000 #FFFFFF}
.menustyle2 {border:solid;border-width:1px;border-color:#ccccff;}
.menustyle3 {filter:alpha(opacity=60)}
.menustyle4 {filter:alpha(opacity=100)}
.
--〉
〈/style〉
4、CSS都做好了，下面开始加载到相应的地方去。我们在源代码中找到第一个菜单项所在的“〈td〉”，在其中加上这样一行代码：onmouseover="this.className='menustyle1'" onmouseout="this.className= 'menustyle2'" class="menustyle2"，这行代码的作用是当鼠标在这个菜单上时，使用menustyle1定义的格式，当鼠标移开时使用menustyle2定义的格式，后面那个class="menustyle2"的作用是当前面两个事件都没有发生时，仍使用menustyle2格式，从而保证了菜单的一致性。对其它菜单项同样也加上这行代码。这样菜单项就能随着鼠标的移动而从立体、平面之间相互转换了。
5、在表格的〈table〉标记中加上这样一行代码：onmouseover="this.className='menustyle4'" onmouseout="this.className='menustyle3'" class="menustyle3"，这行代码的作用与上面类似，只是这里改变的是透明度，从视觉上产生一种明暗程度相互转换的效果。
到此，制作全部结束，按F12看看效果吧！用Dreamweaver3自动生成的CSS代码稍多一点，若对CSS熟悉的话，可直接编写，不是用Dreamweaver的网友，也可以把代码直接加在相应的位置即可。本例旨在抛砖引玉，提出一种方法思路，关键在于灵活应用，就可做出许多特殊效果来，如把菜单项由文本换成图象，效果将大不一样；把边框线的颜色改一下，就可获得象Dreamweaver主菜单那样，当鼠标在菜单项上时，产生凹下去的效果。
评论 (0) All
