Chinaunix首页 | 论坛 | 博客

离不开大数据的社会计算lk.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

五岳之巅

  • 博客访问： 4021278
  • 博文数量： 272
  • 博客积分： 7846
  • 博客等级： 少将
  • 技术积分： 6476
  • 用 户 组： 普通用户
  • 注册时间： 2009-08-25 16:27
文章分类

全部博文（272）

我的朋友
最近访客
推荐博文
相关博文
自己写的CSS皮肤动态更换代码

分类： 系统运维

2011-06-20 23:38:54

先看图吧，这就是最终效果：
在默认状态下，或点击红色按钮后：

在点击绿色按钮后：

在点击蓝色按钮后：

在点击黄色按钮后：

看了最终效果后，给大家介绍一下皮肤文件的构成情况：
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" "">
  2. <html xmlns="">
  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就错误。小心使得万年传啊。
阅读(5966) | 评论(1) | 转发(0) |
0

上一篇：CSS做的圆角页面，和书上的不完全一致

下一篇：一个非常重要的趋势：游戏化--Gamification

给主人留下些什么吧！~~

十年梦生2011-06-24 23:24:01

喜欢这个。

回复 | 举报
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6