#article_nr p { padding:5px 0;}

段落之间应该有所间隔，才能让阅读者更加清晰的看清楚每段。因此，每段之间的间距是必不可少的。设置为10像素的间距（5+5=10）

 #article_nr img {width: expression(this.width > 510 ? 510: true); max-width: 510px;padding:4px;border:1px solid #D4E2E3;text-align:center; display:block;  margin:5px auto;}

网页内容的图片控制是比较复杂的。首先，我们要保证的是，图片大小无论多大，都必须正确的显示在我们的文章内容里面，不能有溢出。因此，控制图片最大宽度是必须的。第一个属性是控制图片在IE6中的最大宽度，第二个是控制在火狐IE7等高级浏览器的最大宽度。图片应该有个边框，才好看，后面的所有都是为了让图片显示得更加美观，给图片加上一个边框，这个边框和图片有4像素的间距，图片还需要局中。text-align:center; 是为了IE6，其他的是为了高级浏览器。

 #article_nr a:link,#article_nr a:visited,#article_nr a:active{color:#f60; font-size:14px;}
 #article_nr a:hover{color:#50AC23;font-size:14px;}

你不认为文章中的链接应该以一种更加良好的视觉感受凸显出来吗？如果你也这样认为，那么就加上这段吧！

 #article_nr h1,#article_nr h2,#article_nr h3,#article_nr h4,#article_nr h5 { color:red; padding:5px 0;}

你不在文章之中使用标题吗？那你一定不是一个好的站长。好的站长应该让文章内容更加有条理，因此，使用标题是必须的。而既然使用标题，那么标题当然应该用一种不同的颜色标识出来，而我，使用的是红色。

 #article_nr emBED {width:510px; height:400px; display:block; margin:10px auto;}

你不在网页之中插入视频吗？现在的优酷土豆这么火，不在网站调用点视频，又怎么能显示出我们的网站的优秀呢？那么视频的控制是必须的。固定大小，局中显示，这不是你想要的效果吗？

 #article_nr table { width:100%; border-bottom:none; border-right:1px solid #none; border-left:1px solid #D4E2E3;border-top:1px solid #D4E2E3; text-indent:0; font-size:12px;}

文章中的表格怎么显示？我们使用div+css就代表文章中不能使用表格吗？大错特错，表格作为一个将数据良好显示出来的工具，我们不能不用。而表格的CSS化当然更加重要。

这段控制是控制表格宽度为100%，占据我们的网页的内容部分的宽度的最宽。上边框和左边框为1像素实线某颜色。下边框和右边框为无。（要显示1像素的边框，只能这样做。）
 #article_nr table th { color:#fff; border-bottom:1px solid #D4E2E3; border-right:1px solid #D4E2E3;padding:0 8px; background:#4A71B0;font-size:14px;}

这是控制表格的表头。可能大家都认为表格只有table tr td 这些，殊不知，表格是有表头的 他就是 th 这个必须使用，因为这样可以凸显整个表格。让表格更加有条理。里面的内容大家自己琢磨。
 #article_nr table td {border-bottom:1px solid #D4E2E3; border-right:1px solid #D4E2E3;padding:0 8px;}

这就是控制单元格了。单元格的右边和下边为1像素实线某颜色，和table的控制正好对应，这样就可以制作出1像素的边框的表格了。

 #article_nr table h5 { line-height:150%; overflow:hidden; font-size:12px;}

表格中如果有什么需要突出出来的，用一个H5是最合适不过的了。或者，你也可以用B或者其他的H。我选择了H5，如果你选择其他的，你可以在这里更改或者添加。我用H5的原因是，上面已经定义过H5的颜色是红色了呀。而这个控制是为了让H5看起来更加的合适一些，不会撑高单元格。

 #article_nr table tr:hover { background:#fff;}

最后就是，行变色了。当鼠标放在一行上，这一行会变色，这样会让读者更加清晰的了解到哪里是一行，不会看错行。这对行很多的表格来说，尤其重要。需要注意的是，这个在IE6中是没有任何效果的。在其他高级浏览器中是OK的。如果需要在IE6中实现效果，就必须使用JS来辅助，我个人是不喜欢JS的。所以，省去吧。

通过这样的CSS控制，你便可以用最简单的HTML内容代码，制作出非常养眼的效果了。

表格效果演示：http://www.hezewangzhan.com/about/lianxiwomen.html

图片效果演示：http://www.hezewangzhan.com/news/help/6824.html

链接效果这里面都有了。视频效果演示：http://www.qfsyey.com/characteristic/209.html

下面是整段CSS，回复后下载。如果不想回复，复制上面的去掉注释就可以了。

以下内容只有回复后才可以浏览,请先登录！

文章首发：http://www.hezewangzhan.com/wangluojishu/divcss/7171.html