AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

自己写的CSS皮肤动态更换代码

2011-06-20 927
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 先看图吧，这就是最终效果：在默认状态下，或点击红色按钮后：在点击绿色按钮后：在点击蓝色按钮后：在点击黄色按钮后：看了最终效果后，给大家介绍一下皮肤文件的构成情况：yuan.
先看图吧，这就是最终效果：
在默认状态下，或点击红色按钮后：
img_7ff42dbdb29a167d291c8801cef8f3ad.png

在点击绿色按钮后：
img_7a8922688b2226c15c4b33cea5fb72f9.png

在点击蓝色按钮后：
img_8421c42e2ac6bdb855ad3ace958d5d43.png

在点击黄色按钮后：
img_83bfd3da5f3d5fc846aed2783c3c4cfd.png

看了最终效果后，给大家介绍一下皮肤文件的构成情况：
yuan.html
images3/
     left-bottom.gif
     left-top.gif
     right.gif
     right-bottom.gif
     right-top.gif
     images3.css
images-light/
     left-bottom.gif
     left-top.gif
     right.gif
     right-bottom.gif
     right-top.gif
     images3.css
images-dark/
     left-bottom.gif
     left-top.gif
     right.gif
     right-bottom.gif
     right-top.gif
     images3.css
images-notebook/
     left-bottom.gif
     left-top.gif
     right.gif
     right-bottom.gif
     right-top.gif
     images3.css
可以发现除了目录不同，文件名都是一样的。当然不同目录下的文件名虽然一样，但images3.css都一样，而图片都不一样，是不同样式的图片啦。现在让大家看一下images3.css的内容：
  1. body{
  2.     background:#ffff99;
  3.     font:12px/1.5 Arial;
  4. }

  6. .rounded h2{
  7.     margin:0;
  8.     padding:20px 20px 10px 20px;
  9. }

  11. .rounded .main{
  12.     padding:10px 20px 10px 20px;
  13.     margin:-2em 0 0 0;
  14. }

  16. .rounded .footer{
  17. }

  19. .rounded .footer p{
  20.     padding:10px 20px 20px 20px;
  21.     margin:-2em 0 0 0;
  22. }

  24. .rounded{
  25.     background:url(./left-top.gif) top left no-repeat;
  26. }

  28. .rounded h2{
  29.     background:url(./right-top.gif) top right no-repeat;
  30. }

  32. .rounded .main{
  33.     background:url(./right.gif) top right repeat-y;
  34. }

  36. .rounded .footer{
  37.     background:url(./left-bottom.gif) bottom left no-repeat;
  38. }

  40. .rounded .footer p{
  41.     background:url(./right-bottom.gif) bottom right no-repeat;
  42. }

  44. #header,#in,#pagefooter{
  45.     margin:0 auto;
  46. }

  48. #header.rounded, #in{
  49.     width:820px;
  50. }

  52. #container.rounded{
  53.     width:600px;
  54.     float:left;
  55. }

  57. #side.rounded{
  58.     width:200px;
  59.     float:right;
  60. }

  62. #pagefooter.rounded{
  63.     clear:both;
  64.     width:820px;
  65. }

  67. #btn{
  68.     margin:0 0 10px 20px;
  69.     display:inline;
  70. }

