html+css英雄联盟网页

最新推荐文章于 2024-11-14 14:53:00 发布
DRMIVET Stone
最新推荐文章于 2024-11-14 14:53:00 发布
阅读量6.4k
点赞数 12
分类专栏： html+css网页前台文章标签： jquery html html5 js 英雄联盟
Wangqi
本文链接：https://blog.youkuaiyun.com/u012651389/article/details/43940279
版权
html+css网页前台专栏收录该内容
25 篇文章
订阅专栏
<strong><span style="font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>MyHtml.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
		*{margin:0px 0px ; padding:0px 0px ;}
		body{
			background-color:#000;position:relative;
		}
		#Mybg{width:1300px;height:700px;/*border:1px solid  #FFCC33;*/ margin:3px auto; position:relative;
			box-shadow:2px 2px 8px #FFCC33 ;}
		#Mybg img{width:1300px;height:700px;}
		#Mybg .title{width:220;height:120px;/*border:1px solid #FFCC33 ;*/
			position:absolute;top:10px;left: 956px;
			background:rgba(0,0,0,0.3);box-shadow:3px 2px 15px #000000;border-radius:4px;}
		#Mybg .title img{width:220;height:120px;}
		#Mybg .title :hover{border:0.5px solid #000 ;border-radius:4px;}
		#Mybg .Put{width:1000px ;height:32px;/*border:1px solid #FFF;*/position:absolute;top:148px;left:150px;}
		#Mybg .Put .tip{display:block;width:110px ;height:32px;/*border:1px solid #CC0000;*/
			position:absolute;bottom:0px ;left:450px;box-shadow:0.5px 0.5px 4px rgba(0, 0, 0, 0.5);}
		#Mybg .Put .tip img{width:110px ;height:32px;}
		#Mybg .Put .tip:hover{box-shadow:2px 2px 15px #000000;}
		/*<!--body-->*/
		#Mybg .Mybody{display:block;width:1000px;height:430;border:1px solid #006600;
			position:absolute;top:200px;left:150px;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
		#Mybg .Mybody .M-left{display:block;width:225px;height:307px;
			border:1px solid  #FFCCCC;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
			margin:3px 13px;float:left;}
		#Mybg .Mybody .M-left ul {list-style:none;float:left;flowover:hidden}
		#Mybg .Mybody .M-left li.fir{width:225;height:112;border:1px solid #B96AEE;
			background:url("img/q2.jpg");
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);border:1px solid #000;}	
		#Mybg .Mybody .M-left .fir:hover{/*background:url("img/q2.jpg");*/
		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);}
		#Mybg .Mybody .M-left li.fir img{width:225px;height:112px;}
		
		#Mybg .Mybody .M-left li.lst1{width:225px;height:65px;border:1px solid #B96AEE;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
		#Mybg .Mybody .M-left li.lst1 img{width:225px;height:65px;}
		
		#Mybg .Mybody .M-left li.lst2{width:225px;height:65px;border:1px solid #B96AEE;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}	
		#Mybg .Mybody .M-left li.lst2 img{width:225px;height:65px;}
		
		#Mybg .Mybody .M-left li.lst3{width:225px;height:65px;border:1px solid #B96AEE;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
		#Mybg .Mybody .M-left li.lst3 img{width:225px;height:65px;}
		
		#Mybg .Mybody .M-center{display:block;width:490px;height:307px;background:rgba(0, 0, 0, 0.6);
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
			border:1px solid #6699FF;position:absulute;float: left;margin:3px 0px;}
		
		#Mybg .Mybody .M-center ul {display:block;width:470px;height:287px;
			margin:10px 10px;list-style:none;
			border-radius:5px;overflower:hidden;box-shadow:1px 1px 4px rgba(125, 125, 125, 0.8);position:relative;}
		
		#Mybg .Mybody .M-center .pic {width:470px;height:287px;margin:10px 10px;opacity:1;
			border-radius:6px;overflow:hidden;position:relative;float:left;}
		#Mybg .Mybody .M-center .pic:hover{border:1px solid #FFCC00;box-shadow:2px 2px 8px rgba(189, 0, 0, 0.8);}
		#Mybg .Mybody .M-center .pic img{width:470px;height:287px;position:absolute;left:1000px;}
		
		#Mybg .Mybody .M-center .but1 {display:block;width:50px;height:88px;/*border:1px solid #FFF;*/position:absolute;
			margin-top:106px;margin-left:1px;background:rgba(0, 0, 0, 0.4);
			box-shadow:1px 1px 5px rgba(157, 157,9, 0.4);border-radius:5px;overflow:hidden;}
		#Mybg .Mybody .M-center .but1 img{width:50px;height:88px;
			box-shadow:1px 1px 5px rgba(157, 157,9, 0.6);
			opacity:0.1;
			filter:alpha(opacity=3);
			-moz-opacity:0.1;
			}	
		#Mybg .Mybody .M-center .but1:hover img{
			opacity:0.5;
			filter:alpha(opacity=3);
			-moz-opacity:0.5;}
		#Mybg .Mybody .M-center .but2 {display:block;width:50px;height:88px;/*border:1px solid #FFF;*/position:absolute;
			margin-left:437px;margin-top:107px;background:rgba(0, 0, 0, 0.4);
			box-shadow:1px 1px 5px rgba(157, 157,9, 0.4);border-radius:5px;overflow:hidden;}	
		#Mybg .Mybody .M-center .but2 img{width:50px;height:88px;
			opacity:0.1;
			filter:alpha(opacity=3);
			-moz-opacity:0.1;}	
		#Mybg .Mybody .M-center .but2:hover img{
			background:rgba(0,0, 0, 0.6);
			box-shadow:1px 1px 5px rgba(157, 157,9, 0.6);
			opacity:0.5;
			filter:alpha(opacity=3);
			-moz-opacity:0.5;}
		
		#Mybg .Mybody .M-right{display:block;width:225px;height:307px;box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
			border:1px solid #CCFF99;position:absulute;float: left;margin:3px 13px;}
		#Mybg .Mybody .M-right .lin1{display:block;width:225px;height:176px;
			/*border:1px solid #CCFF99;*/margin:2px 0px;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
		#Mybg .Mybody .M-right .lin1 img{width:225px;height:176px;}
		#Mybg .Mybody .M-right .lin1:hover{box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.8);}
				
		#Mybg .Mybody .M-right .lin2{display:block;width:225px;height:120px;
			/*border:1px solid #CCFF99;*/margin:2px 0px;
			border:1px solid #CCFF99;margin:3px 0px;
			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);}
		#Mybg .Mybody .M-right .lin2 img{width:225px;height:120px;}	
		#Mybg .Mybody .M-right .lin2:hover{box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.8);}
		
		#Mybg .Mybody .M-bottom{width:970px;height:110px;
			box-shadow:1px 1px 5px rgba(0,0,0,0.5);
			border:1px solid #F464EA;/*float:left;left:0px;bottom:0px;*/margin:315px 13px;}
			
		#Mybg .Mybody .M-bottom .po1{width:240px;height:110px;
			box-shadow:1px 1px 5px rgba(0,0,0,0.5);
			border:1px solid #99FF33;float:left;margin:0px 0.2px;}
		#Mybg .Mybody .M-bottom .po1 img{width:240px;height:110px;}	
		
		#Mybg .Mybody .M-bottom .po2{width:240px;height:110px;
			box-shadow:1px 1px 5px rgba(0,0,0,0.5);
			border:1px solid #99FF33;float:left;margin:0px 0.2px;}
		#Mybg .Mybody .M-bottom .po2 img{width:240px;height:110px;}	
			
		#Mybg .Mybody .M-bottom .po3{width:240px;height:110px;
			box-shadow:1px 1px 5px rgba(0,0,0,0.5);
			border:1px solid #99FF33;float:left;margin:0px 0.2px;}
		#Mybg .Mybody .M-bottom .po3 img{width:240px;height:110px;}	
			
		#Mybg .Mybody .M-bottom .po4{width:240px;height:110px;
		box-shadow:1px 1px 5px rgba(0,0,0,0.5);
			border:1px solid #99FF33;float:left;margin:0px 0.2px;}
		#Mybg .Mybody .M-bottom .po4 img{width:240px;height:110px;}	
	</style>
  </head>
  
  <body>
    <div id="Mybg">
    	<img src="img/bg2.jpg" />
    	<div class="title" ><img src="img/00.png"/></div>
    	<div class="Put">
    		<div class="tip"><a href="#"><img src="img/q1.jpg"/></a></div>
    	</div>
    	<div class="Mybody">
    		<div class="M-left">
    			<ul>
    				<li class="fir"><a href="#"><img src="img/q2.jpg"/></a></li>
    				<li class="lst1"><a href="#"><img src="img/q222.jpg"/></a></li>
    				<li class="lst2"><a href="#"><img src="img/q4.jpg"/></a></li>
    				<li class="lst3"><a href="#"><img src="img/q5.jpg"/></a></li>
    			</ul>
    		</div>
    		<div class="M-center">
    				<div class=pic>
    					<img src="img/a1.jpg" style="left:0px;" />
    					<img src="img/a2.jpg"/>
    					<img src="img/a3.jpg"/>
    					<img src="img/a4.jpg"/>
    					<img src="img/a5.jpg"/>
    					<img src="img/a6.jpg"/>
    					<img src="img/a7.jpg"/>
    					<img src="img/a8.jpg"/>
    					<img src="img/a9.jpg"/>
    					<img src="img/a10.jpg"/>
    					<img src="img/a11.jpg"/>
    				</div>
    				<div class="but1"><a href="#"><img src="img/left1.jpg"></a></div>
    				<div class="but2"><a href="#"><img src="img/right1.jpg"></a></div>
    		</div>
    		
    		<div class="M-right">
	    		<div class="lin1"><a href="#"><img src="img/q6.jpg"/></a></div>
	    		<div class="lin2"><a href="#"><img src="img/q66.jpg"/></a></div>
    		</div>
    		<div class="M-bottom">
    			<a class="po1" href="#"><img src="img/q7.jpg "/></a>
    			<a class="po2" href="#"><img src="img/q11.jpg"/></a>
    			<a class="po3" href="#"><img src="img/p12.jpg"/></a>
    			<a class="po4" href="#"><img src="img/p13.jpg"/></a>
    		</div>
    	</div>
    </div>
     <script type="text/javascript" src="js/jquery.js"></script>
  	<script type="text/javascript" >
		 $("#Mybg .Mybody .M-left li.lst1").hover(
    		function(){
    			$(this).find("img").attr("src","img/q3.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/q222.jpg");}
    	);
		 $("#Mybg .Mybody .M-left li.lst2").hover(
    		function(){
    			$(this).find("img").attr("src","img/q33.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/q4.jpg");}
    	);
		 $("#Mybg .Mybody .M-left li.lst3").hover(
    		function(){
    			$(this).find("img").attr("src","img/q55.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/q5.jpg");}
    	);
    //-------------------------------------------------
     $("#Mybg .Mybody .M-bottom .po1").hover(
    		function(){
    			$(this).find("img").attr("src","img/q77.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/q7.jpg");}
    	);
     $("#Mybg .Mybody .M-bottom .po2").hover(
    		function(){
    			$(this).find("img").attr("src","img/q111.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/q11.jpg");}
    	);
     $("#Mybg .Mybody .M-bottom .po3").hover(
    		function(){
    			$(this).find("img").attr("src","img/q122.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/p12.jpg");}
    	);
     $("#Mybg .Mybody .M-bottom .po4").hover(
    		function(){
    			$(this).find("img").attr("src","img/q133.jpg");}, 
			function(){
    			$(this).find("img").attr("src","img/p13.jpg");}
    	);
    //------------------------------------------------------------
    	var a =0;
  		var b =0;
  		$(" #Mybg .Mybody .M-center .but1 ").click(function(){
  				a++;
  				if(a>=10){
  					a=0;
  				}
	  			$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","470px");
	  			$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
	  			$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"-470px"},500);
	  			b=a;
	  	});
  		$(" #Mybg .Mybody .M-center .but2 ").click(function(){
  				a--;
  				if(a<=-1){
  					a=10;b=0;
  				}
	  			$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","-470px");
	  			$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
	  			$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"470px"},500);
	  			b=a;
	  	});
  		function ao(){
  			setInterval(function(){
  				a++;
  				$("#Mybg .Mybody .M-center .pic img").eq(a).css("left","-470px");
	  			$("#Mybg .Mybody .M-center .pic img").eq(a).animate({left:"0px"},500);
	  			$("#Mybg .Mybody .M-center .pic img").eq(b).animate({left:"470px"},500);
	  			b=a;
  				if(a==10){a=0};
  			},4000);
  		};
  		ao();
  	</script>	
  </body>
</html>
</span></strong>