CSS换肤简单示例

最新推荐文章于 2024-04-12 16:18:22 发布
最新推荐文章于 2024-04-12 16:18:22 发布
阅读量2k 收藏
点赞数
分类专栏： CSS 文章标签： css web应用开发 stylesheet html float button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangzhongxin/article/details/4643979
版权

 

CSS换肤简单示例

2007-11-06 20:24   阅读8   评论0

一、HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题 1</title>
<link href="cssRed.css" rel="stylesheet" type="text/css" id="cssfile" />
<script language="javascript" type="text/javascript">
function ChangeCSS(color){
  var css=document.getElementById( "cssfile");
css.href=color;
}
</script>
</head>

<body>

<div id="layout">
  <div id="nav">
   <ul>
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>      
   </ul>
  </div>
  <div id="content">
   关于中国万维网联盟(W3CHINA)
   2003-06-20:W3CHINA 中国万维网联盟是一个致力于研究、传播、讨论W3C标准的开放组织，成立于二零零三年六月二十日。作为一个开放组织，各界人士均可申请加入中国万维网联盟 (W3CHINA)。中国万维网联盟(W3CHINA)旨在为Web应用开发者、研究者提供一个学习、研究、讨论W3C与Web技术的平台。我们欢迎各界人士的加入。
  </div>
  <div id="footer">
   <input type="button" id="btnRed" οnclick="ChangeCSS('cssRed.css');" value="红色" />
   <input type="button" id="btnGreen" οnclick="ChangeCSS('cssGreen.css');" value="绿色" />  
  </div>
</div>
</body>

</html>

二、CSS文件 - 红色调

html{
  background-color:#990000;
  height:100%;
}
body{
  height:100%;
  margin:0;
  padding:0;
}
#layout{
  margin:0 auto;
  width:700px;
  height:100%;
  border:1px green dotted;
}
#nav{
  float:right;
  width:20%;
  background-color:#CC3300; 
  height:95%;
}
#content{
  width:80%;
  height:95%;
  float:right;
  background-color:#FFCCCC;
}
#footer{
  width:100%;
  text-align:center;
  height:5%; 
}

三、CSS文件 - 绿色调

html{
  background-color:#006600;
  height:100%;
}
body{
  height:100%;
  margin:0;
  padding:0;
}
#layout{
  margin:0 auto;
  width:700px;
  height:100%;
  border:1px red dotted;
}
#nav{
  float:left;
  width:20%;
  background-color:#339966; 
  height:95%;
}
#content{
  width:80%;
  height:95%;
  float:left;
  background-color:#00CC66;
}
#footer{
  width:100%;
  text-align:center;
  height:5%;
}

TangZhongxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用vue + less 实现简单换肤功能的示例
08-28
下面小编就为大家分享一篇使用vue + less 实现简单换肤功能的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
css换肤的方式
星下云的博客
02-11 537
css
实时动态修改css :root 中的变量实现换肤、主题色的功能
工作的日常记录和平凡的生活分享
04-12 602
到此就完成了动态修改:root变量实现换肤了，具体的应用场景中我们应该是在页面上操作，选中需要的肤色然后修改:root定义的变量值，考虑到浏览器刷新会重置原始状态的值，这里要结合本地存储方式记住选中的肤色。
前端实现动态切换主题色-使用 css/less 动态更换主题颜色（换肤功能）或通过单击更改背景颜色
一往直“前”，直上云“端”
04-16 5432
前端实现动态切换主题色-使用 css/less 动态更换主题颜色（换肤功能）或通过单击更改背景颜色 CSS中原生变量“--”和var() 使用纯CSS控件切换主题颜色或通过单击更改背景颜色，
Vue 换肤的示例实践
11-27
切换主题色其实就是切换 CSS，然而在项目中不仅只有 CSS 需要换肤，图标和图片也需要跟随主题进行切换。于是，写一篇文章来记录下 Vue 中实现换肤的过程，先看下效果吧。 本文主要分三部分：CSS 切换，图标切换和...
Vue + Scss 动态切换主题颜色实现换肤的示例代码
10-15
主要介绍了Vue + Scss 动态切换主题颜色实现换肤的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
jQuery实现简单的网页换肤效果示例
11-24
本文实例讲述了jQuery实现简单的网页换肤效果。分享给大家供大家参考，具体如下： 这里有4个文件：skin.html、blue.css、green.html、red.html，都放在同一目录下。 1、skin.html <!DOCTYPE ...
jQuery实现的网页换肤效果示例
10-21
这个简单的示例展示了jQuery如何轻松地实现网页换肤功能。通过动态修改CSS引用，我们可以快速地切换不同的皮肤，提升网站的交互性和用户满意度。同时，这个例子也可以作为进一步学习jQuery和其他前端技术的基础，如...
CSS全屏换肤
weixin_45820444的博客
08-12 6074
50行代码换5种肤色，包含透明 先把代码奉上，自取自用。直接创建html文件，直接粘贴进去就能用，不能用随便骂。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box{width: 400px;height: 400px;background-color: red;bor
CSS换肤
03-21
NULL 博文链接：https://q445862108.iteye.com/blog/970853
vue + less 自定义换肤
李剑一
04-18 2114
效果展示 基本原理 目前常见的换肤方案无非几种： 通过class选择器/id选择器选中需要更换的DOM，直接修改颜色 书写多套css，通过js进行css的切换 使用modifyVars()方法，修改less.js中相应的less变量更换颜色 在这里提供一种新知晓的换肤开发方案方案分享一下： 使用less，将其中的颜色提升到全局，各自组件/页面引用‘顶级’颜色，通过js修改顶级颜色达到各模块换肤的目的。 开发过程 安装及配置 npm install style-resources-loader -D n
vue + less 实现动态主题换肤功能
weixin_44784401的博客
08-14 2633
vue + less 实现动态主题换肤功能
less合集（二）：动态修改主题颜色一键换肤
hyduan_h5的博客
03-21 4344
需求背景： 1：在需求中，一个平台样式风格基本保持统一；因而需设置一个全局样式配置 2：有时需要可以根据后端数据返回，动态修改主题颜色 方式一 适用技术：css，less，sass等 适用场景：颜色种类不固定的场景 1：在index.html文件中增加配置 <script> window.onload = () => { // 设置主题色 // --buttonColor是自定义的按钮背景样式代号 // 可动态修改，eg:由后端返回接受，可由前端事件修改.
less给网站换肤
一个程序媛
12-07 8187
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。 LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。 根据less可以预处理css语言的这一特性，就可以想到less可以实现一种功能，即“换肤”功能。我最近做的网站就需要“换肤”功能，那当然我就
vue实战-换皮肤2（使用less实现）
我的小熊不见了
02-19 1846
在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能。但是这种方法有一个缺陷，那就是只能用css的语法来实现。这个缺陷在某些变态的需求下会增加我们很多工作量，因此本节中将介绍vue中另一种换皮肤的实现思路，用less语法实现换肤。 上节中讲过，想要达到换皮肤的目的无非就是替换掉样式文件，而一般项目中使用less都会在style标签中import样式文件。但是现在我们想...
纯css换肤
m0_61950846的博客
04-16 1082
css换肤，支持同时更改多种颜色
Vue+Less换肤方案
阿祥_CSDN
08-18 1022
很多前端项目都有换肤的需求，笔者在此分享笔者当前所使用的换肤方案。本文将讲述`Vue+Less`前端项目换肤的设计思路以及开发皮肤主题的步骤。虽然笔者在本文中所使用的是Vue+Less，但是针对该方案而言，亦可扩展为：Vue/React/Angular+Less/Scss。读者在阅读本文时，请着重关注换肤的设计思路，不必局限于具体的技术。
vue中实现换肤效果，运用less很简单
L_eiDigaga的博客
12-30 1779
最近在做一个后台管理系统，最后做的差不多等测试呢，想着如何给项目实现换肤功能呢，项目是vue项目，用的less。最开始想的是在less里面定义好变量，然后点击更改皮肤的时候，修改变量的值，这样，整个项目中用到变量的地方都更改了。 但是，这里有但是，后来想了想 ，如何动态的修改less里面定义的变量，这给卡住了，百度了下也没找到方法，夭折了。如果有小伙伴知道，求告知。 最后想的是用less里的函数来...
html css网页制作示例
最新发布
05-07
以上示例展示了一个简单的网页结构，包括头部、导航、主要内容区域和底部等基本元素，同时使用CSS为网页添加了样式和布局。当你在浏览器中打开这个示例网页时，你会看到一个具有基本美学的页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值