html 页面换皮肤,HTML中如何实现更换网页皮肤

在QQ空间中或者其他网站中有很多一键换肤的功能，今天也进行实现一个简单的换肤功能。

1.实现思路

在实现换肤功能时，我们应该注意到，大部分换肤功能页面中的内容是没有发生变化的，变化的只是背景样式的改变，有的页面中组件位置的调整，所以，实现只需要对同一个页面进行不同样式的替换即可，也就是说，我们有多少皮肤，就得有多少样式。

2.具体实现

首先，我们需要进行准备一个固定的html页面，命名为index.html,其内容如下所示：

同时，我们需要三套css样式，分别命名为flower_branch.css，foresttree.css，snow_partner.css,其内容之一如下所示：

body {

background: url("../images/skin_flower_branch.png");

background-repeat: no-repeat;

background-size: 100% 100%;

background-attachment: fixed;

}

.container {

margin: 20% 20% 2% 10%;

width: 500px;

height: 100%;

color: #4A8B0B;

}

.container input,textarea {

background-color: #94c3aa;

border: 1px solid;

}

这样，当我们进行点击index.html中的按钮进行换肤操作的时候，我们就进行样式的替换，下面是实现代码javaScript：

有了这些准备工作之后，我们就可以进行实际操作了，最后完成的页面如下所示：

一键换肤功能

treeBranch

snowPartner

flowerBranch

请输入用户名:

请输入密    码:

请输入确认密码:

请选择性别:

男

女

请选择爱好:

读书

看电影

写博客

看资料

请输入联系方式:

请输入自我评价:在浏览器中进行测试，我们能够通过按钮进行不同界面的切换，效果图之一如下所示：

下面是源代码链接地址：喜欢的请下载查看具体代码：一键换肤

..