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

仓酷云

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

[DIV+CSS] 来一发CSS 制造的三级菜单殊效代码

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:26:52 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
<divclass="start"><html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title>网页殊效|http://www.jztop.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{
<pstyle="TEXT-INDENT:2em">background:#f1f1f1;
background, content, display, filter, border

相关帖子
回复

使用道具 举报

只想知道 该用户已被删除
沙发
 楼主| 发表于 2015-1-16 00:52:24 | 只看该作者

来一发CSS 制造的三级菜单殊效代码

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
>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://www.jztop.com"target="_blank">
<spanstyle="font-size:9pt">首页</span></a></li>
<li><ahref="http://www.jztop.com/"target="_blank"class="selected">
<spanstyle="font-size:9pt">项目需求互助</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.jztop.com/"class="selected"><spanstyle="font-size:9pt">网站项目
</span></a>
<ul>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">整站项目</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站剖析筹划</span></a></li>
<li><ahref="http://www.jztop.com/"target="_blank">
<spanstyle="font-size:9pt">网页计划制造</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站制造与开辟</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站flash动画</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站服务器</span></a></li>
</ul>
</li>
<li><ahref="http://www.jztop.com/"class="selected"><spanstyle="font-size:9pt">多媒体计划制造</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">网站项目</span></a>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">立体计划</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">CAD
上一页1234下一页


网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。
回复 支持 反对

使用道具 举报

只想知道 该用户已被删除
板凳
 楼主| 发表于 2015-1-16 00:55:33 | 只看该作者

来一发CSS 制造的三级菜单殊效代码

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
工程图计划</span></a></li></p><li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">3D建模与动画</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">Flash游戏动画</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">音效及音乐</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">游戏原画设定</span></a></li>
</ul>
</li>
<li><ahref="http://www.jztop.com/"class="selected"><spanstyle="font-size:9pt">软件开辟</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">使用软件</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">游戏开辟</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">驱动程序</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">嵌进式开辟</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">手机开辟</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">单片机</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">数据库计划</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">代码移植</span></a></li>
</ul>
</li>
<li><ahref="http://www.jztop.com/"target="_blank"class="selected">
<spanstyle="font-size:9pt">信息与常识</span></a><spanstyle="font-size:9pt">
</span>
<ul>
<li><aclass="selected"href="http://www.jztop.com/">
<spanstyle="font-size:9pt">有用信息与工具</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">旧事静态</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">常识与妙技</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">计划制造与浏览</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">项目买卖履历谈</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">下载</span></a></li>
</ul>
</li>
</ul>
</li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">优异作
上一页1234下一页


有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
回复 支持 反对

使用道具 举报

只想知道 该用户已被删除
地板
 楼主| 发表于 2015-1-16 00:55:50 | 只看该作者

来一发CSS 制造的三级菜单殊效代码

CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
品浏览</span></a></li></p><li><ahref="http://www.jztop.com/"target="_blank">
<spanstyle="font-size:9pt">招骋</span></a></li>
<li><ahref="http://www.jztop.com/">
<spanstyle="font-size:9pt">关于本站</span></a></li>
</ul>
</td>
</tr>
</table>
</body>
</html>
</p>
上一页1234


属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
回复 支持 反对

使用道具 举报

不帅 该用户已被删除
5#
发表于 2015-1-18 08:49:04 | 只看该作者
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。
回复 支持 反对

使用道具 举报

冷月葬花魂 该用户已被删除
6#
发表于 2015-1-27 05:28:51 | 只看该作者
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。
回复 支持 反对

使用道具 举报

小妖女 该用户已被删除
7#
发表于 2015-2-5 09:35:14 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
回复 支持 反对

使用道具 举报

精灵巫婆 该用户已被删除
8#
发表于 2015-2-11 08:46:33 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
回复 支持 反对

使用道具 举报

变相怪杰 该用户已被删除
9#
发表于 2015-3-2 08:27:22 | 只看该作者
所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.
回复 支持 反对

使用道具 举报

分手快乐 该用户已被删除
10#
发表于 2015-3-11 04:35:04 | 只看该作者
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。
回复 支持 反对

使用道具 举报

若天明 该用户已被删除
11#
发表于 2015-3-17 22:08:12 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
回复 支持 反对

使用道具 举报

admin 该用户已被删除
12#
发表于 2015-3-25 05:49:19 | 只看该作者
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-17 05:21

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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