读书人

用UL兑现非Table四行三列布局

发布时间: 2012-10-29 10:03:53 作者: rapoo

用UL实现非Table四行三列布局
本页的CSS代码利用CSS将UL模仿出了表格的效果。

<html><head><title>test</title><style type="text/css">ul{margin:0px;padding:0px;width:200px;}ul li{float:left;list-style-type:none;border-top:#000 solid 1px;border-left:#000 solid 1px;width:65px;}.border-r{border-right:#000 solid 1px;}.border-b{border-bottom:#000 solid 1px;}.border-l{border-right:#000 solid 1px;border-bottom:#000 solid 1px;}</style></head><body><ul><li> </li><li> </li><li class="border-r"> </li></ul><ul><li> </li><li> </li><li class="border-r"> </li></ul><ul><li> </li><li> </li><li class="border-r"> </li></ul><ul><li class="border-b"> </li><li class="border-b"> </li><li class="border-l"> </li></ul></body></html>

读书人网 >Web前端

热点推荐