乐观 发表于 2015-1-16 00:22:31

来一发用CSS制造埋没菜单

在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
  简便的埋没垂直菜单在hover时将内容睁开。如许的效果在JS里有良多个版本,但这个能够说是独一无二的CSS版本。此菜单能够在IE5.5,IE6,IE7,FF,Opera,NS8和MacFF1.5和Safari里一般显现,固然MacIE5.X里大概会有些成绩。
CSS代码

以下是援用片断:/*共用款式*/.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代码

以下是援用片断:<divclass="menu"><ul><li><aclass="drop"href="../menu/index.html">MENU<!--><!--></a><!--<!--><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><!--></a><!--></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

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

分手快乐 发表于 2015-2-9 04:16:14

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。

爱飞 发表于 2015-2-26 22:21:05

只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。

变相怪杰 发表于 2015-3-8 18:55:43

所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.

透明 发表于 2015-3-16 12:46:50

还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

再现理想 发表于 2015-3-22 23:18:35

以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
页: [1]
查看完整版本: 来一发用CSS制造埋没菜单