使用HTML CSS实现网页换肤效果（二）

原文

 废话不多说了，直接给大家贴html代码了，具体代码如下所示：

XML/HTML Code复制内容到剪贴板
  1. <head>    
  2. <title>网页换肤</title>    
  3. <meta http-equiv="Content-Type" content="text/html" ; charset="UTF-8">    
  4. <link id="myCss" href="orange.css" rel="stylesheet">    
  5. <script language="javascript">    
  6. //写入客户端Cookie    
  7. function writeCookie(csspath) {    
  8. var today = new Date();    
  9. var expires = new Date();    
  10. expires.setTime(today.getTime()   1000 * 60 * 60 * 24 * 30); //有效期为30天    
  11. var str = "cssPath="   csspath   ";expires="   expires.toGMTString()    
  12.  ";";    
  13. document.cookie = str;    
  14. }    
  15. //读取Cookie    
  16. function readCookie(cookieName) {    
  17. var search = cookieName   "=";    
  18. if (document.cookie.length > 0) {    
  19. offset = document.cookie.indexOf(search);    
  20. if (offset != -1) {    
  21. offset  = search.length;    
  22. end = document.cookie.indexOf(";", offset);    
  23. if (end == -1) {    
  24. end = document.cookie.length;    
  25. return unescape(document.cookie.substring(offset, end));    
  26. }    
  27. }    
  28. }    
  29. }    
  30. function ifCookie() {    
  31. if (readCookie("cssPath") == undefined) {    
  32. writeCookie("orange.css");    
  33. }    
  34. document.getElementById("myCss").href = readCookie("cssPath");    
  35. }    
  36. function change(type) {    
  37. if (type == "orange") {    
  38. document.getElementById("myCss").href = "orange.css";    
  39. writeCookie("orange.css");    
  40. }    
  41. if (type == "gray") {    
  42. document.getElementById("myCss").href = "gray.css";    
  43. writeCookie("gray.css");    
  44. }    
  45. }    
  46. </script>    
  47. </head>  

通过以上代码就可以简单实现使用HTML CSS实现网页换肤效果，希望本读代码对大家有所帮助。

使用HTML CSS实现网页换肤效果（二）的更多相关文章

  1. HTML实现代码雨源码及效果示例

    这篇文章主要介绍了HTML实现代码雨源码及效果示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  2. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置，本文首先解释了常见的电脑分辨率，为了页面在不同的分辨率下正常显示，要给页面一个安全宽度，再去使用绝对定位，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

  3. 详解HTML5中CSS外观属性

    这篇文章主要介绍了HTML5中CSS外观属性的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，,需要的朋友可以参考下

  4. HTML文本属性&amp;颜色控制属性的实现

    这篇文章主要介绍了HTML文本属性&颜色控制属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  5. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下

  6. 简洁自适应404页面HTML好看的404源码

    这篇文章主要介绍了简洁自适应404页面HTML好看的404源码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  7. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  8. HTML5适合的情人节礼物有纪念日期功能

    这篇文章主要介绍了HTML5适合的情人节礼物有纪念日期功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

  9. html5录音功能实战示例

    这篇文章主要介绍了html5录音功能实战示例的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  10. HTML5 Web缓存和运用程序缓存(cookie,session)

    这篇文章主要介绍了HTML5 Web缓存和运用程序缓存(cookie,session),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

随机推荐

  1. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？(一定要看！)

    这篇文章主要介绍了css绝对定位如何在不同分辨率下的电脑正常显示定位位置，本文首先解释了常见的电脑分辨率，为了页面在不同的分辨率下正常显示，要给页面一个安全宽度，再去使用绝对定位，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。

  2. CSS中实现动画效果-附案例

    这篇文章主要介绍了 CSS中实现动画效果并附上案例代码及实现效果，就是CSS动画样式处理，动画声明需要使用@keyframes name,后面的name是人为定义的动画名称，下面我们来看看文章的具体实现内容吧，需要的小伙伴可以参考一下

  3. CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号)

    这篇文章主要介绍了CSS多级数字序号的目录列表(2.2.1. 2.2.2 列表序号),通过css代码定义将数字多级列表展示出来,,需要的朋友可以参考下

  4. CSS position属性和实例应用演示

    这篇文章主要介绍了CSS position属性和实例应用演示,absolute（绝对定位）,relative（相对定位）,relative与absolute的结合使用以及fixed(固定定位),需要的朋友可以参考下

  5. css中使用rgba和opacity设置透明度的区别（附图）

    这篇文章主要介绍了css中使用rgba和opacity设置透明度的两种方法,通过实例演示解释了两者之间的差别,需要的朋友可以参考下

  6. html+css 清除浮动的相关技巧心得

    下面小编就为大家带来一篇html+css 清除浮动的相关技巧心得。小编觉得挺不错的，现在分享给大家，给大家一个参考

  7. 简单介绍CSS设置打印页面的方法及css里media的使用

    这篇文章主要介绍了基于CSS设置打印页面简单介绍及css里media的使用 的相关资料,需要的朋友可以参考下

  8. CSS三大特性继承性、层叠性和优先级详解

    本文详细讲解了CSS三大特性继承性、层叠性和优先级，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

  9. CSS清除浮动方法小结

    本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使用after或before伪对象清除浮动。下面跟着小编一起来看下吧

  10. 我就是要用CSS实现九宫格图

    本文介绍的就是我们最熟悉的老朋友，CSS。不讲枯燥的语法，抛开js，让我们一起来看业务中那别致的纯CSS实现，让我们一起来追求那更好的页面实现，希望我带着你走完这段旅程后，你能收获一些惊喜甚至灵感，感兴趣的小伙伴们可以参考一下

返回
顶部