关键词：
1、需求分析
为网站”换肤"，为用户提供了多种选择，提高了用户的满意度，同时也能提高网站的知名度。
2、技术分析
基于HTML、CSS、JavaScript。
3、详细分析
点击第一栏颜色按钮，网页会转换成对应颜色页面。
3.1 HTML部分
如图，页面内容由两部分构成，皮肤颜色按钮栏，和导航栏，也就是两个横向的无序列表。
<body>
<div id="outer">
<ul id="skin">
<li id="red" title="红色">红</li>
<li id="green" class="current" title="绿色">绿</li>
<li id="black" title="黑色">黑</li>
</ul>
<ul id="nav">
<li><a href="javascript:;">新闻</a></li>
<li><a href="javascript:;">娱乐</a></li>
<li><a href="javascript:;">体育</a></li>
<li><a href="javascript:;">电影</a></li>
<li><a href="javascript:;">音乐</a></li>
<li class="last"><a href="javascript:;">旅游</a></li>
</ul>
</div>
</body>
3.2 CSS部分
<style>
*
margin:0;
padding:0;
body
width:100%;
height:100%;
bodyfont:12px/1.5 Tahoma;
/*所有表项去除标志*/
lilist-style-type:none;
/*未访问的链接和已访问的链接去除下划线*/
a:link,a:visitedtext-decoration:none;
/*鼠标悬浮在链接上，显示下划线*/
a:hovertext-decoration:underline;
/*设置整个元素宽度，居中，overflow:hidden作用:1、隐藏超出内容2、清除浮动
造成的影响，防止被其他元素侵犯，加上zoom:1考虑浏览器兼容。*/
#outer
width:500px;
margin:0 auto;
overflow:hidden;
zoom:1;
#skin,#navoverflow:hidden;zoom:1;
#skinmargin:10px 0;
#skin li
float:left;
width:6px;
height:6px;
cursor:pointer;
overflow:hidden;
margin-right:10px;
/*text-indent是首行缩进，text-indent:-9999px:将文字甩到屏幕以外，即隐藏*/
text-indent:-9999px;
/*边框宽度,实心边框*/
border-width:4px;
border-style:solid;
/*!important具有应用优先权，优先使用该样式，即页面的默认皮肤*/
#skin li.currentbackground:#fff!important;
#redborder-color:red;background:red;
#greenborder-color:green;background:green;
#blackborder-color:black;background:black;
#navborder:1px solid #fff;
#nav li
float:left;
width:82px;
line-height:25px;
text-align:center;
/*给li标签添加右边框，最后一个标签与元素的右边框重复，需要把最后一个标签的右边框去掉，即border-right-width:0
border-right:1px solid #fff;
#nav li.lastwidth:83px;
border-right-width:0;
#nav li acolor:#fff;
</style>
3.3 JavaScript部分
<link href="green.css" rel="stylesheet" type="text/css" />//建立一个外部样式表链接
<script>
window.onload = function ()//页面加载完成时调用函数
var oLink = document.getElementsByTagName("link")[0];//获得页面的第一个链接，即href="green.css"，当页面加载完成时便首先连接到该样式表。
var oSkin = document.getElementById("skin").getElementsByTagName("li");//获得皮肤栏里的li标签,组成数组，即红绿黑颜色组合。
for(var i = 0; i< oSkin.length; i++)
oSkin[i].onclick = function ()//给oSkin[i]数组里的每个元素绑定点击函数，点击红标签时变红，绿标签时变绿，黑标签时变成黑色。
for(var p in oSkin) oSkin[p].className = "";//声明一个变量p，p访问数组 oSkin[],那么 oSkin[p]即为数组里的每一个元素，即红绿蓝标签，添加一个空类名。
this.className = "current";//this.className为红绿蓝标签的随机标签类名=current=<li id="green" class="current">，此时点击皮肤烂任一标签，页面变成绿色。
oLink[‘href‘] = this.id + ".css";// oLink[‘href‘]链接变为标签的id的css样式，标签的id为red、green、black，转变为颜色样式，实现单击皮肤栏链接颜色样式，实现网页颜色改变。
;
</script>
green.css：
body background:#A3C5A8; #nav background:green; border-color:#fff; #nav li border-color:#fff;
2.1网页换肤
功能：鼠标点击不同的2个input进行换肤（切换样式表）事件：onclick属性：样式表link里的href<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><title 查看详情
js实现换肤效果
...换对应的CSS样式表文件。例如导航网站Hao123的右上方就有网页换肤功能。除了切换CSS样式表文件之外，通常的网页换肤还需要通过Cookie来记录用户之前更换过的皮肤，这样下次用户访问的时候，就可以自动使用上次用户配置的选... 查看详情
网页换肤,模块换肤,jquery的cookie插件使用（转）
...：然后点击天蓝色按钮换成天蓝色皮肤如下图：然后关闭网页重新打开或者在打开另一个网页如下图：因为皮肤用Cookie保存了下来，所以不会重置 具体的实现代码如下：<!DOCTYPEhtml><htmllang="en"xmlns="http://www.w3.org/1999/xhtml... 查看详情
网页换肤效果系统界面切换皮肤样式
近期需要整理后台系统的界面皮肤样式。就是看一种风格样式习惯了，想换点别的样式界面思考了一段时间，开始想偏了，想直接在现有样式直接修改。比如：红色，绿色。思考后，还是写两套皮肤样式，进行切换吧。 ... 查看详情
网上找到的一个jquery版网页换肤特效
这个跟我之前在锋利的JQuery那本书里看到的那个一模一样。<!DOCTYPEhtml><html><head> <metaname=""content=""charset="utf-8"/><title>jquery实现页面皮肤切换并保存-柯乐义</title><basetarget="_blank"/>< 查看详情
stylish——一键为网页换肤，改变字体大小，去除广告
今天给大家介绍的是一款非常好用的插件stylishstylish是一款可以为网站自定义主题的插件可以在chrome的应用商店找到也可以通过网址访问https://userstyles.org/应用商店找到安装即可 点击网站也可以进入官网进入网站后输入你想... 查看详情
简单的js+css实现网页自定义换肤
参考技术A主要原理是利用css变量设置颜色，用js动态修改变量，使颜色变化，兼容性如下；实现换肤之前先要了解一下伪类选择器:root，还有css的var()函数和setProperty()函数:root是一个伪类，表示文档根元素，非IE及IE8及以上浏览器... 查看详情
用.net做网站，在页面放一个按钮，点击按钮实现网页换肤功能，求代码
用js做，用两个link元素分别引用两个css文件，然后点击按钮的时候将一个disable，另一个启用举个例子<linkrel="AlternateStyleSheet"type="text/css"href="../style/style2.css"id="link2"/><linkrel="StyleSheet"type... 查看详情
jquery之换肤与cookie插件
有时候一个网页可以有多个皮肤进行选择，也就是不同的背景，或是一整套新的css，能使整个页面变成另一种风格。这个功能可以用jQuery来实现。外加cookie插件。有了cookie，就可以长时间的保存选择后的背景样式，而不至于每次... 查看详情
chrome扩展stylish：给不喜欢某个网站一键「换肤」
...以把百度首页变成这样：它还能把知乎「拍扁」，让微博网页版变得简洁无比，让Feedly用上MaterialDesign……这个神奇的Stylish实际上是一个浏览器 查看详情
chrome扩展stylish：给不喜欢某个网站一键「换肤」
...以把百度首页变成这样：它还能把知乎「拍扁」，让微博网页版变得简洁无比，让Feedly用上MaterialDesign……这个神奇的Stylish实际上是一个浏览器 查看详情
android换肤-基于databing的一种思路
...篇文章的思路呢，其实是前段时间做前端开发的时候，写网页，用Vue嘛，数据驱动的方式，不过大部分人应该都知道这个东西了！~ 以前换肤的实现呢，要么就是换主题，要么呢，就是要么设置tag或者自定义一些规则，... 查看详情
vue+sass实现简单的换肤功能
...同的域名，展示不同的主题，个人感觉这个功能很类似于网页的换肤功能。大致想法是，先进行预设方案，然后根据不同的域名展示不同的主题，大概的思路是给html标签设置一个data-theme属性，Sass根据对应的属性值，判断使用不... 查看详情
android换肤（全局换肤，部分换肤，字体替换，导航栏替换，自定义view换肤，夜间/日间模式）(代码片段)
采集大致流程监听所有activity的生命周期回调//SkinActivityLifecycleapplication.registerActivityLifecycleCallbacks(newSkinActivityLifecycle());创建activity的时候自定义布局工厂//SkinLayoutFactory@OverridepublicvoidonActivityCreat 查看详情
网页变肤色
<!DOCTYPEhtml><html><head> <title>网页换肤</title> <scripttype="text/javascript"src="js/jquery-3.2.0.min.js"></script> <scripttype="text/javascript"src="js/jqu 查看详情
setcontentview流程及应用换肤
SetContentView流程及应用换肤SetContentView流程LayoutInflater.inflate流程LayoutInflaterCompat.setFactory方法及换肤动态换肤方案SetContentView流程LayoutInflater.inflate流程LayoutInflaterCompat.setFactory方法及换肤在上边分析setContentView的流 查看详情
前端换肤方案(代码片段)
前端换肤方案方法特点兼容性推荐度利用class命名空间最简单的换肤方案准备多套CSS主题最常用推荐动态换肤支持浏览器热换肤，最酷炫less在线编译实现不推荐CSS变量换肤不考虑IE，最佳换肤方式使用css-vars-ponyfill解决兼容性问... 查看详情
android换肤框架搭建及使用(3完结篇)(代码片段)
本系列计划3篇:Android换肤之资源(Resources)加载(一)setContentView()/LayoutInflater源码分析(二)换肤框架搭建(三)—本篇tips:本篇只说实现思路,以及使用,具体细节请下载代码查看!本篇实现效果:fragment换肤recyclerView换肤自定义view属性换肤打... 查看详情