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

sunhw0725 · 发表于 2007-10-8 14:20:07

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

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 · 发表于 2007-10-8 14:20:56

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 · 发表于 2007-10-8 14:21:15

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

既然要设计出美观的网页，那么就要很好地应用颜色技巧、边框技巧等，一种比较好的设计方法是<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.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 · 发表于 2007-10-8 14:21:49

为了保持新鲜感，你可以定义几种方案并随机调用样式表。本文采用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>此处为被定义了边框以及背景的<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.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是指变脸间隔时间，当然，你可以任意改变其大小。这段代码并不复杂，读者可以自行研究。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

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

相关帖子