当前位置：首页 -> 网页设计 -> HTML/CSS -> 巧用CSS的Border属性制作特效菜单

巧用CSS的Border属性制作特效菜单

时间： 2021-07-31 作者：daque

很多运用软硬件的主菜单都具备如许的功效，常常是暗色的，一旦鼠标移到菜单上，登时变光亮；鼠标不在菜单上时是平面包车型的士，一旦鼠标移到菜单上，菜单条登时变为立体，进而巩固了菜单的功效。你能否也想使网页中的导航菜单爆发这种诱人的功效？　　上头这种菜单功效的创造思绪是如许的：运用css属性不妨动静变换的特性，咱们先设置两组css，一组是鼠标不在菜单上的css，另一组是鼠标在菜单上用的css。再在onmouseover和onmouseout事变中辨别挪用各别的css就能实行本例的功效了。底下讲简直的创造本领：　　1、先作一个1*4的表格，在表格中填入菜单称呼并树立好链接；　　2、为了使菜单爆发立体功效，本质上只有把菜单的上边框线和左边框树立为白色，右边框线和下边框线树立为玄色，就能爆发立体功效了。在dreamweaver3中按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主菜单那么，当鼠标在菜单项上时，爆发凹下来的功效。

巧用CSS的Border属性制作特效菜单

相关推荐

推荐下载

热门阅览

最新排行