<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.all{
width: 700px;
height: 300px;
background-color: palevioletred;
padding-top: 40px;
}
.kind{
width: 600px;
height: 30px;
background-color: red;
margin-left: 50px;
}
.point{
width: 10px;
height:10px;
background-color: red;
margin-left: 60px;
margin-bottom: 20px;
}
.point1{
width: 10px;
height:10px;
background-color: forestgreen;
margin-left: 80px;
margin-top: -30px;
}
.point2{
width: 10px;
height:10px;
background-color: deepskyblue;
margin-left: 100px;
margin-top: -10px;
margin-bottom: 20px;
}
</style>
<meta charset="UTF-8">
<script>
function changGreen(){
var div=document.getElementById("color");
div.style.backgroundColor="forestgreen";
}
function changBlue(){
var div=document.getElementById("color");
div.style.backgroundColor="deepskyblue";
}
function changRed(){
var div=document.getElementById("color");
div.style.backgroundColor="red";
}
</script>
<title></title>
</head>
<body>
<div class="all">
<div id="red" class="point" οnclick="changRed()">
</div>
<div id="green" class="point1" οnclick="changGreen()">
</div>
<div id="blue" class="point2" οnclick="changBlue()">
</div>
<div id="color" class="kind">
<table width="110%" >
<tr>
<td >首页</td>
<td>网页</td>
<td>新闻</td>
<td>音乐</td>
<td>图片</td>
<td>地图</td>
<td>文库</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.all{
width: 700px;
height: 300px;
background-color: palevioletred;
padding-top: 40px;
}
.kind{
width: 600px;
height: 30px;
background-color: red;
margin-left: 50px;
}
.kind ul{
list-style-type:none ;
}
.kind ul li{
float: left;
}
.kind li a{
display: block;
text-decoration: none;
margin-left: 30px;
margin-top: 6px ;
}
.kind li a:link,.kind li a:visited{
background-color: #DCDCDC;
}
.kind li a:hover{
background-color: #DB7093;
}
.point{
width: 10px;
height:10px;
background-color: red;
margin-left: 60px;
margin-bottom: 20px;
}
.point1{
width: 10px;
height:10px;
background-color: forestgreen;
margin-left: 80px;
margin-top: -30px;
}
.point2{
width: 10px;
height:10px;
background-color: deepskyblue;
margin-left: 100px;
margin-top: -10px;
margin-bottom: 20px;
}
</style>
<meta charset="UTF-8">
<script>
function changGreen(){
var div=document.getElementById("color");
div.style.backgroundColor="forestgreen";
}
function changBlue(){
var div=document.getElementById("color");
div.style.backgroundColor="deepskyblue";
}
function changRed(){
var div=document.getElementById("color");
div.style.backgroundColor="red";
}
</script>
<title></title>
</head>
<body>
<div class="all">
<div id="red" class="point" οnclick="changRed()">
</div>
<div id="green" class="point1" οnclick="changGreen()">
</div>
<div id="blue" class="point2" οnclick="changBlue()">
</div>
<div id="color" class="kind">
<table width="110%" >
<ul>
<li><a href="">首页</a></li>
<li><a href="">网页</a></li>
<li><a href="">新闻</a></li>
<li><a href="">音乐</a></li>
<li><a href="">图片</a></li>
<li><a href="">地图</a></li>
<li><a href="">文库</a></li>
</ul>
</table>
</div>
</div>
</body>
</html>
