网页换肤

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插件使用(转)

用.NET做网站,在页面放一个按钮,点击按钮实现网页换肤功能,求代码

css, js 项目联系之网页换肤

网页换肤

2.1网页换肤

js网页换肤