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

时间:2008-10-06 10:44:26  来源:第二电脑网上收集  作者:

  第二电脑网导读:会不定期地对网页进行改版,这些都可以归纳为一个字,那就是“变”,不停地变换网页的布局与样式,就是为了迎合人们不断变化的口味。CSS核心:属性重定义先来看几个小技巧:1、给链接加上修饰我们通常会用样式表以外的元素对链接进行修饰,比如使用图片、使用表格、使用其他标签,其实我们可以对<a>标签用样式表来定...
  正文:

变脸:用Css+JS打造的网页皮肤

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

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.chinahtml.com/">带边框的链接</a>

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

B:给链接加上背景颜色

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

<a style="border:1px solid #ccc;padding:5px;background-color:#efefef;" href="http://www.chinahtml.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>

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

变脸:用CSS+JS打造的网页皮肤》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/2008-10-06/1906.html

 1/4    1 2 3 4 下一页 尾页


关键字:

关于《变脸:用CSS+JS打造的网页皮肤》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td