您的位置：首页 > Web前端

前端开发基础 -- 初学者注意点 ：table与div

2010-02-19 16:08 337 查看
相信许多前端开发初学者在学习html和css 时，对div+css不会陌生。认为，div布局比table布局好。于是很容易就把table忘了，所有的页面不会出现一个table，于是乎觉得，这是非常好的。其实不然：

div布局优于table布局是有条件的，这个条件是整个页面来说的。下面摘自网络上关于div+css的优点：

1：表现和内容相分离

　　将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。

　　2：提高搜索引擎对网页的索引效率

　　用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的网页内容，并可能给你一个较高的评价。

　　3：提高页面浏览速度

　　对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。

(为什么快？

div可以下载一个显示一个，而table要完整下载才能显示。

table结构的网站需要先对table进行加载，然后读取table内的内容，而div是直接加载，所以div在一定程度上在加载速度优于table结构的网页。

)

　　4：易于维护和改版

　　你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

(CSS+DIV制作的网站使得网站改版相对简单，很多问题只需要改变CSS而不需要改动程序，从而降低了网站改版的成本。)

　　从以上的描述来看，采用CSS+DIV对网站重构可以大大提升网站用户与搜索引擎的友好度。

由此可见，div布局确实比table布局好。但是不要被这些迷惑，table还是有用处的，特别是用于数据列表。如下图



这里用table会显得方便容易

这里贴上div 的代码和table的代码

