发新话题
打印

[分享] 变脸:CSS+JS让网页浏览者不再审美疲劳

变脸:CSS+JS让网页浏览者不再审美疲劳

变脸:用CSS+JS打造的网页皮肤 每个人都有不同程度的审美疲劳,说俗一点就是喜新厌旧,对于网页,如何把浏览者的审美疲劳拒之门外,使之对网页保持某种意义上的新鲜感,这是一个值得研究的问题。其实,很多大型网站或者个人网站都会不定期地对网页进行改版,这些都可以归纳为一个字,那就是“变”,不停地变换网页的布局与样式,就是为了迎合人们不断变化的口味。 CSS核心:属性重定义 先来看几个小技巧: 1、给链接加上修饰 我们通常会用样式表以外的元素对链接进行修饰,比如使用图片、使用表格、使用其他标签,其实我们可以对标签用样式表来定义,为了过程简单,我们直接在中使用style来定义。 A:给链接加上边框 为什么要给链接加边框呢,通常情况下我们在导航部分会给链接作些边框修饰,如果用样式表来定义,我们可以这样写:
复制内容到剪贴板
代码:
<a style="border:1px solid #ccc;" href="http://homepage.yesky.com/" >带边框的链接</a>
这是效果:
带边框的链接 当然,这样的边框并不好看,我们还需要对其设置一下内边距。如下代码:
复制内容到剪贴板
代码:
<a style="border:1px solid #ccc;padding:5px;" href="http://www.ezubbs.91.tc/">带边框的链接</a>
这里是效果: 带边框的链接
B:给链接加上背景颜色 其实这个效果也并没有达到美观的效果,我们可以为其添加背景颜色,代码如下:
复制内容到剪贴板
代码:
<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.ezubbs.91.tc/">带边框的链接</a>
这里是效果: 带边框的链接
这样的边框和背景色也许不是您想要的,您可以自己修改颜色参数。
【十六道题,奖金和证书的催命符】

TOP

【十六道题,奖金和证书的催命符】

TOP

2、重定义原始标签的属性 什么叫重定义原始标签的属性?举个简单的例子:标签的作用在于把文字显示为粗体,这是浏览器对标签的默认属性的解释。但我们可以通过样式表对其进行改写,如下代码:
复制内容到剪贴板
代码:
<b style="font-weight:100;">被重定义属性的<b>标签</b>
这里是效果: 被重定义属性的标签 大家会看到上面的这几个字“被重定义属性的标签”显示为正常文字,而非粗体,这是因为的font-weight属性被重新定义了,所以在显示的时候会优先解析CSS对其的定义。 当然,我们同样可以对标签加诸如边框、背景色、上划线下划线之类的修饰,见以下代码:
复制内容到剪贴板
代码:
<b style="border:1px solid #FF6600;background-color:#FFEFE8; padding:5px; text-decoration:underline;">被修饰的<b>标签</b>
这里是效果: 被修饰的标签
综上所述,html中几乎所有尖角符号内的标签都可以用来样式重新定义,进而改变这些标签的默认属性。 简洁美:用表格和段落进行网页布局设计 通常,菜鸟们会采用表格和段落来进行网页布局设计,实际上这称不上网页布局设计,只不过是一些简单的排版罢了;然而真正的高手他们可以仅使用表格和段落设计出美观的网页来,而且绝对符合W3C标准,在大多数情况下满足了各种浏览器对代码的解析。 首先你要明白为何要使用表格和段落进行网页设计,它们之间的搭配有何优势? 其实,使用表格和段落来进行网页设计的优势非常明显,首先,表格作为一种布局元素在网页中使用得非常多,设计者能够随心所欲地利用表格来划分网页各个部分的功能。但必须一提的是,表格虽然好用但不能滥用,滥用表格会使页面显得臃肿不堪,网页废代码增多不仅浪费大量带宽,降低网页下载速度,影响用户体验,同时也违反了搜索引擎所支持的网页简单化要求,一个优秀的网页设计师必须考虑这两个因素。其次,段落在网页排版中也大量使用,一个回车键就是一个段落,而且代码非常简洁,使用起来非常方便。最后一个优势在于使用CSS重定义表格属性和段落属性,使之获得完美的视觉效果并达到简单就是美的最高境界。 正因为表格和段落在网页布局设计中各自的优势,我们可以充分利用两者的功用,让表格完成整体布局,而让段落在细节上给排版给予更大的支持,这是这对“黄金组合”最大的优势所在。
【十六道题,奖金和证书的催命符】

TOP

变脸:灵活运用标签的可定义样式 既然要设计出美观的网页,那么就要很好地应用颜色技巧、边框技巧等,一种比较好的设计方法是

采用相同的颜色,

的背景色为白色而表格的背景色采用比

以及

的边框颜色浅的同类色彩,见以下实例:


 

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

 

复制内容到剪贴板
代码:
&lt;style&gt; .pstyle{ background-color:#fff; padding:5px; margin:5px; font-size:12px; } td{ border:1px solid #FF8040; background-color:#FFEBE1; } a{ color:#FF8040;} &lt;/style&gt;

【十六道题,奖金和证书的催命符】

TOP

为了保持新鲜感,你可以定义几种方案并随机调用样式表。本文采用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>
【十六道题,奖金和证书的催命符】

TOP


【十六道题,奖金和证书的催命符】

TOP

这段代码中的语句setTimeout('changeLinkColor()',40),其中的40是指变脸间隔时间,当然,你可以任意改变其大小。这段代码并不复杂,读者可以自行研究。
【十六道题,奖金和证书的催命符】

TOP

发新话题