|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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标签只用来表现格式化的数据等等。 |
|