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

请输入用户名:

请输入密码:

请输入确认密码:

请选择性别:

男

女

请选择爱好:

读书

看电影

写博客

看资料

请输入联系方式:

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

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

html 页面换皮肤,HTML中如何实现更换网页皮肤相关推荐

html背景自动换,html页面换皮肤颜色、背景图片（更换页面背景，常驻缓存）刷新保存...
利用样式文件,使网页能够更换不同的主题风格,这个只是简单的小列子,更换了背景图,和字体颜色,更换主题的基本原理是这样的.通过更改,link标签里的href属性,加载不同的样式文件.这里还用到了一款JQ ...
一键换肤丨酷雷曼VR全景系统皮肤高燃登场
重磅更新,酷雷曼VR全景系统皮肤高燃登场,一键换肤,全景作品外观皮肤随意选择,想用哪款用哪款. 酷雷曼VR全景皮肤功能,为各行各业定制更适合行业属性以及行业需求的实用性功能皮肤,采用一键换肤的快捷方式 ...
html br excel,如何将页面的在Excel中正确换行
在页面的导致导出Excel中是会以多行的方式显示,达不到页面在一个单元格中进行换行,为此我们有以下两种方式: 1.CSS样式方式 2.JS方式,如果能够100%命中的话,采用这种方式最好. func ...
H5页面在微信浏览器中打开，右上角没有出现三个点
在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换 ...
页面换肤（点击事件）
今天我们来写一个页面换肤的案例,就是我们点击哪个颜色页面就变成那个颜色: 代码 HTML部分首先我们要设置好HTML部分的内容(方块按钮,文字,图片等),并且为写好的内容添加好所需的类名,id名,方 ...
盒子拖拽-登录验证/阻止a链接跳转/页面换肤(点击小图，切换大图)/
01-盒子拖拽-登录验证 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset=& ...
vue修改代码同步页面_vue修改数组中对象属性值页面不同步更新渲染问题处理
之前在操作一个接口的时候,由于数据结构比较特殊,vue数组中嵌套了更深的对象,并且在页面操作的过程中对对象属性做了增加.之后蛋疼的发现页面并没有同步渲染. 问题原因: 由于javascript的限制, ...
第三篇：属性_第二节：控件属性在页面及源码中的表示方式
一.属性在页面及源码中的表示方式认真地看看页面中声明控件的代码,你会发现控件属性在页面中的表示千变万化.我们看看下面这些: <%@ Page Language="C#" A ...
Document.visibilityState 页面监听 vue中实现离开页面时计时停止：停止计时后从上一次开始计时
概述 Document.visibilityState (只读属性), 返回document的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签 ...
html判断是否在页面,html判断当前页面是否在iframe中的实例
html判断当前页面是否在iframe中的实例在做HTML页面的时候,经常会遇到"如果当前页面显示在iframe中,我们就相应的处理" 判断方法为: //判断是否在iframe中 ...

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

html 页面换皮肤,HTML中如何实现更换网页皮肤相关推荐

最新文章

热门文章