完全CSS代码实现立体效果的表格
CSS+JS立体表格的实现,鼠标经过后表格的单元格会变为立体的,视觉效果挺不错,用CSS实现起来也不复杂,因此这里推荐给新手朋友们,希望喜欢哦。
答案:<title>CSS实现立体效果的表格</title>
<style>
.aa {margin:100px}
ul {width:80px; float:left; margin:0px}
.aa li a{border:1px #E5E5E5 solid; background-color:#EAEAEA; width:120px; height:30px; list-style:none; margin:0px;float: left; border-top-color:#FFFFFF; border-left-color:#FFFFFF}
.aa li a:hover{border:1px #717171 solid; background-color: #E5E5E5; border-top-color:#FFFFFF; border-left-color:#FFFFFF}
</style>
<div class="aa">
<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>
</ul>
<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>
</ul>
</div>
上一个:一款很酷的li列表美化实例
下一个:JavaScript控制表格响应鼠标自动变大列宽