HTML:
<tr> <td class="PX15 widthTD1 textRight heightFirst" valign="top"><div class="paddingTop12">机器尺寸:</div></td> <td class="PX15 widthTD2 heightFirst"> <ul class="widthTD2" id="chooseServer"> <li> <div class="activeServer" onclick="tabServer(this);">1U服务器</div> </li> <li> <div class="defaultServer" onclick="tabServer(this);">2U服务器</div> </li> <li> <div class="defaultServer" onclick="tabServer(this);">4U服务器</div> </li> </ul> </td> </tr>
CSS:
.widthTD1{ width:93px; } .widthTD2{ width:616px; } .colorDefault{ color:#565758; } .textLeft{ text-align:left; } .textRight{ text-align:right; } #trusteeshipTable tr td ul{ width:616px; } #chooseServer{ height:54px; } #chooseServer li{ float:left; width:188px; height:40px; line-height:40px; margin-left:11px; margin-top:7px; } #chooseServer li div{ float:left; width:100%; height:33px; line-height:33px; } .defaultServer{ background-color:#FAFAFA; border:#E5E5E5 solid 1px; margin-top:0px; margin-left:0px; } .activeServer{ background-color:#fff; border:#FF7E00 solid 2px; margin-top:-1px; margin-left:-1px; } .trusteeshipTable tr td{ } .heightFirst{ height:54px; } .paddingTop12{ padding-top:12px; }
原文:http://www.cnblogs.com/mazey/p/6364191.html