基于CSS+JAVAScript的网页换肤特效的设计与实现

摘 要：网站的网页外观是一个网站的外在表现形式，而“换肤”的功能选择能够吸引大量用户的眼球，进而提高网站的浏览量。本文基于CSS技术和JAVAScript脚本语言设计出简单方便的网页换肤效果，为用户提供相应的换肤选择，满足用户的需求。

关键词：网页换肤；CSS；JAVAScript；效果；设计

随着网络的普及及发展，越来越多的人通过网络浏览网页信息，而网站外观是网站的门面，能够给用户直接的视觉感受，从而达到吸引用户眼球的目的。网站可根据需求或时事对网站外观进行更换，例如在喜庆节日里换上具有中国特色的红色，在遇到痛苦时事时换上具有沉痛哀悼的黑色等。一些网站为用户提供了相应的网页外观，用户可根据自身喜好对网站外观进行控制，也就是我们常说的“换肤”选择。网页为满足用户对网页风格的需要，可通过多个外部样式表文件实现网页的换肤功能，用户在选择网页样式的过程中程序对样式文件进行修改，进而实现网页的换肤选择。

1 关键技术

1.1 DIV+CSS

层叠样式表（CSS）是一种控制网页样式的标记性语言，它能够分离网页内容和样式信息，进而达到定义网页位置、颜色和字体等外观的目的。DIV元素主要为XHT-ML文档内的block-level内容提供相应的背景和结构元素，DIV+CSS组合可有效实现网页的应用布局。HTML并不只是单用DIV标签，DIV会结合许多标签一起使用，而合理的标签应用及标准的Web页面结构的相互结合才能保证站点内容的索引速率。

1.2 JavaScript

因特网中常用的脚本语言是JavaScript，通常利用JavaScript给XHTML网页添加各项功能，以响应用户操作。 功能十分强大，能够有效监测网页内各项动态，并及时予以相应反应，显示网页内容。通过JavaScript功能，能够增加网页的灵活性，用户可根据自身需求决定网页的内容及外观。CSS是设定的静态样式，CSS则是帮助实现各种动态功能，而CSS和JavaScript的联合使用，可制定出多种效果。

2 特效设计软件

通过Visual Studio或Dreamweave r对特效进行编辑，在Dreamweave r中，HTML代码和CSS代码均有良好的语法提示，编写具体的CSS代码时可通过回车键或空格键触发语法提示，程序编辑者可根据语法提示选择相应的属性，按回车键选定该属性，通过显示出的属性值选择需要的选项。Visual Studio与Dreamweave r一样具有语法提示，但在Visual Studio中，在结束输入用到的开始标签后，系统会自动添加结束标签。

3 网页换肤特效的实现

为需要更换皮肤效果的网页设计并制作相应的外部样式表文件，通过脚本语言切换网页样式文件，进而实现用户对网页的换肤效果。

制作样式文件a.css，输入如图1所示样式代码；然后制作样式文件b.css，输入如图2样式代码。

然后制作静态网页，用户根据自身需求选择不同的网页效果按钮，服务器便可以通过代码document.all.mycss.href=“cssName.css”加载相应的CSS文件，从而实现网页样式的切换。

4 结语

本文分析并总结出基于CSS技术的网页换肤特效设计，通过结合CSS和JavaScript技术，实现方便快捷的网页换肤功能。网站构建者可通过本文介绍的方式构建出符合用户需求的网站外观设置，为用户提供相应的换肤选择。人性化的网站网页设计能够更好的吸引用户，进而提高网站的浏览量。

[参考文献]

[1]柳长青.一种新型网页换肤技术的实现[J].电脑学习，2008（2）：29-30.

[2]吴保文.CSS样式表在常见网页布局结构中的实现[J].文山师范高等专科学校学报，2012，25（3）：66-69.