1 全选：<input type="button" id="All" value="全选" /><br />
2 不选<input type="button" id="uncheck" value="不选" /><br />
3 反选<input type="button" id="othercheck" value="反选" /><br />
4 <div id="div">
5 <input type="checkbox" /><br />
6 <input type="checkbox" /><br />
7 <input type="checkbox" /><br />
8 <input type="checkbox" /><br />
9 <input type="checkbox" /><br />
10 <input type="checkbox" /><br />
11 <input type="checkbox" /><br />
12 <input type="checkbox" /><br />
13 <input type="checkbox" /><br />
14 <input type="checkbox" /><br />
15 <input type="checkbox" /><br />
16 <input type="checkbox" /><br />
17 <input type="checkbox" /><br />
18 <input type="checkbox" /><br />
19 <input type="checkbox" /><br />
20 <input type="checkbox" /><br />
21 <input type="checkbox" /><br />
22 <input type="checkbox" /><br />
23 <input type="checkbox" /><br />
24 <input type="checkbox" /><br />
25 </div>
1 <script>
2 window.onload=function(){
3 var CheckAll=document.getElementById('All');
4 var UnCheck=document.getElementById('uncheck');
5 var OtherCheck=document.getElementById('othercheck');
6 var div=document.getElementById('div');
7 var CheckBox=div.getElementsByTagName('input');
8 CheckAll.onclick=function(){
9 for(i=0;i<CheckBox.length;i++){
10 CheckBox[i].checked=true;
11 };
12 };
13 UnCheck.onclick=function(){
14 for(i=0;i<CheckBox.length;i++){
15 CheckBox[i].checked=false;
16 };
17 };
18 othercheck.onclick=function(){
19 for(i=0;i<CheckBox.length;i++){
20 if(CheckBox[i].checked==true){
21 CheckBox[i].checked=false;
22 }
23 else{
24 CheckBox[i].checked=true
25 }
26
27 };
28 };
29 };
30 </script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:black;
transition:width 2s;
-webkit-transition:width 2s; /* Safari */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>注意：</b>鼠标移动到 div 元素上，查看过渡效果。。</p>
<div></div>
动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>
css3分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius: 5px;
}
ul.pagination li a.active {
background-color: #4CAF50;
color: white;
border-radius: 5px;
}
ul.pagination li a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>
<h2>圆角样式</h2>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a class="active" href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
