www.17rumen.com 一起入门视频教程下载

在没有接触 div + css 之前，要编写一个 表格，最常用就是 table 了，

例如
<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
</table>

这样就可以 制作出一个表格， 不过对比之下 使用 dl dt dd 更加方便，代码量也少。

当然这不意味着 完全可以替换 table ， 主要还是针对 2列的表格，

说了这么多，还是让我们看看 要做出来的效果吧。

这就是今次我们要制作的表格，使用 div css 重新定义 dl dt dd 样式。

=====================

不多说了 马上开始吧，可以看到 直接使用

<div>
 <dl>
  <dt>1111111</dt>
  <dd>222</dd>
 </dl>
</div>
效果不明显，下面通过 css 来进行重新定义。

#news {
 width: 600px;
 height: 250px;
 border: 2px solid #eee;
}
定义好 显示新闻的div块 大小 高度， 如果不合适的话，等下在进行修改

下面到 dl dt dd 这些标签了，

我们想要的效果是把 新闻文章标题 在左边显示， 右边显示 日期。

#news dl dt {
 float: left;
}

#news dl dd {
 float: right;
}

看到了吧， 效果出来了 呵呵。

但是添加多几篇文章 页面就乱了， 还要对 dl 进行定义

#news dl {
 float: left;
}

然后在 处理行距 。。。margin: 5px;   现在看上去好多了。

把日期字体 设置浅颜色一些。color: #d8d8d8;

加入 一个标题， 说明 这是最新的文章列表，设置一下背景颜色

#news h1 {
 font-size: 16px;
 margin: 0px;
 background: #eee;
}

这样效果就出来了。。。在对字体， 还有 div 大小 高度 做进一步修改

好了，这样就修改完毕， 至于颜色 方面 可以根据自己网站需要 进行搭配，

下面用 FireFox 3.5 进行预览 看看是否 正常显示 出来

好，一切正常。。。  视频就演示到这里，可以看到 比起table ，代码清晰很多

而且修改起来也方便，只要修改 css 就可以了。 视频就到这里，谢谢。88

“div+css 09 使用 dl dt dd 编写新闻文章列表表格代替table”没有评论