你指的是网页换皮肤吧。
从网上下载一个jquery 库 jquery-1.9.0.min.js 不一定是1.9的,可以是1.2至1.9都行
新建两个不同名称文件夹,存放两个样式表和图片。如:color1 和color2
两个样式表的样式名要完全一样,大部分样式一模一样,图片名称和存放地址也一样,不一样的是图片不一样,字体颜色样式不一样。
两个样式存放地址分别:color1/css/index.css和color2/css/index.css
index.html 和color1、color2 为同一目录的文件
看下面的代码你应该能明白。
样式文件color1
.color_style {width:300px height:30px line-height:30px font-size:20px font-weight:bold background:url(color1/image/img.gif) no-repeatcolor:#fff background-color:#999}样式文件color2
.color_style {width:300px height:30px line-height:30px font-size:20px font-weight:bold background:url(color2/image/img.gif) no-repeatcolor:#ff00ff background-color:#9C3} <html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>换肤</title>
<link href="color1/css/index.css" rel="stylesheet" type="text/css" id="color_style" />
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
function change_color(){
var href1='color1/css/index.css'
var href2='color2/css/index.css'
var link_url=$("#color_style").attr("href")
if(link_url==href1){
$("#color_style").attr("href",href2)
}else{
$("#color_style").attr("href",href1)
}
}
$("#change").bind("click",change_color)
})
</script>
</head>
<body>
<div class="color_style"><span style="float:left">这是效果标题</span><span style="float:rightcursor:pointer" id="change">点击换肤</span></div>
</body>
</html>
News5 li{no-repeat top leftpadding-left:15pxpadding-bottom:-10pxmargin-bottom:0px}调整no-repeat top left这个,应该写成no-repeat left top把其中的top改为数值 调整数值大小到背景为居中位置就可以了 如3px 5px等等