html布局；css3+jq下拉菜单；table分页动态添加行；html5本地存储；简单易用的htm

简单好用的html框架，预览图见最后； 源码；

 1 ul.menu, 2 ul.*{margin:0px;padding:0px;} 3 ul.menu ul {padding:0;margin:0;list-style:none;position:relative;background:#ddd;font-family:arial, sans-serif;} 4 ul.menu {z-index:100;padding:10px;border-radius:10px 10px 0 0;margin:0 auto;} 5 ul.menu ul { 6     z-index:50;border-radius:0 0 10px 10px; 7     -webkit-transition: 0.5s; 8     -moz-transition: 0.5s; 9     -ms-transition: 0.5s;10     -o-transition: 0.5s;11     transition: 0.5s;12 }13 ul.menu li {line-height:30px;position:relative;text-indent:10px;list-style-type:none;}14 ul.menu > li {margin-top:2px;font-size:12px;}15 ul.menu > li a {font:normal 12px/30px arial, sans-serif;color:#fff;text-decoration:none;}16 ul.menu label.open {display:block;background: #DEEEF1 url("/jscss/demoimg/201208/d-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;z-index:100;font:normal 12px/30px arial, sans-serif;color:#000;font-weight:900;;border-radius:10px 10px 0 0;}17 ul.menu label.open b {color:#DEEEF1;}18 ul.menu span {display:block;background:#00c;line-height:30px;position:relative;z-index:100;border-radius:10px 10px 0 0;}19 ul.menu label img {position:absolute;left:0;top:0;width:100%;height:30px;}20 21 ul.menu ul li {margin-top:-30px;22     -webkit-transition: 0.5s;23     -moz-transition: 0.5s;24     -ms-transition: 0.5s;25     -o-transition: 0.5s;26     transition: 0.5s;27 }28 ul.menu ul li a {display:block;font:normal 11px/30px arial, sans-serif;color:#000;background:#ccc;}29 ul.menu ul li a:hover {background:#ddd;}30 ul.menu input {position:absolute;left:-9999px;}31 32 ul.menu li input:checked + label {background:#069;} 33 ul.menu li input:checked ~ ul {background:#ccc;padding-bottom:10px;}34 ul.menu li input:checked ~ ul li {margin-top:0;}  35 36 ul.menu label.close {display:block;height:30px;background:transparent url("/jscss/demoimg/201208/u-arrow.gif") no-repeat 170px 12px;line-height:30px;position:relative;left:0;z-index:90;margin-top:-30px} 37 ul.menu input.tabs:checked ~ label.close {display:block;z-index:200;}38 ul.menu input.close:checked + label.close {display:none;}39 ul.menu input.close:checked ~ ul {background:#ddd;padding-bottom:0;}40 ul.menu input.close:checked ~ ul li {margin-top:-30px;} 

部分代码如下：

 1 ...... 2           3           4           5           6 ...... 7   8     try { 9              for (i=0; i  ');12                 $('#level' + i ).append(' ');13                 $('#level' + i ).append(' ' + menus[i][0] + ' '); /*添加第一级菜单*/14                 $('#level' + i ).append(' ');15                 $('#level' + i ).append('  ');16                 $('#level' + i ).append(' ');17                 var submenu=menus[i][2];18                 for (j=0; j  ' + submenu[j][0] + ' ');    21                 }22                 $('#level' + i ).append(' ');23                 $("#navmenu").append(' ');24             }25     } 26     catch (e) 27     {/*新的js中部分属性不支持，提示异常*/28         alert(e.name  + e.message + "\n"  + "浏览器版本太低请尝试使用Firfox、谷歌浏览器、IE9+ 浏览器预览\n");29     }30 31     $('#tab0a').attr("checked", true);  /*第一个菜单选中*/32  33 ...... 

3.table 分页显示 ，新增行，使用jq；

  1 var currentPage = 1; /*当前是第几页*/  2 var showTableTr  = 10; /*每页显示多少行*/  3   4 /*新增行*/  5 function addTr()  6 {  7     sum++;  8     /*显示隐藏的行*/  9     $('tr[name="hidetr"]:last').find("th").eq(0).text($("#tableList tr").length -2); 10     $('tr[name="hidetr"]:last').show(); 11      12     /*复制最后一行，添加到最后一行后面，然后隐藏*/ 13     $('tr[name="hidetr"]:last').after($('tr[name="hidetr"]:last').clone(true)); 14     $('tr[name="hidetr"]:last').hide(); 15      16     if("BGCgray" == $('tr[name="hidetr"]:last').attr('class')) 17     { 18             $('tr[name="hidetr"]:last').removeClass('BGCgray'); 19     } 20     else  21     { 22         $('tr[name="hidetr"]:last').addClass('BGCgray');     23     } 24      25     if(currentPage != parseInt(getSumPage())) 26     {     27         tabPaging(parseInt(getSumPage())); 28     } 29 } 30 /*删除行*/ 31 function delTr(node) {    32     var tr1 = node.parentNode.parentNode;   33     var index = tr1.rowIndex; 34         var tab = document.getElementById("tableList"); 35  36         tab.deleteRow(index); 37  38         /*序号重排*/ 39         for(i = index; i   getTabTrLength("tableList")? getTabTrLength("tableList") : page*showTableTr; 56     for(i = (page - 1)*showTableTr + 1; i  

预览图：

author：1003278902@qq.com
download： http://files.cnblogs.com/files/zl1990/html.tar.gz 

查看更多关于html布局；css3+jq下拉菜单；table分页动态添加行；html5本地存储；简单易用的htm的详细内容...