手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >使用HTML CSS实现网页换肤效果(二)
使用HTML CSS实现网页换肤效果(二)
摘要:废话不多说了,直接给大家贴html代码了,具体代码如下所示:XML/HTMLCode复制内容到剪贴板网页换肤//写入客户端Cookiefun...

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

XML/HTML Code复制内容到剪贴板 <head> <title>网页换肤</title> <metahttp-equiv="Content-Type"content="text/html";charset="UTF-8"> <linkid="myCss"href="orange.css"rel="stylesheet"> <scriptlanguage="javascript"> //写入客户端Cookie functionwriteCookie(csspath){ vartoday=newDate(); varexpires=newDate(); expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天 varstr="cssPath="+csspath+";expires="+expires.toGMTString() +";"; document.cookie=str; } //读取Cookie functionreadCookie(cookieName){ varsearch=cookieName+"="; if(document.cookie.length>0){ offset=document.cookie.indexOf(search); if(offset!=-1){ offset+=search.length; end=document.cookie.indexOf(";",offset); if(end==-1){ end=document.cookie.length; returnunescape(document.cookie.substring(offset,end)); } } } } functionifCookie(){ if(readCookie("cssPath")==undefined){ writeCookie("orange.css"); } document.getElementById("myCss").href=readCookie("cssPath"); } functionchange(type){ if(type=="orange"){ document.getElementById("myCss").href="orange.css"; writeCookie("orange.css"); } if(type=="gray"){ document.getElementById("myCss").href="gray.css"; writeCookie("gray.css"); } } </script> </head>

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

【使用HTML CSS实现网页换肤效果(二)】相关文章:

使用CSS布局定位属性轻松实现优美站点布局

纯CSS代码实现翻页焦点图效果

纯CSS3实现带动画效果导航菜单无需js

使用CSS3在触屏上为按钮实现激活效果

如何利用CSS3制作3D文字效果

CSS+DIV制作页面圆角效果

用CSS实现表格背景颜色渐变效果

CSS制作网页总结的一些经验

怎样用CSS实现大背景网页效果

利用CSS3实现圆角的outline效果的教程

精品推荐
分类导航