table的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>table2</title>
<mce:style type="text/css"><!--
*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;border-collapse:collapse;border-spacing:0;}
.box th{line-height:34px;border-bottom:1px solid #C5D5B9; font-weight:400;font-size:14px; text-align:left; text-indent:12px;}
.box td{line-height:27px;height:27px;padding-left:12px;}
.box td a{ color:#000;}
.box td .gname{color:#FF6600;height:26px;}
.box .ghao{color:#4B8318;}
.box .libg td{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}
--></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;border-collapse:collapse;border-spacing:0;}
.box th{line-height:34px;border-bottom:1px solid #C5D5B9; font-weight:400;font-size:14px; text-align:left; text-indent:12px;}
.box td{line-height:27px;height:27px;padding-left:12px;}
.box td a{ color:#000;}
.box td .gname{color:#FF6600;height:26px;}
.box .ghao{color:#4B8318;}
.box .libg td{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}</style>
</head>
<body>
<table class="box">
<tr>
<th>游戏名称</th>
<th>账号说明</th>
<th>测试时间</th>
<th>活动状态</th>
<th>下载</th>
<th>运营公司</th>
<th>资料库</th>
<th>领号</th>
<th>淘号</th>
</tr>
<tr>
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr class="libg">
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr>
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr class="libg">
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr>
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr class="libg">
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr>
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr class="libg">
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
<tr>
<td> <a class="gname" href="#" mce_href="#" title="">天外飞仙</a> </td>
<td class="ghao">封测激活码</td>
<td>2010-3-5</td>
<td>发放中</td>
<td class="ghao">256M</td>
<td>无神世界</td>
<td><a class="look" href="#" mce_href="#" title="">查看</a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a></td>
<td><a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a></td>
</tr>
</table>
</body>
</html>


div的

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div</title>
<mce:style type="text/css"><!--
*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;}
.box dt{line-height:34px;border-bottom:1px solid #C5D5B9;}
.box dt span {padding:0 13px;font-size:14px;}
.box dd li{line-height:27px;height:27px;padding-left:12px;}
.box dd li a{margin-left:24px;}
.box dd li .gname{color:#FF6600;display:inline-block;width:80px;overflow:hidden;height:26px;vertical-align:middle;margin-left:0;}
.box dd li img{vertical-align:middle;}
.box dd li span{display:inline-block;width:84px;height:26px;vertical-align:middle;overflow:hidden;}
.box dd li .look{color:#000;margin-right:5px;margin-left:0;}
.box dd li .down{width:50px;color:#4B8318;}
.box dd li .ghao{color:#4B8318;}
.box .libg{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}
--></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;}
.box dt{line-height:34px;border-bottom:1px solid #C5D5B9;}
.box dt span {padding:0 13px;font-size:14px;}
.box dd li{line-height:27px;height:27px;padding-left:12px;}
.box dd li a{margin-left:24px;}
.box dd li .gname{color:#FF6600;display:inline-block;width:80px;overflow:hidden;height:26px;vertical-align:middle;margin-left:0;}
.box dd li img{vertical-align:middle;}
.box dd li span{display:inline-block;width:84px;height:26px;vertical-align:middle;overflow:hidden;}
.box dd li .look{color:#000;margin-right:5px;margin-left:0;}
.box dd li .down{width:50px;color:#4B8318;}
.box dd li .ghao{color:#4B8318;}
.box .libg{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}</style>
</head>
<body>
<dl class="box">
<dt>
<span>游戏名称</span>
<span>账号说明</span>
<span>测试时间</span>
<span>活动状态</span>
<span>下载</span>
<span>运营公司</span>
<span>资料库</span>
<span>领号</span>
<span>淘号</span>
</dt>
<dd>
<ul>
<li>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
<li>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</li>
</ul>
</dd>
</dl>
</body>
</html>


div进行简化后的，语义似乎不怎么好

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div2</title>
<mce:style type="text/css"><!--
*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;}
.box dt{line-height:34px;border-bottom:1px solid #C5D5B9;}
.box dt span {padding:0 13px;font-size:14px;}
.box dd {line-height:27px;height:27px;padding-left:12px;}
.box dd a{margin-left:24px;}
.box dd .gname{color:#FF6600;display:inline-block;width:80px;overflow:hidden;height:26px;vertical-align:middle;margin-left:0;}
.box dd img{vertical-align:middle;}
.box dd span{display:inline-block;width:84px;height:26px;vertical-align:middle;overflow:hidden;}
.box dd .look{color:#000;margin-right:5px;margin-left:0;}
.box dd .down{width:50px;color:#4B8318;}
.box dd .ghao{color:#4B8318;}
.box .libg{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}
--></mce:style><style type="text/css" mce_bogus="1">*{ margin:0; padding:0; border:0;}
.box{border:1px solid #BADAA1; width:710px;}
.box dt{line-height:34px;border-bottom:1px solid #C5D5B9;}
.box dt span {padding:0 13px;font-size:14px;}
.box dd {line-height:27px;height:27px;padding-left:12px;}
.box dd a{margin-left:24px;}
.box dd .gname{color:#FF6600;display:inline-block;width:80px;overflow:hidden;height:26px;vertical-align:middle;margin-left:0;}
.box dd img{vertical-align:middle;}
.box dd span{display:inline-block;width:84px;height:26px;vertical-align:middle;overflow:hidden;}
.box dd .look{color:#000;margin-right:5px;margin-left:0;}
.box dd .down{width:50px;color:#4B8318;}
.box dd .ghao{color:#4B8318;}
.box .libg{border-top:1px solid #E3EBDD;border-bottom:1px solid #E3EBDD;background-color:#EDF2E9;}</style>
</head>
<body>
<dl class="box">
<dt>
<span>游戏名称</span>
<span>账号说明</span>
<span>测试时间</span>
<span>活动状态</span>
<span>下载</span>
<span>运营公司</span>
<span>资料库</span>
<span>领号</span>
<span>淘号</span>
</dt>
<dd>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd class="libg">
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
<dd>
<a class="gname" href="#" mce_href="#" title="">天外飞仙</a>
<span class="ghao">封测激活码</span>
<span>2010-3-5</span>
<span>发放中</span>
<span class="down">256M</span>
<span>无神世界</span>
<a class="look" href="#" mce_href="#" title="">查看</a>
<a href="#" mce_href="#" title=""><img src="images/fh_lh.gif" mce_src="images/fh_lh.gif" alt="领号" /></a>
<a href="#" mce_href="#" title=""><img src="images/fh_taohao.gif" mce_src="images/fh_taohao.gif" alt="淘号" /></a>
</dd>
</dl>
</body>
</html>


还有一个注意的，希望初学者不要局限于div+css。

了解xHTML+css，写符合标准，具有语义的结构，更是明智之举。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航