变脸：用CSS+JS打造的网页皮肤

sunhw0725

每个人都有不同程度的审美疲劳，说俗一点就是喜新厌旧，对于网页，如何把浏览者的审美疲劳拒之门外，使之对网页保持某种意义上的新鲜感，这是一个值得研究的问题。其实，很多大型网站或者个人网站都会不定期地对网页进行改版，这些都可以归纳为一个字，那就是“变”，不停地变换网页的布局与样式，就是为了迎合人们不断变化的口味。

CSS核心：属性重定义

先来看几个小技巧：

1、给链接加上修饰

我们通常会用样式表以外的元素对链接进行修饰，比如使用图片、使用表格、使用其他标签，其实我们可以对<a>标签用样式表来定义，为了过程简单，我们直接在<a>中使用style来定义。

A：给链接加上边框

为什么要给链接加边框呢，通常情况下我们在导航部分会给链接作些边框修饰，如果用样式表来定义，我们可以这样写：

<a style="border:1px solid #ccc;" href="http://www.chinahtml.com/" >带边框的链接</a>

这是效果:带边框的链接

当然，这样的边框并不好看，我们还需要对其设置一下内边距。如下代码：

<a style="border:1px solid #ccc;padding:5px;" href="http://www.tzlink.com/">带边框的链接</a>

这里是效果：带边框的链接

B：给链接加上背景颜色

其实这个效果也并没有达到美观的效果，我们可以为其添加背景颜色，代码如下：

<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.tzlink.com/">带边框的链接</a>

这里是效果：带边框的链接

这样的边框和背景色也许不是您想要的，您可以自己修改颜色参数。

C：给链接加上文字修饰

通常情况下我们可以在<a>标签中使用<b>标签或<strong>标签来加粗文字链接，实际上这都是多余的，我们只要在<a>标签中这样定义：

<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;font-weight:bold;" href="http://www.chinahtml.com/">带边框的链接</a>

这里是效果：带边框的链接

[ 本帖最后由 sunhw0725 于 2007-10-8 14:22 编辑 ]

sunhw0725

2、重定义原始标签的属性

什么叫重定义原始标签的属性？举个简单的例子：<b>标签的作用在于把文字显示为粗体，这是浏览器对<b>标签的默认属性的解释。但我们可以通过样式表对其进行改写，如下代码：

<b style="font-weight:100;">被重定义属性的<b>标签</b>

这里是效果：被重定义属性的<b>标签

大家会看到上面的这几个字“被重定义属性的<b>标签”显示为正常文字，而非粗体，这是因为<b>的font-weight属性被重新定义了，所以在显示的时候会优先解析CSS对其的定义。

当然，我们同样可以对<b>标签加诸如边框、背景色、上划线下划线之类的修饰，见以下代码：

<b style="border:1px solid #FF6600;background-color:#FFEFE8; padding:5px; text-decoration:underline;">被修饰的<b>标签</b>

这里是效果：被修饰的<b>标签

综上所述，html中几乎所有尖角符号内的标签都可以用来样式重新定义，进而改变这些标签的默认属性。

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

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

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

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

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

sunhw0725

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

既然要设计出美观的网页，那么就要很好地应用颜色技巧、边框技巧等，一种比较好的设计方法是<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>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P></TD>
<TD vAlign=top width=80>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A>
<P class=pstyle><A href="http://www.tzlink.com">右侧导航</A> </P></TD></TR>
<TR>
<TD align=middle colSpan=2>
<P class=pstyle><A href="www.tzlink.com">底部导航</A>|<A href="www.tzlink.com">底部导航</A>|<A href="http://www.tzlink.com">底部导航</A>|<A href="http://www.tzlink.com">底部导航</A></P></TD></TR></TBODY></TABLE>

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

