先用HTML设置出框架,然后用盒子标签设置个框架的内容及格式,在用JS设置光标的移动变化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CiShi</title>
<script type="text/javascript">
window.οnlοad=function(){
var tds=document.getElementsByTagName('td');
for (var i = 0; i < tds.length; i++) {
var mytd=tds[i];
mytd.onmouseover = function(){
this.style.background='#F00032';
}
mytd.onmouseout = function(){
this.style.background='#B00032';
}
}
}
</script>
<style type="text/css">
#father {
width: 480px;
height: 390px;
margin: 10px auto;
border: 1px solid #000;
}
#center {
width: 459px;
height: 375px;
margin: 10px auto;
margin-top: 10px;
}
#left {
width: 230px;
height: 375px;
float: left;
}
#right {
width: 229px;
height: 372px;
float: right;
background-color: #ff396b;
}
td {
width: 100px;
height: 40px;
text-align: center;
background-color: #B00032;
color: #FFF;
}
</style>
</head>
<body>
<div>
<div id="father">
<div id="center">
<div id="left"><img src="left.bmp" /></div>
<div id="right"><img src="logo.bmp" />
<table>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
<tr>
<td>羽绒服></td>
<td>毛呢大衣></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>