Question

div+css这种列表效果怎么实现 求代码 列表显示10行4列 谢谢！

Answer 1

一般还要结合JS才行的. <div class="main_02_left4_top"> <div class="left4_top1" id="Tab_1" onmouseover="showTab('1');">作品欣赏</div> <div class="left4_top2" id="Tab_2" onmouseover="showTab('2');">艺术趣闻</div> <div class="main_02_left4_main" id="cont_1" style=""> 这里放作品欣赏的内容 </div> <div class="main_02_left4_main" id="cont_2" style="display: none;"> 这里放艺术趣闻的内容 </div> <!--JS部分--> <script> function showTab(ID) { for(var i=1;i<=2;i ) { if(ID==i) { $('Tab_' i).className='left4_top1'; $('cont_' i).style.display=''; } else { $('Tab_' i).className='left4_top2'; $('cont_' i).style.display='none'; } } } function $(ID) { return document.getElementById(ID); } </script> <!--CSS部分--> <style> .main_02_left4_top { float: left; top: 0px; left: 0px; width: 350px; height: 27px; line-height: 27px; } .left4_top1 { float: left; top: 0px; left: 0px; background-image: url( http://192.168.1.30/images/left4_top3.gif); width: 116px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; font-weight: bold; } .left4_top2 { float: left; top: 0px; left: 116px; background-image: url( http://192.168.1.30/images/left4_top2.gif); width: 116px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; font-weight: bold; } .main_02_left4_main { float: left; position: absolute; top: 30px; left: 23px; width: 325px; line-height: 25px; font-size: 14px; color: #004786; } .main_02_left4_main a { font-size: 14px; color: #004786; } </style>