用css做类似表格的布局

--2013年6月24日12:08:49

今天突然不想用table了,就在园子里找了几个用css的解决办法,直接上代码:

--1、html代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html;charset=UTF-8" %>
<head>
<title>演示用css实现表格</title>
<link rel="stylesheet" type="text/css" href="../css/mycss.css">
</head>
<body>
<center>
下面是表格内容
<div id="main">
<ul>
<li>1-1</li>
<li class="r">1-2</li>
<li>2-1</li>
<li class="r">2-2</li>
<li>3-1</li>
<li class="r">3-2</li>
<li>3-1</a></li>
<li class="r">3-2</li>
<li class="b">最后一行</li>
<li class="b r">就是不一样</li>
</ul>
</div>
</center> <style type="text/css">
/*用css实现表格 */
* {margin:0;padding:0}
#main {border-style:solid;border-width:0px;border-color:blue;}
#main ul{width:390px;height:auto;list-style:none;//decimal}
#main li {border-left:1px solid #ccc;border-top:1px solid #ccc;
float:left;width:190px;
height:33px;
text-align:center;
line-height:33px}
#main li.b {border-bottom:1px solid #ccc}
#main li.r {border-right:1px solid #ccc}
</style>
</body>
</html>

--2、css代码:已经写在页面中了。

效果图:

用css做类似表格的布局

上一篇:Spring的依赖注入


下一篇:HDU 4294 Multiple(搜索+数学)