首页 > > 网页制作 > css >

变脸：用CSS JS打造的网页皮肤(2)

2008-02-23 08:36:08来源：互联网阅读 ()

简洁美：用表格和段落进行网页布局设计

通常，菜鸟们会采用表格和段落来进行网页布局设计，实际上这称不上网页布局设计，只不过是一些简单的排版罢了；然而真正的高手他们可以仅使用表格和段落设计出美观的网页来，而且绝对符合W3C标准，在大多数情况下满足了各种浏览器对代码的解析。

首先你要明白为何要使用表格和段落进行网页设计，它们之间的搭配有何优势？

其实，使用表格和段落来进行网页设计的优势非常明显，首先，表格作为一种布局元素在网页中使用得非常多，设计者能够随心所欲地利用表格来划分网页各个部分的功能。但必须一提的是，表格虽然好用但不能滥用，滥用表格会使页面显得臃肿不堪，网页废代码增多不仅浪费大量带宽，降低网页下载速度，影响用户体验，同时也违反了搜索引擎所支持的网页简单化要求，一个优秀的网页设计师必须考虑这两个因素。其次，段落在网页排版中也大量使用，一个回车键就是一个段落，而且代码非常简洁，使用起来非常方便。最后一个优势在于使用CSS重定义表格属性和段落属性，使之获得完美的视觉效果并达到简单就是美的最高境界。

正因为表格和段落在网页布局设计中各自的优势，我们可以充分利用两者的功用，让表格完成整体布局，而让段落在细节上给排版给予更大的支持，这是这对“黄金组合”最大的优势所在。

变脸：灵活运用标签的可定义样式

既然要设计出美观的网页，那么就要很好地应用颜色技巧、边框技巧等，一种比较好的设计方法是<p>和<td>采用相同的颜色，<p>的背景色为白色而表格的背景色采用比<p>以及<td>的边框颜色浅的同类色彩，见以下实例：

<STYLE> .pstyle{ background-color:#fff; padding:5px; margin:5px; font-size:12px; } td{ border:1px solid #FF8040; background-color:#FFEBE1; } a{ color:#FF8040;} </STYLE> <TABLE title=不停变换的页面样式 cellSpacing=3 cellPadding=0 width=250 border=0> <TBODY> <TR> <TD vAlign=top> <P class=pstyle>此处为被定义了边框以及背景的<p>标签，当然同时可以定义行高、字体大小、内边距和外边据等</P> <P class=pstyle>此处为被定义了边框以及背景的<p>标签，当然同时可以定义行高、字体大小、内边距和外边据等</P> <P class=pstyle>此处为被定义了边框以及背景的<p>标签，当然同时可以定义行高、字体大小、内边距和外边据等</P></TD> <TD vAlign=top width=80> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> <P class=pstyle><A href="http://www.webjx.com">右侧导航</A> </P></TD></TR> <TR> <TD align=middle colSpan=2> <P class=pstyle><A href="http://www.webjx.com">底部导航</A>|<A href="http://www.webjx.com">底部导航</A>|<A href="http://www.webjx.com">底部导航</A>|<A href="http://www.webjx.com">底部导航</A></P></TD></TR></TBODY></TABLE>

我们只需要定义其中的p、td以及a的样式属性为：