IT中国首页

• 网站首页
• 业界动态
• 视频教程
• 在线课堂
• 光盘教程
• 在线交流
• 图书推荐
• 资源下载

　　 许多应用软件的主菜单后具有这样的效果：当鼠标不在菜单上时是平面的，一旦鼠标移动到菜单上，菜单会立即变为立体，移开时又变为平面，从而增强了菜单的效果。

        许多应用软件的主菜单后具有这样的效果：当鼠标不在菜单上时是平面的，一旦鼠标移动到菜单上，菜单会立即变为立体，移开时又变为平面，从而增强了菜单的效果。这种菜单效果可以用Flash制作，要想缩小文件大小，并且适时地更改菜单项目，当然是用Dreamweaver 8中CSS样式制作完成。在Dreamweaver中，为了使菜单产生立体效果，实际上只要把单元格的上边框线和左边框线设置为其背景颜色，右边框线和下边框线设置为黑色，就能产生立体效果了。
        实验过程
         （1）启动Dreamweaver 8，打开已经制作的网页，在要输入菜单项目处插入一个1×11的表格，并且在【属性】面板中设置【填充】为2，【边距】为1，【边框】为0。拖选所有单元格，单击【属性】面板中的【居中对齐】按钮 ，使其所有单元格内所输入的内容均居中显示，其余设置。
 

          （2）单击【属性】面板中的【打开CSS的面板】按钮 打开【CSS样式】面板，单击【新建CSS规则】按钮 ，在弹出的【新建CSS规则】对话框中设置【选择器类型】为类（可应用于任何标签），【定义在】为仅对该文档，【名称】为.bk1。
 

             （3）单击【确定】按钮即可再弹出一个【.bk1的CSS规则定义】对话框。在该对话框中，选择【分类】列表中的【边框】选项，在右边设置【样式】均为实线，【宽度】均为1像素，【颜色】中【上】和【左】为背景颜色#7BB04F，【右】和【下】为#000000。
 

[1] [2] [3] 下一页