|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
不管你用什么工具软件制作网页,都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼,同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB。
这是用DIV+CSS+JS组成的树型菜单,接纳列表,切合WEB尺度,在年夜多半WIN扫瞄器下,兼容性不错,
xhtml奏效果页,我如今做的是二个菜单,假如必要增加,可把<ulclass="collapsed"id="submenuid2">......</ul>之间的内容加上往,"submenuid"加1,检察效果。
CSS代码
body{margin:0px;padding:0;font:12px"LucidaGrande",Verdana,Arial,Helvetica,sans-serif;background:#FFFFFF;text-align:center;}ul{margin:0;padding:0;list-style:none;}#treenav{margin:10px;text-align:left;}#treenavulli{margin:1px0;padding:0;font-size:11px;}#treenavul.expanded{display:block;}#treenavul.expanded,#treenavul.collapsed{margin:5px10px;}#treenavul.collapsed{display:none;}.expandedli,.collapsedli{border-bottom:1pxdashed#CCCCCC;width:100px;}.listhead{font-weight:bold;display:block;font-size:12px;color:#333333;background:#F1F1F1;padding:3px;width:120px;margin:1px0;}#treenava{text-decoration:none;color:#666666;}#treenava:hover{color:#990000;}JS代码
functiontoggleMenu(id){
element=document.getElementById(id);
element.className=(element.className.toLowerCase()==expanded?collapsed:expanded);
}
onload=function(){
toggleMenu(submenuid);
}
</p>
所有的设计第一步就是构思,构思好了。 |
|