<style>
.pstyle{  
background-color:#fff;
padding:5px;
margin:5px;
font-size:12px;
}
td{
border:1px solid #FF8040;
background-color:#FFEBE1;
}
a{
color:#FF8040;}
</style>

sunhw0725

为了保持新鲜感，你可以定义几种方案并随机调用样式表。本文采用JS来不停地改变样式属性，加入如下JS代码：

<script language="javascript">
if (document.getElementById) {
var r = Math.floor(Math.random()*241);
var g = Math.floor(Math.random()*241);
var b = Math.floor(Math.random()*241);
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3;
var p1 = .1;
var p2 = .15;
var p3 = .2;
getLighterRGBShades();
var ri = Math.floor(Math.random()*5);
var gi = Math.floor(Math.random()*5);
var bi = Math.floor(Math.random()*5);
}
function setStyleByTag(e, p, v) {
var elements = document.getElementsByTagName(e);
for(var i = 0; i < elements.length; i++) {
elements.item(i).style[p] = v;
}
}

function getLighterRGBShades() {
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

function changeLinkColor() {
if (!document.getElementsByTagName) {return false;} // unclean! unclean!
if (r>239||r<1) ri=ri*-1;
if (g>239||g<1) gi=gi*-1;
if (b>239||b<1) bi=bi*-1;
r+=ri;
g+=gi;
b+=bi;
setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')');
setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')');  
setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid');  
getLighterRGBShades();
setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')');
setTimeout('changeLinkColor()',40);
}

function getLighterRGBShades() {
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

function init() {
changeLinkColor();
}  
</script>

代码:

<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>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P>
<P class=pstyle>此处为被定义了边框以及背景的&lt;p&gt;标签，当然同时可以定义行高、字体大小、内边距和外边据等</P></TD>
<TD vAlign=top width=80>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A>
<P class=pstyle><A href="http://www.chinahtml.com">右侧导航</A> </P></TD></TR>
<TR>
<TD align=middle colSpan=2>
<P class=pstyle><A href="www.chinahtml.com">底部导航</A>|<A href="http://www.chinahtml.com">底部导航</A>|<A href="http://www.chinahtml.com">底部导航</A>|<A href="http://www.chinahtml.com">底部导航</A></P></TD></TR></TBODY></TABLE>
<script language="javascript">
if (document.getElementById) {
var r = Math.floor(Math.random()*241);
var g = Math.floor(Math.random()*241);
var b = Math.floor(Math.random()*241);
var rp1, gp1, bp1, rp2, gp2, bp2, rp3, gp3, bp3;
var p1 = .1;
var p2 = .15;
var p3 = .2;
getLighterRGBShades();
var ri = Math.floor(Math.random()*5);
var gi = Math.floor(Math.random()*5);
var bi = Math.floor(Math.random()*5);
}
function setStyleByTag(e, p, v) {
var elements = document.getElementsByTagName(e);
for(var i = 0; i < elements.length; i++) {
elements.item(i).style[p] = v;
}
}

function getLighterRGBShades() {
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

function changeLinkColor() {
if (!document.getElementsByTagName) {return false;} // unclean! unclean!
if (r>239||r<1) ri=ri*-1;
if (g>239||g<1) gi=gi*-1;
if (b>239||b<1) bi=bi*-1;
r+=ri;
g+=gi;
b+=bi;
setStyleByTag('a','color','rgb('+r+', '+g+', '+b+')');
setStyleByTag('p','border','rgb('+r+', '+g+', '+b+')');  
setStyleByTag('td','border','rgb('+r+', '+g+', '+b+') 1px solid');  
getLighterRGBShades();
setStyleByTag('td','background','rgb('+rp2+', '+gp2+', '+bp2+')');
setTimeout('changeLinkColor()',40);
}

function getLighterRGBShades() {
rp1=parseInt((r*p1)+(255-(255*p1)));
gp1=parseInt((g*p1)+(255-(255*p1)));
bp1=parseInt((b*p1)+(255-(255*p1)));
rp2=parseInt((r*p2)+(255-(255*p2)));
gp2=parseInt((g*p2)+(255-(255*p2)));
bp2=parseInt((b*p2)+(255-(255*p2)));
rp3=parseInt((r*p3)+(255-(255*p3)));
gp3=parseInt((g*p3)+(255-(255*p3)));
bp3=parseInt((b*p3)+(255-(255*p3)));
}

function init() {
changeLinkColor();
}  
init();
</script>

这段代码中的语句setTimeout('changeLinkColor()',40)，其中的40是指变脸间隔时间，当然，你可以任意改变其大小。这段代码并不复杂，读者可以自行研究。