仓酷云

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

[DIV+CSS] 来看看:可革新的Div+CSS+JS制造的树型菜单

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

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

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

x
在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
Div+CSS+JS组和可以完成良多悦目的特别的效果,这里保举一款可革新的下拉菜单源代码:
<styletype="text/css"><!--*{margin:0;padding:0;border:0;}body{font-family:arial,宋体,serif;font-size:12px;}#nav{width:180px;line-height:24px;list-style-type:none;text-align:left;/*界说全部ul菜单的行高和背景致*/}/*==================一级目次===================*/#nava{width:160px;display:block;padding-left:20px;/*Width(必定要),不然上面的Li会变形*/}#navli{background:#CCC;/*一级目次的背景致*/border-bottom:#FFF1pxsolid;/*上面的一条白边*/float:left;/*float:left,本不该该设置,但因为在Firefox不克不及一般显现承继Nav的width,限定宽度,li主动向下延长*/}#navlia:hover{background:#CC0000;/*一级目次onMouseOver显现的背景致*/}#nava:link{color:#666;text-decoration:none;}#nava:visited{color:#666;text-decoration:none;}#nava:hover{color:#FFF;text-decoration:none;font-weight:bold;}/*==================二级目次===================*/#navliul{list-style:none;text-align:left;}#navliulli{background:#EBEBEB;/*二级目次的背景致*/}#navliula{padding-left:20px;width:160px;/*padding-left二级目次中笔墨向右挪动,但Width必需从头设置=(总宽度-padding-left)*/}/*上面是二级目次的链接款式*/#navliula:link{color:#666;text-decoration:none;}#navliula:visited{color:#666;text-decoration:none;}#navliula:hover{color:#F3F3F3;text-decoration:none;font-weight:normal;background:#CC0000;/*二级onmou搜索引擎优化ver的字体色彩、背景致*/}/*==============================*/#navli:hoverul{left:auto;}#navli.sfhoverul{left:auto;}#content{clear:left;}#navul.collapsed{display:none;}-->#PARENT{width:300px;padding-left:20px;}</style><divid="PARENT"><ulid="nav"><li><ahref="#Menu=ChildMenu1">我的网站</a><ulid="ChildMenu1"class="collapsed"><li><ahref="http://homepage.yesky.com"target="_blank">网页陶吧</a></li><li><ahref="#">办理</a></li><li><ahref="http://homepage.yesky.com"target="_blank">网页陶吧</a></li><li><ahref="#">办理</a></li><li><ahref="http://homepage.yesky.com"target="_blank">网页陶吧</a></li><li><ahref="#">办理</a></li></ul></li><li><ahref="#Menu=ChildMenu2">我的帐务</a><ulid="ChildMenu2"class="collapsed"><ahref="http://homepage.yesky.com"target="_blank">付出</a></li><li><ahref="#">办理</a></li><li><ahref="#">网上付出</a></li><li><ahref="#">挂号汇款</a></li><li><ahref="#">在线招领</a></li><li><ahref="#">汗青帐务</a></li></ul></li><li><ahref="#Menu=ChildMenu3">网站办理</a><ulid="ChildMenu3"class="collapsed"><li><ahref="#">登录</a></li><ahref="http://homepage.yesky.com"target="_blank">办理</a></li><li><ahref="#">办理</a></li><li><ahref="#">办理</a></li></ul></li><li><ahref="#Menu=ChildMenu4">网站办理</a><ulid="ChildMenu4"class="collapsed"><li><ahref="#">登录</a></li><ahref="http://homepage.yesky.com"target="_blank">办理</a></li><li><ahref="#">办理</a></li><li><ahref="#">办理</a></li><li><ahref="#">办理</a></li></ul></li></ul></div><scripttype=text/javascript><!--varLastLeftID="";functionmenuFix(){varobj=document.getElementById("nav").getElementsByTagName("li");for(vari=0;i<obj.length;i++){obj.onmou搜索引擎优化ver=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}obj.onMouseDown=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}obj.onMouseUp=function(){this.className+=(this.className.length>0?"":"")+"sfhover";}obj.onmou搜索引擎优化ut=function(){this.className=this.className.replace(newRegExp("(?|^)sfhover//b"),"");}}}functionDoMenu(emid){varobj=document.getElementById(emid);obj.className=(obj.className.toLowerCase()=="expanded"?"collapsed":"expanded");if((LastLeftID!="")&&(emid!=LastLeftID))//封闭上一个Menu{document.getElementById(LastLeftID).className="collapsed";}LastLeftID=emid;}functionGetMenuID(){varMenuID="";var_paramStr=newString(window.location.href);var_sharpPos=_paramStr.indexOf("#");if(_sharpPos>=0&&_sharpPos<_paramStr.length-1){_paramStr=_paramStr.substring(_sharpPos+1,_paramStr.length);}else{_paramStr="";}if(_paramStr.length>0){var_paramArr=_paramStr.split("&");if(_paramArr.length>0){var_paramKeyVal=_paramArr[0].split("=");if(_paramKeyVal.length>0){Me</p>
12下一页


提高易用性。使用CSS可以结构化HTML,例如:标签只用来控制段落,heading标签只用来控制标题,table标签只用来表现格式化的数据等等。
简单生活 该用户已被删除
沙发
 楼主| 发表于 2015-1-16 00:43:46 | 只看该作者

来看看:可革新的Div+CSS+JS制造的树型菜单

结构清晰,容易被搜索引擎搜索到,天生优化了seo

nuID=_paramKeyVal[1];}}/*if(_paramArr.length>0){var_arr=newArray(_paramArr.length);}//取一切#前面的,菜单只需用到Menu//for(vari=0;i<_paramArr.length;i++){var_paramKeyVal=_paramArr.split(=);if(_paramKeyVal.length>0){_arr[_paramKeyVal[0]]=_paramKeyVal[1];}}*/}if(MenuID!=""){DoMenu(MenuID)}}GetMenuID();//*这两个function的按次要注重一下,否则在Firefox里GetMenuID()不起效果menuFix();--></script>
运转代码复制代码另存代码  

</p>
上一页12


Div全称division意为“区分”使用DIV的方法跟使用其他tag的方法一样。
愤怒的大鸟 该用户已被删除
板凳
发表于 2015-1-18 07:31:00 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
蒙在股里 该用户已被删除
地板
发表于 2015-1-26 23:38:32 来自手机 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
老尸 该用户已被删除
5#
发表于 2015-2-5 04:37:50 | 只看该作者
还是在Dreamweaver所见即所得添加链接是,可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
柔情似水 该用户已被删除
6#
发表于 2015-2-11 05:32:15 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
7#
发表于 2015-3-1 22:45:37 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
山那边是海 该用户已被删除
8#
发表于 2015-3-11 01:41:20 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
因胸联盟 该用户已被删除
9#
发表于 2015-3-17 19:08:20 | 只看该作者
帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。
活着的死人 该用户已被删除
10#
发表于 2015-3-24 21:38:03 | 只看该作者
布局表格、绘制层、制作CSS样式表等,这些内容迷糊了我的视线,真是没想到制作一个精巧别致的网页是如此的困难,可是心有不甘。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 21:26

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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