注册 登录
编程论坛 WEB前端(UI)

[原创]不用表格可以做到这个效果不?

renqian1320 发布于 2006-04-30 18:07, 547 次点击

连续排列的几个块,当鼠标移上去时 块的背景颜色由白色变为红色,用css能不能实现这个效果??????知道的指点下.不用表格.就好比这几个连续排列的块.
#danyuan1{display:block;width:205px;height:18px;margin:2px;}
#danyuan2{float:left;width:18px;height:18px;margin:2px;border:1px solid #FF0000;line-height:18px;text-align:center;}
<div id="danyuan1">
<div id="danyuan2"><a href="#"class="yellow">17</a></div>
<div id="danyuan2"><a href="#"class="yellow">18</a></div>
<div id="danyuan2"><a href="#"class="yellow">19</a></div>
<div id="danyuan2"><a href="#"class="yellow">20</a></div>
<div id="danyuan2"><a href="#"class="yellow">21</a></div>
<div id="danyuan2"><a href="#"class="yellow">22</a></div>
<div id="danyuan2"><a href="#"class="yellow">23</a></div>
</div>
<div id="danyuan1">
<div id="danyuan2"><a href="#"class="yellow">24</a>
</div>
<div id="danyuan2"><a href="#"class="yellow">25</a></div>
<div id="danyuan2"><a href="#"class="yellow">26</a></div>
<div id="danyuan2"><a href="#"class="yellow">27</a></div>
<div id="danyuan2"><a href="#"class="yellow">28</a></div>
<div id="danyuan2"><a href="#"class="yellow">29</a></div>
<div id="danyuan2"><a href="#"class="yellow">30</a></div>

</div>
<div id="danyuan1">
<div id="danyuan2"><a href="#"class="yellow">31
</div>
<div id="danyuan2"><a href="#"class="yellow">1</a></div>
<div id="danyuan2"><a href="#"class="yellow">2</a></div>
<div id="danyuan2"><a href="#"class="yellow">3</a></div>
<div id="danyuan2"><a href="#"class="yellow">4</a></div>
<div id="danyuan2"><a href="#"class="yellow">5</a></div>
<div id="danyuan2"><a href="#"class="yellow">6</a></div>
</div>

1 回复
#2
renqian13202006-05-06 16:26
.style5{font-size:12px;}
.ueser{width:100%;text-align:center;margin:0;padding:2px 0;}
.ueser a{width:13%;margin:2px;border:1px solid #FF0000;text-decoration:none;}
.ueser a:link,ueser a:visited,ueser a:active{color:#FF0000;background:#FFFFFF;}
.ueser a:hover{color:#FF0000;background:#FFCCCC;}
<span class="style5"><a href="">17</a>
<a href="">18</a>
<a href="">19</a>
<a href="">20</a>
<a href="">21</a>
<a href="">22</a>
<a href="">23</a></span>
</span>
</div>
<div class="ueser">
<span class="style5"><a href="">24</a>
<a href="">25</a>
<a href="">26</a>
<a href="">27</a>
<a href="">28</a>
<a href="">29</a>
<a href="">30</a>
</span>
</div>
<div class="ueser">
<span class="style5"><a href="">31</a>
<a href="">32</a>
<a href="">33</a>
<a href="">34</a>
<a href="">35</a>
<a href="">36</a>
<a href="">37</a>
</span>
</div>
自己的问题还靠自己解决
1