菏泽网站建设

我们每天都在更新网站的内容，事实上，一直以来，网站内容的更新都是极其重要的，而这部分内容的展示又是及其无趣的。除了控制个行高之外，想不到其他什么东西。

但是，我们拥有CSS，我们拥有科汛，难道我们不能做到点什么？

网站内容里面的链接如何控制？网站内容里插入的视频如何控制？网站内容里面的H怎么控制？网站内容里的表格如何控制？

我们如何用最简单的HTML代码表现出最绚烂的网页效果？

跟着我做吧！

#article_nr { font-size:14px; line-height:200%; color:#222; width:538px; overflow:hidden;text-indent:2em;}

控制网页的内容的字体大小为14像素，行高为2倍，颜色为近似黑色的这么一种样色，宽度为网页设计的宽度，超出当然就溢出，最后，最最关键的是，文字缩进2个字符。用这个CSS属性，可以避免你每次都输入N多的空格来控制每段，简洁到极致！

#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内容代码，制作出非常养眼的效果了。

表格效果演示：/about/lianxiwomen.html

图片效果演示：/news/help/6824.html

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

下面是整段CSS。

#article_nr { font-size:14px; line-height:200%; color:#222; width:538px; overflow:hidden;text-indent:2em;}
 #article_nr p { padding:5px 0;}
 #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;}
 #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;}
 #article_nr table th { color:#fff; border-bottom:1px solid #D4E2E3; border-right:1px solid #D4E2E3;padding:0 8px; background:#4A71B0;font-size:14px;}
 #article_nr table td {border-bottom:1px solid #D4E2E3; border-right:1px solid #D4E2E3;padding:0 8px;}
 #article_nr table h5 { line-height:150%; overflow:hidden; font-size:12px;}
 #article_nr table tr:hover { background:#fff;}

• ·04/14将写程序代码视为一种享受！
• ·02/28平价接DIV+CSS重构网站的活
• ·01/16CSS新手必看 CSS控制链接的多种方法技巧
• ·10/29CSS DIV网页布局与TABLE布局的区别
• ·10/29css技巧批量保存div+css图片方法
• ·10/25div+css网站布局设计常见错误大全
• ·10/25网页设计中CSS十大应该注意的问题
• ·10/06【本站原创】实现网站无刷新风格切换方法
• ·10/05DIV+CSS网页布局副作用分析
• ·10/05CSS文件可维护、可读性提高指南