加入收藏 | 设为首页 | 会员中心 | 我要投稿 555手机网 （https://www.555shouji.com/）- 热门手机、手机评测、云手机、手游、5G!
当前位置： 首页 > 趣闻 > 正文

ULTRADEV经典之旅-动态菜单实战

发布时间：2020-03-19 00:06:08 所属栏目：趣闻 来源：本站整理
导读：,ULTRADEV经典之旅-动态菜单实战
第一步： 准备图片　　图片和层―― 准备图片　　这里出现的是在下拉菜单结构中出现的图形：
1图2图images/up/menu1trig.gifimages/over/menu1trig2.gifimages/up/menu2trig.gifimages/over/menu2trig2.gifimages/up/menu3trig.gifimages/over/menu3trig2.gifimages/up/menu4trig.gifimages/over/menu4trig2.gif增加的图片images/menutopper.gifimages/shim.gif　　（1） 在images文件夹下建立两个文件夹分别来存放1图和2图，例如：把文件夹取名为“UP”和“OVER”，“UP”中存放所有的“ 1 图”，“OVER”中存放所有的 “2 图”，这是非常容易定义的。
　　（2） 由于在不同的文件夹，一个转换效果用到的“ 1 图”和 “2 图”可以用同样的文件名，这样是不是可以对这些图片进行管理呢：）
　　举例：　　up/menu1trig.gif（1图） 与 over/menu1trig.gif（2图） 分别位于不同的文件夹下，它们的转换形成了一个动态按钮的效果。我们使用过程的概念是这样的：　　2、图片由白色的 1 图变成蓝色的 2 图。
　　3、如果同时触发一个下拉菜单，那么鼠标移到按钮上去的时候菜单可见，移开则不可见。 在前三个转换效果时，为了达到下拉菜单与按钮的一致性视觉效果，在它们之间都加入了一个小矩形的蓝条，这是通过在下拉菜单的顶行插入背景图片来实现的。
图片和层--建立层和表格　　菜单系统是一共是由6个用标签命名的CSS-P层组成的。
层的名字层的用途：version3对于3.0版本浏览器的用户显示基本的信息。triggers把控制下拉菜单的按钮在在顶端排成一排。menu1第一个下拉菜单。menu2第二个下拉菜单。menu 3第三个下拉菜单。menucloser放置一个几乎与页面等大的透明GIF图用来关闭菜单的层具体说明：层：version3
　这个层放在源代码的最前面，并且在层的设置中属性是隐藏的，这样的话，3.0版本的浏览器可以在它们窗口的顶端看到层中的内容，包括里面的图片和链接，4.0版本的用户将不会看到这个层。　　2、运用插入（ INSERT）菜单或在OBJECT（物件）面板插入一个层，把它定位在左上角，紧贴上边界和靠近左边界的地方；
　　3、如下图 picture 1 所示使用属性面板（Property Inspector ）给层命名并且设置它的属性；
　　4、选择层或按（F11）键激活层对它进行编辑；
　　5、在层内插入一个单行单列的表格，并输入相应的信息，以便3.0版本浏览器的用户可以看到这些内容，例如：您的浏览器版本太旧，无法正常浏览该页！

　层：triggers……
　该层包括2行4列放置页面标题，即用来触发下拉菜单的按钮，该层的属性是可见的。
　　1、运用插入（INSERT）菜单或在OBJECT（物件）面板插入一个层，把它定位在左上角，紧贴上边界和靠近左边界的地方；
　　2、如下图picture 2 所示设置该层的属性。

　　3、如下图 picture 3所示在层内插入一个一行四列的表格。

　　插入原始图片（编辑：555手机网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的优质浏览效果

          Copygight © 2017-2023 https://www.555shouji.com/ All Rights Reserved. 555手机网