html+css英雄联盟网页

来源：互联网发布：安广网络宽带怎么办理编辑：程序博客网时间：2024/05/17 01:06
<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>
0 0