网页换肤
Posted shidingzhang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页换肤相关的知识,希望对你有一定的参考价值。
1、需求分析
为网站”换肤",为用户提供了多种选择,提高了用户的满意度,同时也能提高网站的知名度。
2、技术分析
基于html、CSS、javascript。
3、详细分析
点击第一栏颜色按钮,网页会转换成对应颜色页面。
3.1 HTML部分
如图,页面内容由两部分构成,皮肤颜色按钮栏,和导航栏,也就是两个横向的无序列表。
<body> <div id="outer"> <ul id="skin"> <li id="red" title="红色">红</li> <li id="green" class="current" title="绿色">绿</li> <li id="black" title="黑色">黑</li> </ul> <ul id="nav"> <li><a href="javascript:;">新闻</a></li> <li><a href="javascript:;">娱乐</a></li> <li><a href="javascript:;">体育</a></li> <li><a href="javascript:;">电影</a></li> <li><a href="javascript:;">音乐</a></li> <li class="last"><a href="javascript:;">旅游</a></li> </ul> </div> </body>
3.2 CSS部分
<style> *{ margin:0; padding:0; } body{ width:100%; height:100%; } body{font:12px/1.5 Tahoma;} /*所有表项去除标志*/ li{list-style-type:none;} /*未访问的链接和已访问的链接去除下划线*/ a:link,a:visited{text-decoration:none;} /*鼠标悬浮在链接上,显示下划线*/ a:hover{text-decoration:underline;} /*设置整个元素宽度,居中,overflow:hidden作用:1、隐藏超出内容2、清除浮动 造成的影响,防止被其他元素侵犯,加上zoom:1考虑浏览器兼容。*/ #outer{ width:500px; margin:0 auto; overflow:hidden; zoom:1; } #skin,#nav{overflow:hidden;zoom:1;} #skin{margin:10px 0;} #skin li{ float:left; width:6px; height:6px; cursor:pointer; overflow:hidden; margin-right:10px; /*text-indent是首行缩进,text-indent:-9999px:将文字甩到屏幕以外,即隐藏*/ text-indent:-9999px; /*边框宽度,实心边框*/ border-width:4px; border-style:solid; } /*!important具有应用优先权,优先使用该样式,即页面的默认皮肤*/ #skin li.current{background:#fff!important;} #red{border-color:red;background:red;} #green{border-color:green;background:green;} #black{border-color:black;background:black;} #nav{border:1px solid #fff;} #nav li{ float:left; width:82px; line-height:25px; text-align:center; /*给li标签添加右边框,最后一个标签与元素的右边框重复,需要把最后一个标签的右边框去掉,即border-right-width:0 border-right:1px solid #fff;} #nav li.last{width:83px; border-right-width:0;} #nav li a{color:#fff;} </style>
3.3 JavaScript部分
<link href="green.css" rel="stylesheet" type="text/css" />//建立一个外部样式表链接 <script> window.onload = function (){//页面加载完成时调用函数 var oLink = document.getElementsByTagName("link")[0];//获得页面的第一个链接,即href="green.css",当页面加载完成时便首先连接到该样式表。 var oSkin = document.getElementById("skin").getElementsByTagName("li");//获得皮肤栏里的li标签,组成数组,即红绿黑颜色组合。 for(var i = 0; i< oSkin.length; i++){ oSkin[i].onclick = function ()//给oSkin[i]数组里的每个元素绑定点击函数,点击红标签时变红,绿标签时变绿,黑标签时变成黑色。 { for(var p in oSkin) oSkin[p].className = "";//声明一个变量p,p访问数组 oSkin[],那么 oSkin[p]即为数组里的每一个元素,即红绿蓝标签,添加一个空类名。 this.className = "current";//this.className为红绿蓝标签的随机标签类名=current=<li id="green" class="current">,此时点击皮肤烂任一标签,页面变成绿色。 oLink[‘href‘] = this.id + ".css";// oLink[‘href‘]链接变为标签的id的css样式,标签的id为red、green、black,转变为颜色样式,实现单击皮肤栏链接颜色样式,实现网页颜色改变。 } } }; </script>
green.css:
body{ background:#A3C5A8; } #nav{ background:green; border-color:#fff; } #nav li{ border-color:#fff; }
以上是关于网页换肤的主要内容,如果未能解决你的问题,请参考以下文章
网页换肤,模块换肤,jQuery的Cookie插件使用(转)