hrml+css换肤效果

浏览数：24 / 时间：2015年06月09日

<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style type="text/css">
	*{margin:0px ; padding:0px;}
	body{background:url("imgs/1.jpg")no-repeat fixed;background-size:cover;}
	.button{position:fixed;left:20px;top:0px;cursor:pointer;}
	.web{width:1210px;height:70px;border:1px solid #CCFF00;display:none;
	box-shadow:0px 0px 10px #000;margin:5px auto;}
	.web .prev{
		width:52px;height:70px;
		background:rgba(212,212,212,0.7);
		color:#FFF;font-weight:900;
		text-align:center;line-height:70px;
		float:left;margin:0px;
	}
	.web .pic{
		width:1106px;height:70px;
		background:rgba(204,252,197,0.7);
		float:left;overflow:hidden}
	.web .pic ul{list-style:none;}
	.web .pic ul li {width:150 ;height:68px ;border:1px solid #3DAE20;
	float:left;margin:0px 3px;position:relative;}
	.web .pic ul li img{width:150 ;height:68px ;}
	.web .pic ul li p {width:150 ;height:68px ;background:rgba(0,0,0,0.5);
		position:absolute;top:0px;left:0px;}
	.web .last{
		width:52px;height:70px;
		background:rgba(212,212,212,0.7);
		color:#FFF;font-weight:900;
		text-align:center;line-height:70px;
		float:left;margin:0px;
	}
  </style>
 </HEAD>

 <BODY >
	<img class="button" src = "imgs/10.png"width=30px height=42.5px />
	<div class="web">
		<div class= "prev">
			<h1><</h1>
		</div>
		<div class="pic">
			<ul>
				<li><img src="imgs/1.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/2.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/3.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/4.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/5.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/6.jpg"/>
					<p></p>
				</li>
				<li><img src="imgs/7.jpg"/>
					<p></p>
				</li>
			</ul>
		</div>
		<div class= "last">
			<h1>></h1>
		</div>
	</div>
	<script type = "text/javascript" src="js/jquery.js"></script>
	<script type = "text/javascript">
		$(".button").click(function(){
			//alert("点击");
			$(this).fadeOut(1000);
			$(".web").fadeIn(2000);
		});
		$(".pic ul li").hover(function(){
			$(this).children("p").stop().animate({top:"72px"},300);
		},function(){
			$(this).children("p").stop().animate({top:"0px"},300);
		});
		$(".pic ul li").click(function(){
			var i = $(this).index();
			//alert(i);
			i+=1;
			$("body").css("background","url(imgs/"+i+".jpg)");
		});
	</script>
 </BODY>
</HTML>
</span></strong>