之所以会换肤，主要是html代码中的四个按钮，执行了javascript代码而已，请大家参看源代码：
  1. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. html xmlns="http://www.w3.org/1999/xhtml">
  3. head>
  4.     meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     link href="images3/images3.css" rel="stylesheet" type="text/css" id="changecss" />
  6.     
  7.     script language="javascript">
  8.         function getCss(flag){
  9.             document.getElementById('changecss').href = flag + '/images3.css';
  10.         }
  11.         
  12.         function change(num){
  13.             var flag = '';
  14.             switch(num){
  15.                 case 1:flag = "images3";break;
  16.                 case 2:flag = "images-light";break;
  17.                 case 3:flag = "images-dark";break;
  18.                 case 4:flag = "images-notebook";break;
  19.                 default:alert("错误的皮肤号，正在返回");return false;
  20.             }

  22.             getCss(flag);
  23.         }
  24.     /script>
  25. /head>
  26. body>
  27.     div id="header" class="rounded">
  28.         h2>Header/h2>
  29.         div class="main">
  30.             p>
  31.                 这是一行文本，这里作为样例，显示在圆角框。br />
  32.                 这是一行文本，这里作为样例，显示在圆角框。
  33.             /p>
  34.             p>
  35.                 这是一行文本，这里作为样例，显示在圆角框。br />
  36.                 这是一行文本，这里作为样例，显示在圆角框。
  37.             /p>
  38.         /div>
  39.         div class="footer">
  40.             p>
  41.                 这是版权信息文字。
  42.             /p>
  43.         /div>
  44.     /div>
  45.     div id="in">
  46.         div id="container" class="rounded">
  47.             h2>Container/h2>
  48.             div class="main">
  49.                 p>
  50.                     这是一行文本，这里作为样例，显示在圆角框。br />
  51.                     这是一行文本，这里作为样例，显示在圆角框。
  52.                 /p>
  53.                 p>
  54.                     这是一行文本，这里作为样例，显示在圆角框。br />
  55.                     这是一行文本，这里作为样例，显示在圆角框。
  56.                 /p>
  57.                 p>
  58.                     这是一行文本，这里作为样例，显示在圆角框。br />
  59.                     这是一行文本，这里作为样例，显示在圆角框。
  60.                 /p>
  61.                 点这里更换网页皮肤：
  62.                 form id="btn">
  63.                     input type="button" style="background:red;" width="20" onclick="change(1);" />
  64.                     input type="button" style="background:green;" width="20" onclick="change(2);" />
  65.                     input type="button" style="background:blue;" width="20" onclick="change(3);" />
  66.                     input type="button" style="background:yellow;" width="20" onclick="change(4);" />
  67.                 /form>
  68.             /div>
  69.             div class="footer">
  70.                 p>
  71.                     这是版权信息文字。
  72.                 /p>
  73.             /div>
  74.         /div>
  75.         div id="side" class="rounded">
  76.             h2>Side/h2>
  77.             div class="main">
  78.                 p>
  79.                     这是一行文本，这里作为样例，显示在圆角框。br />
  80.                     这是一行文本，这里作为样例，显示在圆角框。
  81.                 /p>
  82.                 p>
  83.                     这是一行文本，这里作为样例，显示在圆角框。br />
  84.                     这是一行文本，这里作为样例，显示在圆角框。
  85.                 /p>
  86.             /div>
  87.             div class="footer">
  88.                 p>
  89.                     这是版权信息文字。
  90.                 /p>
  91.             /div>
  92.         /div>
  93.     /div>
  94.     div id="pagefooter" class="rounded">
  95.         h2>Pagefooter/h2>
  96.         div class="main">
  97.             p>
  98.                 这是一行文本，这里作为样例，显示在圆角框。br />
  99.                 这是一行文本，这里作为样例，显示在圆角框。
  100.             /p>
  101.             p>
  102.                 这是一行文本，这里作为样例，显示在圆角框。br />
  103.                 这是一行文本，这里作为样例，显示在圆角框。
  104.             /p>
  105.         /div>
  106.         div class="footer">
  107.             p>
  108.                 这是版权信息文字。
  109.             /p>
  110.         /div>
  111.     /div>
  112. /body>
  113. /html>
    刚开始还一直有错，整的我很郁闷，后来发现是把getElementById写成了getElementsById，看看一个是ment一个是ments就错误。小心使得万年传啊。
文章标签：
前端开发
JavaScript
容器
关键词：
CSS代码
CSS动态
五岳之巅
目录
相关文章
疯狂的猿
|
2月前
纯css3发光霓虹灯文字闪烁特效代码
纯css3发光霓虹灯文字闪烁特效代码是一款彩色的店铺名称文字动画特效。
疯狂的猿
38 6
疯狂的猿
|
2月前
纯css3加载loading发光变色动画代码
纯css3加载loading发光变色动画特效代码是一款基于css3 keyframes属性实现的发光变色圆点串联旋转loading加载动画
疯狂的猿
26 2
疯狂的猿
|
2月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码，带歌词显示。包括支持单曲循环，歌词显示，歌曲搜索，音量控制，列表循环等功能。利用json获取音乐歌单和歌词，基于html5 audio属性手机音乐播放器代码。
疯狂的猿
134 6
6wzqypjsfbwzu
|
8月前
|
编解码 前端开发
编写代码中常见问题汇总（html和css）
编写代码中常见问题汇总（html和css）
6wzqypjsfbwzu
65 0
疯狂的猿
|
5月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
疯狂的猿
64 1
热爱技术的小郑
|
5月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 （力争使用最少的Html 、CSS代码实现）
这篇文章展示了一个仿大学官网的HTML静态网页设计作业，重点在于使用最少的HTML和CSS代码实现页面效果，并便于后期维护。
热爱技术的小郑
82 1
HTML静态网页设计作业、仿写大学官网 （力争使用最少的Html 、CSS代码实现）
番茄酱脑袋
|
5月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
番茄酱脑袋
51 1
朝阳39
|
6月前
|
前端开发 容器
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
css 动态文本对齐自适应 — 文本宽度小于容器宽度时居中对齐，文本宽度大于容器宽度时居左对齐
朝阳39
50 2
朝阳39
|
6月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
vue 模拟随机变速的动态打字特效【支持多行文本】（含css实现闪烁光标，js动态改变setInterval定时器的时间间隔）
朝阳39
109 1
sunrr
|
7月前
|
前端开发 JavaScript
使用JavaScript动态更改元素的CSS属性
【6月更文挑战第29天】使用JavaScript动态更改元素的CSS属性
sunrr
104 3

热门文章

最新文章

  • 1
    如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
  • 2
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 3
    jQuery和CSS3滑动展开菜单按钮插件
  • 4
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 5
    高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
  • 6
    页面滚动触发css3动画js插件
  • 7
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
  • 8
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 9
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 10
    在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
  • 1
    css结构伪类
    68
  • 2
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    97
  • 3
    【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
    60
  • 4
    HTML5/CSS3粒子效果进度条代码
    78
  • 5
    同样都是将物理设备虚拟化，思科的VSS和华为的CSS到底有啥区别？
    146
  • 6
    CSS 超出内容... 或者多行省略及两端对齐及超出多行居中显示
    65
  • 7
    CSS外边距重叠：原理、结果
    58
  • 8
    css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
    68
  • 9
    CSS常见用法 以及JS基础语法
    72
  • 10
    css设置内嵌样式阴影
    79

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月