10.2

今天把要做的项目确定并做了大体的样子出来,子页面和JS部分还没有做,图片轮播借鉴了书上的网上的一些代码,还并不是特别熟悉,但是二级菜单的挺好弄的,代码在这看下把

 

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.listdiv{
background-color: blue;
position: absolute;
z-index: 1;
display: none;
width: 160px;

}
.table{
width: 300px;
height: 100px;
border: 1px solid green;
}

</style>
</head>
<body>
<table class="table">
<tr>
<td onmouseover="show('s3')" onmouseleave="hide('s3')">我要买</td>
<td onmouseover="show('s4')" onmouseleave="hide('s4')">我要卖</td>
<td onmouseover="show('s5')" onmouseleave="hide('s5')">我都要</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="listdiv" id="s3" onmouseover="show('s3')" onmouseleave="hide('s3')">
<p>针织衫</p>
<p>春季单鞋</p>
<p>春装新款</p>
<p>冬装清仓</p>
</div>
</td>
<td>
<div class="listdiv" id="s4" onmouseover="show('s4')" onmouseleave="hide('s4')">
<p>针织衫</p>
<p>春季单鞋</p>
<p>春装新款</p>
<p>冬装清仓</p>
</div></td>
<td>
<div class="listdiv" id="s5" onmouseover="show('s5')" onmouseleave="hide('s5')">
<p>针织衫</p>
<p>春季单鞋</p>
<p>春装新款</p>
<p>冬装清仓</p>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>


</table>
</body>
</html>
<script>
function show(d){
document.getElementById(d).style.display="block";
}
function hide(d){
document.getElementById(d).style.display="none";
}
</script>

posted on 2017-10-02 17:30  段了的弦  阅读(179)  评论(0编辑  收藏  举报