简单好用的html框架，预览图见最后； 源码；
1.页面布局使用table；
table 嵌套 +iframe 布局；
2.下拉菜单为jq+css3 动画;
css input 无边框，select下拉菜单美化
1 input{appearance:none;background-color:transparent;border: solid 0px #000;} /*input 无边框*/
2 input:disabled{background-color:#d2d2d2;border:0px;}
3 select {border: solid 1px #000; appearance:none;-moz-appearance:none; -webkit-appearance:none; padding-right: 14px;margin :0px;background: url("../images/arrow.png") no-repeat scroll right center transparent;}
4 select::-ms-expand { display: none; }
5 select:disabled{background-color:#d2d2d2;} /*禁用时背景色*/
添加菜单，可以在js目录下的、js/cm_menu.js中添加；
1 var menus=new Array(); 2 menus[0]=[‘菜单1‘, ‘‘,[[‘演示1‘,‘page/11_page.html‘],[‘演示2‘,‘page/12_page.html‘]]]; 3 menus[1]=[‘菜单2‘, ‘‘,[[‘演示1‘,‘page/21_page.html‘],[‘演示2‘,‘page/22_page.html‘]]];
菜单css3
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 <td height="100%" style="background-image:url(images/menu_bgT.gif); background-repeat:no-repeat" valign="top">
3 <ul id=navmenu class="menu">
4 </ul>
5 </td>
6 ......
7 <script type="text/javascript">
8 try {
9 for (i=0; i < menus.length; i++)
10 {
11 $("#navmenu").append(‘<li id=level‘ + i + ‘>‘);
12 $(‘#level‘ + i ).append(‘<input type="radio" name="tab" id=tab‘ + i + ‘a class="tabs">‘);
13 $(‘#level‘ + i ).append(‘<label for=tab‘ + i + ‘a class="open" accesskey="2">‘ + menus[i][0] + ‘</label>‘); /*添加第一级菜单*/
14 $(‘#level‘ + i ).append(‘<input type="radio" name="tab" id="tab‘ + i + ‘ac" class="tabs close">‘);
15 $(‘#level‘ + i ).append(‘<label for=tab‘ + i + ‘ac class="close" accesskey="3"></label>‘);
16 $(‘#level‘ + i ).append(‘<ul id=second‘ + i + ‘>‘);
17 var submenu=menus[i][2];
18 for (j=0; j < submenu.length; j++)
19 {/*添加二级菜单*/
20 $(‘#second‘ + i).append(‘<li><a href=‘ + submenu[j][1] + ‘?‘+ Math.random() +‘ target=page>‘ + submenu[j][0] + ‘</a></li>‘);
21 }
22 $(‘#level‘ + i ).append(‘</ul>‘);
23 $("#navmenu").append(‘</li>‘);
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 </script>
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 < tab.rows.length - 2; i++)
40 {
41 tab.rows[i].cells[0].innerHTML = i.toString();
42 }
43
44 tabPaging(currentPage);
45 }
46 /*分页*/
47 function tabPaging(page)
48 {
49 currentPage = page;
50 for(i = 1; i < getTabTrLength("tableList") + 1; i++)
51 {
52 $("#tableList tr").eq(i).hide();
53 }
54
55 var end = (page*showTableTr) > getTabTrLength("tableList")? getTabTrLength("tableList") : page*showTableTr;
56 for(i = (page - 1)*showTableTr + 1; i < (end + 1); i++)
57 {
58 $("#tableList tr").eq(i).show();
59 }
60 }
61 function getTabTrLength(tname)
62 {
63 return $("#" + tname + " tr").length - 3;
64 }
65 /*上一页*/
66 function prePage()
67 {
68 if(1 == currentPage)
69 {
70 currentPage =parseInt(getSumPage());
71 }
72 else
73 {
74 --currentPage;
75 }
76 tabPaging(currentPage);
77 }
78 /*下一页*/
79 function nextPage()
80 {
81 if(parseInt(getSumPage()) == currentPage)
82 {
83 currentPage = 1;
84 }
85 else
86 {
87 ++currentPage;
88 }
89 tabPaging(currentPage);
90 }
91
92 /*总共可以分几页*/
93 function getSumPage() {
94 sumtr = getTabTrLength("tableList");
95 return (sumtr/showTableTr + (sumtr%showTableTr == 0 ? 0 : 1));
96 }
97
98 function setKey(_key,val)
99 {
100 localStorage.setItem(_key,val);
101 }
102 function getKey (_key) {
103 return localStorage.getItem(_key);
104 }
105
106 /* 提交*/
107 function submitChange()
108 {
109 /*保存当前页*/
110 setKey("currentPage",currentPage);
111 }
112
113 /*初始化数据*/
114 function htmlload()
115 {
116 if(window.localStorage)
117 {
118 var a = null;
119 if(getKey("currentPage") == a)
120 {
121 currentPage = 1;
122 }
123 else
124 {
125 currentPage = getKey("currentPage");
126 }
127 }
128 else
129 {
130 alert(‘该浏览器不支持html5,请使用Google,Firfox等浏览器‘);
131 }
132 $(‘tr[name="hidetr"]:last‘).hide();
133
134 tabPaging(currentPage);
135 }
预览图：
author：1003278902@qq.comdownload： http://files.cnblogs.com/files/zl1990/html.tar.gz
时间： 2024-08-29 09:28:03