当前位置:编程学习 > JS >>

完全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控制表格响应鼠标自动变大列宽

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,