html+csss实现qq空间皮肤显示

浏览数：21 / 时间：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>
	*{margin:0px;padding:0px;}
	body{background:url("images/oo.jpg")no-repeat fixed;background-size:cover;}
	#huanfu{margin:200px auto;width:548px;height:299px; background:#AAF980;
	background:url("images/bg.jpg");}
	#huanfu .left{width:110px;height:299px; background:#00cc3;
	float:left;}
	#huanfu .right{width:410px;height:299px;
	float:right;}
	#huanfu .right .menu{width:410px;height:30px; 
		padding-top:30px;}
	#huanfu .right .menu ul {
		width:364px;height:22px;
		list-style-type:none;}
	#huanfu .right .menu ul li {
		width:90px;height:20px; float:left;
		border-right:1px solid #ddd;
		color:#000;font-family:"微软雅黑";
		text-align:center;
		line-height:20px;cursor:pointer;
	}
	#huanfu .right .menu .hover{font-weight:bold;}
	#huanfu .right .menu .last{border:none}
	#huanfu .right .imglist{width:410px;height:230px;overflow:hidden/*background:#663333;*/;}
	#huanfu .right .imglist ul {width:410px;height:230px;overflow:hidden}
	#huanfu .right .imglist ul li{list-style-type:none;
		width:143px;height:93px;border:5px solid #FFF;float:left;
		margin:5px 15px;box-shadow:0px 0px 18px rgba(0,0,0,0.6);cursor:pointer;}
	#huanfu .right .imglist ul {display:none;float:left;}
  </style>
 </HEAD>

 <BODY>
  <div id="huanfu">
   <div class="left"></div>
   <div class="right">
		<div class="menu">
			<ul>
				<li class="hover">认真的雪</li>
				<li>神秘的紫嫣</li>
				<li>心已飞远</li>
				<li class="last">甜蜜情人节</li>
			</ul>
		</div>
		<div class="imglist">
			<ul style="display:block">
				<li><img src="images/a1.gif"width=143px height=93px;/></li>
				<li><img src="images/a2.gif"width=143px height=93px;/></li>
				<li><img src="images/a3.gif"width=143px height=93px;/></li>
				<li><img src="images/a4.gif"width=143px height=93px;/></li>
			</ul>
			<ul>
				<li><img src="images/b1.gif"width=143px height=93px;/></li>
				<li><img src="images/b2.gif"width=143px height=93px;/></li>
				<li><img src="images/b3.gif"width=143px height=93px;/></li>
				<li><img src="images/b4.gif"width=143px height=93px;/></li>
			</ul>
			<ul>
				<li><img src="images/c1.gif"width=143px height=93px;/></li>
				<li><img src="images/c2.gif"width=143px height=93px;/></li>
				<li><img src="images/c3.gif"width=143px height=93px;/></li>
				<li><img src="images/c4.gif"width=143px height=93px;/></li>
			</ul>
			<ul>
				<li><img src="images/a1.gif"width=143px height=93px;/></li>
				<li><img src="images/a2.gif"width=143px height=93px;/></li>
				<li><img src="images/a3.gif"width=143px height=93px;/></li>
				<li><img src="images/a4.gif"width=143px height=93px;/></li>
			</ul>
		</div>
   </div>
  </div>
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript">
	$(".menu ul li").mouseover(function(){
		//alert("sadfs");
		$(this).addClass("hover").siblings("li").removeClass("hover");
		var _index=$(this).index();
		//alert(_index);
		$(".imglist ul").eq(_index).fadeIn().siblings("ul").fadeOut();
	});
  </script>
 </BODY>
</HTML>
</span></strong>