<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>用css把ul打造成表格形式</title>
<style type="text/css">
.UlLikeTr
{
width: 231px;
margin-left:50px;
font-size: 12px;
font-family: 宋体 黑体 Arial;
}
.UlLikeTr li
{
height:20px;
width: 75px;
float:left;
display: block;
list-style:none;
list-style-type: none;
border-left:1px solid #888;
border-bottom:1px solid #888;
}
.UlLikeTr .liLineTitle
{
background:#f8f8f8;
border-top:1px solid #888;
text-align:center;
}
.lastLi
{
border-right:1px solid #888;
}
</style>
</head>
<body>
<div>
<ul class="UlLikeTr">
<li class="liLineTitle">第一列</li>
<li class="liLineTitle">第二列</li>
<li class="liLineTitle lastLi">第三列</li>
</ul>
<ul class="UlLikeTr">
<li>第一行第一列</li>
<li>第一行第二列</li>
<li class="lastLi">第一行第三列</li>
</ul>
<ul class="UlLikeTr">
<li>第二行第一列</li>
<li>第二行第二列</li>
<li class="lastLi">第二行第三列</li>
</ul>
</div>
</body>
</html>
这是用css把ul打造成表格形式的基本思路,其它更复杂的内容可以自由发挥.
342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
