仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 663|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来一发用CSS制造埋没菜单

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:22:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
  简便的埋没垂直菜单在hover时将内容睁开。如许的效果在JS里有良多个版本,但这个能够说是独一无二的CSS版本。此菜单能够在IE5.5,IE6,IE7,FF,Opera,NS8和MacFF1.5和Safari里一般显现,固然MacIE5.X里大概会有些成绩。
CSS代码
  1. 以下是援用片断:/*共用款式*/.menu{font-family:verdana,sans-serif;position:relative;font-family:tahoma,geneva,"lucidasansunicode","lucidagrande",verdana,sans-serif;margin-bottom:220px;}.menuul{padding:0;margin:0;list-style-type:none;}.menuulli{position:relative;float:left;}.menuullia,.menuullia:visited{display:block;text-decoration:none;width:25px;height:100px;font-weight:bold;background:transparenturl(../../updata/tab.gif)toprightno-repeat;text-indent:-999px;}.menuulliul{visibility:hidden;position:absolute;width:190px;top:0;left:0;border:1pxsolid#444;}table{margin:0;padding:0;border:0;border-collapse:collapse;font-size:1em;}/*非IE扫瞄器公用*/.menuulli:hovera{color:#fff;width:215px;}.menuulli:hoverul{visibility:visible;}.menuulli:hoverullia{display:block;background:#eee;border:0;margin:0;text-indent:0;color:#333;font-weight:normal;font-size:0.9em;height:auto;line-height:1em;padding:5px;width:180px;text-align:left;}.menuulli:hoverullia:hover{background:#888;color:#fff;}假如是要撑持IE6则要加上:.menuullia:hover{width:215px;}.menuullia:hoverul{visibility:visible;}.menuullia:hoverullia{display:block;background:#eee;border:0;margin:0;text-indent:0;color:#333;font-weight:normal;font-size:0.9em;height:auto;line-height:1em;padding:5px;width:190px;w/idth:180px;text-align:left;}.menuullia:hoverullia:hover{background:#888;color:#fff;}
复制代码
失效的XHTML代码
  1. 以下是援用片断:<divclass="menu"><ul><li><aclass="drop"href="../menu/index.html">MENU<!--[ifIE7]><!--></a><!--<![endif]--><table><tr><td><ul><li><ahref="../menu/zero_dollars.html"title="Thezerodollaradspage">zerodollarsadvertisingpage</a></li><li><ahref="../menu/embed.html"title="Wrappingtextaroundimages">wrappingtextaroundimages</a></li><li><ahref="../menu/form.html"title="Stylingforms">styledform</a></li><li><ahref="../menu/nodots.html"title="Removingactive/focusborders">activefocus</a></li><li><ahref="../menu/shadow_boxing.html"title="Multi-positiondropshadow">shadowboxing</a></li><li><ahref="../menu/old_master.html"title="ImageMapfordetailedinformation">imagemapfordetailedinformation</a></li><li><ahref="../menu/bodies.html"title="funwithbackgroundimages">funwithbackgroundimages</a></li><li><ahref="../menu/fade_scroll.html"title="fade-outscrolling">fadescrolling</a></li><li><ahref="../menu/em_images.html"title="emsizeimagescompared">emimagesizescompared</a></li></ul></td></tr></table><!--[iflteIE6]></a><![endif]--></li></ul></div>
复制代码
</p>
层叠样式表(CascadingStyleSheets)的缩写,用于定义HTML元素的显示形式,是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
谁可相欹 该用户已被删除
沙发
发表于 2015-1-18 06:20:12 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
活着的死人 该用户已被删除
板凳
发表于 2015-1-25 18:22:45 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
海妖 该用户已被删除
地板
发表于 2015-2-3 14:31:42 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
分手快乐 该用户已被删除
5#
发表于 2015-2-9 04:16:14 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
爱飞 该用户已被删除
6#
发表于 2015-2-26 22:21:05 | 只看该作者
只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
变相怪杰 该用户已被删除
7#
发表于 2015-3-8 18:55:43 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
透明 该用户已被删除
8#
发表于 2015-3-16 12:46:50 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
再现理想 该用户已被删除
9#
发表于 2015-3-22 23:18:35 | 只看该作者
以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表