快捷搜索:

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

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

每小我都有不合程度的审美疲惫,说俗一点便是见异思迁,对付网页,若何把浏览者的审美疲惫拒之门外,使之对网页维持某种意义上的新鲜感,这是一个值得钻研的问题。着实,很多大年夜型网站或者小我网站都邑不按期地对网页进行改版,这些都可以归纳为一个字,那便是“变”,不绝地变换网页的结构与样式,便是为了投合人们赓续变更的口味。

CSS核心:属性重定义

先来看几个小技术:

1、给链接加上修饰

我们平日会用样式表以外的元素对链接进行修饰,比如应用图片、应用表格、应用其他标签,着实我们可以对标签用样式表来定义,为了历程简单,我们直接在中应用style来定义。

A:给链接加上边框

为什么要给链接加边框呢,平日环境下我们在导航部分会给链接作些边框修饰,假如用样式表来定义,我们可以这样写:

带边框的链接

这是效果:

当然,这样的边框并欠好看,我们还必要对其设置一下内边距。如下代码:

带边框的链接

这里是效果:

B:给链接加上背景颜色

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

带边框的链接

这里是效果:

这样的边框和背景致大概不是您想要的,您可以自己改动颜色参数。

C:给链接加上翰墨修饰

平日环境下我们可以在标签中应用标签或标签来加粗翰墨链接,实际上这都是多余的,我们只要在标签中这样定义:

带边框的链接

这里是效果:

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

什么叫重定义原始标签的属性?举个简单的例子:标签的感化在于把翰墨显示为粗体,这是浏览器对标签的默认属性的解释。但我们可以经由过程样式表对其进行改写,如下代码:

被重定义属性的标签

这里是效果:被重定义属性的标签

大年夜家会看到上面的这几个字“被重定义属性的标签”显示为正常翰墨,而非粗体,这是由于的font-weight属性被从新定义了,以是在显示的时刻会优先解析CSS对其的定义。

当然,我们同样可以对标签加诸如边框、背景致、上划线下划线之类的修饰,见以下代码:

被修饰的标签

这里是效果:被修饰的标签

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

简洁美:用表格和段落进行网页结构设计

平日,菜鸟们会采纳表格和段落来进行网页结构设计,实际上这称不上网页结构设计,只不过是一些简单的排版罢了;然而真正的高手他们可以仅应用表格和段落设计出美不雅的网页来,而且绝对相符W3C标准,在大年夜多半环境下满意了各类浏览器对代码的解析。

首先你要明白为何要应用表格和段落进行网页设计,它们之间的搭配有何上风?

着实,应用表格和段落来进行网页设计的上风异常显着,首先,表格作为一种结构元素在网页中应用得异常多,设计者能够为所欲为地使用表格来划分网页各个部分的功能。但必须一提的是,表格虽然好用但不能滥用,滥用表格会使页面显得臃肿不堪,网页废代码增多不仅挥霍大年夜量带宽,低落网页下载速率,影响用户体验,同时也违反了搜索引擎所支持的网页简单化要求,一个优秀的网页设计师必须斟酌这两个身分。其次,段落在网页排版中也大年夜量应用,一个回车键便是一个段落,而且代码异常简洁,应用起来异常方便。着末一个上风在于应用CSS重定义表格属性和段落属性,使之得到完美的视觉效果并达到简单便是美的最高境界。

正由于表格和段落在网页结构设计中各自的上风,我们可以充分使用两者的功用,让表格完成整体结构,而让段落在细节上给排版给予更大年夜的支持,这是这对“黄金组合”最大年夜的上风所在。

变脸:机动运用标签的可定义样式

既然要设计出美不雅的网页,那么就要很好地利用颜色技术、边框技术等,一种对照好的设计措施是

采纳相同的颜色,

的背景致为白色而表格的背景致采纳比

以及

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

.pstyle{

background-color:#fff;

padding:5px;

margin:5px;

font-size:12px;

}

td{

border:1px solid #FF8040;

background-color:#FFEBE1;

}

a{

color:#FF8040;}

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

底部导航|底部导航|底部导航|底部导航

运行代码复制代码另存代码收藏本页

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

为了维持新鲜感,你可以定义几种规划并随机调用样式表。本文采纳JS来不绝地改变样式属性,加入如下JS代码:

.pstyle{

background-color:#fff;

padding:5px;

margin:5px;

font-size:12px;

}

td{

border:1px solid #FF8040;

background-color:#FFEBE1;

}

a{

color:#FF8040;}

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

此处为被定义了边框以及背景的<p>标签,当然同时可以定义行高、字体大年夜小、内边距和外边据等

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

右侧导航

底部导航|底部导航|底部导航|底部导航

运行代码复制代码另存代码收藏本页

这段代码中的语句setTimeout('changeLinkColor()',40),此中的40是指变脸距离光阴,当然,你可以随意率性改变其大年夜小。这段代码并不繁杂,读者可以自行钻研。

您可能还会对下面的文章感兴趣: