使用html制作dota1英雄数据

最新推荐文章于 2023-12-14 11:35:54 发布

plds

最新推荐文章于 2023-12-14 11:35:54 发布

阅读量1k

点赞数

分类专栏： html5 html5，css3 文章标签： html

本文链接：https://blog.csdn.net/qq_25225441/article/details/78193601

版权

该网页使用HTML制作，详细展示了Dota1中不同酒馆的英雄，包括复仇之魂、众神之王、魅惑魔女等，每个英雄配有图片和简介，用户可以点击深入了解。页面布局精美，包含多个酒馆分类，提供沉浸式浏览体验。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" type="text/css" href="魔兽秘籍.html">
<script language="javascript"> 

 function showPic(e,sUrl){ 

                            var x,y; 

                            x = e.clientX; 

                            y = e.clientY; 

                            document.getElementById("Layer1").style.left = x+2+'px'; 

                            document.getElementById("Layer1").style.top = y+2+'px'; 

                            document.getElementById("Layer1").innerHTML = "<img border='0' src=\"" + sUrl + "\">"; 

                            document.getElementById("Layer1").style.display = ""; 

                            } 

                            function hiddenPic(){ 

                            document.getElementById("Layer1").innerHTML = ""; 

                            document.getElementById("Layer1").style.display = "none"; 

                        } 

    </script>

  <title>Warcraft III</title>
  <style type="text/css">
  body{background-color: #16181C;}
  h1{
    background-color: ;text-align:left;color: #D6DDEF;
  }
  h2{font-family:Verdana,sans-serif;color: #D6DDEF;}
  h4{text-align: left; margin: 0;}
  p{font-family: serif;font-size: 12px;font-weight: bold;text-align: center;color: white;}

  #backgroundimage {background-image: url("background/iazlas.jpg"); border-radius: 20px;width: 1000px;height: 300px;}
  #mainpage{width: 1366px;height: 2100px; }
  #hero{margin: 1px;width:1000px; float: left;border-right: 1px solid white;}
  #Guards{margin:5px; }

  #MorningTravern{clear: both;overflow:hidden;border-radius: 6px; }
  #MorningTravern li{display: block;float: left;}
  #MorningTravern li a{display:block;float:left;opacity:1}
  #MorningTravern li img{padding:0 10px;}

  #Thebaroflight{clear: both; margin: 1px;overflow: hidden;}
  #Thebaroflight li{display: block;float: left;}
  #Thebaroflight li a{display: block;float: left;}
  #Thebaroflight li img{padding: 0 10px;}

  #SunriseTavern{clear: both; margin: 1px;overflow: hidden;}
  #SunriseTavern li{display: block;float: left;}
  #SunriseTavern li a{display:block;float:left;opacity:1}
  #SunriseTavern li img{padding:0 10px;}

  #DawnTavern{clear: both; margin: 1px;overflow: hidden;}
  #DawnTavern li{display: block;float: left;}
  #DawnTavern li a{display:block;float:left;opacity:1}
  #DawnTavern li img{padding:0 10px;}

  #Scourage{margin:5px; }

  #NightTavern{clear: both; margin: 1px;overflow: hidden;}
  #NightTavern li{display: block;float: left;}
  #NightTavern li a{display:block;float:left;opacity:1}
  #NightTavern li img{padding:0 10px;}
  
  #MidnightTavern{clear: both; margin: 1px;overflow: hidden;}
  #MidnightTavern li{display: block;float: left;}
  #MidnightTavern li a{display:block;float:left;opacity:1}
  #MidnightTavern li img{padding:0 10px;}

  #TwilightTavern{clear: both;margin: 1px;overflow: hidden;}
  #TwilightTavern li{display: block;float: left;}
  #TwilightTavern li a{display:block;float:left;opacity:1}
  #TwilightTavern li img{padding:0 10px;}

  #DuskTavern{clear: both; margin: 1px;overflow: hidden;}
  #DuskTavern li{display: block;float: left;}
  #DuskTavern li a{display:block;float:left;opacity:1}
  #DuskTavern li img{padding:0 10px;}

hr{align:;color: #23262C;width: 900px;}
#aside{width: 300px;height:1000px; float: left;}
#msvideo{position: relative;margin-left:15px;margin-bottom:1px;}
.authors{font-size: 1.2em;font-family: serif;color: white;}
footer p img {
  height: 17px;
  width: 17px;
}
.intex{position:relative;display:inline-block;}
.intex .intro{position:absolute;display: none; padding: 4px; }
.intex:hover .intro{position: relative; display:block;border-radius: 20px;left: 20px; }

  </style>

 </head>