hrml+css换肤效果

最新推荐文章于 2023-02-11 21:24:50 发布

DRMIVET Stone

最新推荐文章于 2023-02-11 21:24:50 发布

阅读量695

点赞数 1

分类专栏： html+css网页前台文章标签： css html html5 jquery javascript

Wangqi

本文链接：https://blog.csdn.net/u012651389/article/details/43939435

版权

html+css网页前台专栏收录该内容

25 篇文章 3 订阅

订阅专栏

<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>

DRMIVET Stone

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hrml+css换肤效果

New Document *{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{wi
复制链接

扫一扫