写了几遍，都不满意，删了重写，突然就符合我的预想了。
编写的时候要不断的完善自己的思路。选择适合的思路。
BODY:
尽量简化结构。
语义化classname
<body><divid="menubox"class="menubox"><divid="menutitle"class="menutitle"><divclass="hr"></div><divclass="mbtext">Menu</div></div><ulid="menu"class="menu"><liclass="list"><ahref="#">All Select</a></li><liclass="list"><ahref="#">BackTop</a></li><liclass="list"><ahref="#">Save To Local</a></li><liclass="list"><ahref="#">Slide</a></li><liclass="list"><ahref="#">Tab</a></li><liclass="list"><ahref="#">仿宋</a></li></ul></div></body>
CSS:
base.css | common.css | page.css
有层次的编写属性：尺寸 - 位置 - 其他 ps:方便阅读
考虑在浏览器自带的编辑器里编辑，方便预览
<link rel="stylesheet" ype="text/css" href="css/ibase.css" />
<style rel="stylesheet" type="text/css">
.menubox{width:250px;height:100%;position:absolute;top:0;left:50%;margin-left:-125px;background-color:#F5F5F5;font-family:'courier new', 'FangSong'; //courier new字体系统自带，默认是关闭状态，右击显示-moz-box-shadow:0px 0px 20px #000000;-webkit-box-shadow:0px 0px 20px #000000;box-shadow:0px 0px 20px #000000;overflow:hidden;
}.menutitle{width:100%;height:16px;margin-top:40px;overflow:hidden;text-align:center;color:#000;
}.hr{width:200px;height:0;margin-left:25px;margin-top:8px;border-bottom:1px solid #000;
}.mbtext{width:70px;margin-left:90px;margin-top:-8px;background-color:#F5F5F5;text-align:center;
}.menu{margin-top:40px;color:#696969;font-size:15px;text-align:center;
}.menu .list{margin-top:20px;padding:0 0 3px 0;cursor:default;
}a{color:#696969;
}a:hover{text-decoration:none;color:#000;
}.menu .underline{height:0;margin-top:-1px;border-top:1px solid #000;display:none;
}</style>
JS:
作用域/链
同一个js语句不能混合原声的js和jq.
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/Javascript">varlis = $("a");for(vari=0; i<lis.length; i++){
lis[i].onmouSEOver=function(){varlineW = $(this).width();varlineL = $(this).position().left;varparent = $(this).parent();varlineClassName = "underline"; //以上变量待整合，到函数或者对象中if(parent.next().attr("class") !=lineClassName)
parent.after("<li class="+lineClassName+"></li>");varunderLine =parent.next();
underLine.css("width",lineW);
underLine.css("margin-left",lineL);
underLine.fadeIn("slow");
}
lis[i].onmouseout=function(){varparent = $(this).parent();varunderLine =parent.next();varlineClassName = "underline";if(underLine.attr("class") ==lineClassName)
underLine.fadeOut("slow"); //600毫秒
}
}</script>
新手一枚，这个目录是为我练习一些做的查询目录。 ps:暂时就想这些。