制作HTML表格，制作光标移动

最新推荐文章于 2022-09-05 06:56:02 发布

aybgcc

最新推荐文章于 2022-09-05 06:56:02 发布

阅读量460

点赞数

本文链接：https://blog.csdn.net/aybgcc/article/details/80298672

版权

先用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>

aybgcc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作HTML表格，制作光标移动

先用HTML设置出框架，然后用盒子标签设置个框架的内容及格式，在用JS设置光标的移动变化&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3...
复制链接

扫一扫