设为首页收藏本站
开启辅助访问 切换到窄版

仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云»社区 › 软件教程 Design › Dreamweav(DW) › 来看看：网页殊效之CSS制造的三级下拉菜单 ...
返回列表 发新帖
查看: 802|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来看看：网页殊效之CSS制造的三级下拉菜单

[复制链接]
冷月葬花魂 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 07:39:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
所有的设计第一步就是构思，构思好了。
<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>网页殊效|http://homepage.yesky.com/|---CSS制造的三级菜单</title><styletype="text/css"><!--body{font-family:Arial,Helvetica,sans-serif;font-size:11px;margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;}#menu{background-color:#FEF0E5;filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF,endColorStr=#FEF0E5,gradientType=0);}#nav,#navul{float:left;/*菜单整体程度地位*/clear:right;list-style:none;/*line-height:22px;一级菜单高*//*background:#eee;一切菜单移杰出*//*font-weight:bold;8*/padding:0px;margin:0px;/*border:1pxsolid#ccc;border-right:0px;*/}#navulul{/*border:1pxsolid#ccc;*/border-top:0px;border-right:0px;}#nava{width:120px;display:block;color:#333;text-decoration:none;text-align:left;/*border-right:1pxsolid#CCC;*/padding:3px4px3px7px;}#nava:hover{color:#000;border:1pxsolid#CCC;margin:0px;padding:3px5px3px6px;background-color:#f1f1f1;text-decoration:none;}/*一切a:hover字体款式*/#nava.selected{background:url(flyout_arrow.gif)no-repeatright50%;}/*下拉图标*/#navli{float:none;clear:right;height:22px;width:120px;}#navliulli{float:none;clear:right;height:22px;width:120px;}#navliul{/*二级弹出位*/position:absolute;margin:-22px0px0px119px;padding:0;left:-9999em;width:120px;font-weight:normal;display:block;border:1pxsolid#CCCCCC;background:#fff;}/*二级菜单宽*/#navliula{width:120px;/*二级菜单宽*//*line-height:24px;二级菜单高border:1pxsolid#CCC;*/height:22px;text-align:left;margin:0px;}#navliulul{margin:-22px0px0px120px;border:1pxsolid#CCC;}/*三级弹出位*/#navli:hoverulul,#navli.sfhoverulul{left:-9999em;}#navli:hoverul,#navlili:hoverul,#navli.sfhoverul,#navlili.sfhoverul{left:auto;height:22px;}/*一切弹出菜单主动右边距*/#navli:hover,#navli.sfhover{background:#f1f1f1;height:22px;}/*一切悬浮款式*/--></style><scripttype="text/javascript"><!--//--><![CDATA[//><!--img1=newImage();img1.src="flyout_arrow.gif";sfHover=function(){varsfEls=document.getElementById("nav").getElementsByTagName("LI");for(vari=0;i<sfEls.length;i++){sfEls.onmou搜索引擎优化ver=function(){this.className+="sfhover";}sfEls.onmou搜索引擎优化ut=function(){this.className=this.className.replace(newRegExp("sfhover//b"),"");}}}window.onload=sfHover;//--><!]]></script></head><body><tablewidth="120"border="0"cellspacing="0"cellpadding="0"><tr><tdvalign="top"id="menu"><ulid="nav"><li><ahref="http://homepage.yesky.com"target="_blank"><spanstyle="font-size:9pt">首页</span></a></li><li><ahref="http://homepage.yesky.com/"target="_blank"class="selected"><spanstyle="font-size:9pt">项目需求互助</span></a><spanstyle="font-size:9pt"></span><ul><li><ahref="http://homepage.yesky.com/"class="selected"><spanstyle="font-size:9pt">网站项目</span></a><ul><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">网站项目</span></a><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">整站项目</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">网站剖析筹划</span></a></li><li><ahref="http://homepage.yesky.com/"target="_blank"><spanstyle="font-size:9pt">网页计划制造</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">网站制造与开辟</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">网站Flash动画</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">网站服务器</span></a></li></ul></li><li><ahref="http://homepage.yesky.com/"class="selected"><spanstyle="font-size:9pt">多媒体计划制造</span></a><spanstyle="font-size:9pt"></span><ul><li><ahref="http://homepage.yes</p>
12下一页


你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
background, content, display, filter, border

相关帖子
回复

使用道具 举报

冷月葬花魂 该用户已被删除
沙发
 楼主| 发表于 2015-1-16 07:50:08 | 只看该作者

来看看：网页殊效之CSS制造的三级下拉菜单

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
ky.com/"><spanstyle="font-size:9pt">网站项目</span></a><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">立体计划</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">CAD工程图计划</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">3D建模与动画</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">Flash游戏动画</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">音效及音乐</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">游戏原画设定</span></a></li></ul></li><li><ahref="http://homepage.yesky.com/"class="selected"><spanstyle="font-size:9pt">软件开辟</span></a><spanstyle="font-size:9pt"></span><ul><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">使用软件</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">游戏开辟</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">驱动程序</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">嵌进式开辟</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">手机开辟</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">单片机</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">数据库计划</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">代码移植</span></a></li></ul></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">收集硬件</span></a></li></ul></li><li><ahref="http://homepage.yesky.com/"target="_blank"class="selected"><spanstyle="font-size:9pt">信息与常识</span></a><spanstyle="font-size:9pt"></span><ul><li><aclass="selected"href="http://homepage.yesky.com/"><spanstyle="font-size:9pt">信息与常识</span></a><spanstyle="font-size:9pt"></span><ul><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">有用信息与工具</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">旧事静态</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">常识与妙技</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">计划制造与浏览</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">项目买卖履历谈</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">下载</span></a></li></ul></li></ul></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">优异作品浏览</span></a></li><li><ahref="http://homepage.yesky.com/"target="_blank"><spanstyle="font-size:9pt">招骋</span></a></li><li><ahref="http://homepage.yesky.com/"><spanstyle="font-size:9pt">关于本站</span></a></li></ul></td></tr></table></body></html></p>
上一页12


CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
回复 支持 反对

使用道具 举报

简单生活 该用户已被删除
板凳
发表于 2015-2-5 10:03:14 | 只看该作者
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
回复 支持 反对

使用道具 举报

再见西城 该用户已被删除
地板
发表于 2015-2-11 09:04:58 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
回复 支持 反对

使用道具 举报

柔情似水 该用户已被删除
5#
发表于 2015-3-2 10:18:47 | 只看该作者
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
回复 支持 反对

使用道具 举报

只想知道 该用户已被删除
6#
发表于 2015-3-11 04:53:14 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
回复 支持 反对

使用道具 举报

因胸联盟 该用户已被删除
7#
发表于 2015-3-17 22:09:29 | 只看该作者
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
回复 支持 反对

使用道具 举报

山那边是海 该用户已被删除
8#
发表于 2015-3-25 06:46:46 | 只看该作者
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-19 14:47

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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