HTML制作简单的下载站

最新推荐文章于 2025-12-04 10:43:19 发布

原创最新推荐文章于 2025-12-04 10:43:19 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #javascript #css

本文介绍了如何利用HTML配合CSS创建一个基本的下载站点。通过HTML结构定义内容，结合CSS进行样式布局，实现一个功能清晰、视觉简洁的下载页面。

该文章已生成可运行项目，

HTML制作一个简单的下载站

*代码:
HTML部分:

<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>某某资源网</title>
  </head>
  <body>	
    <div id="parent">
    <div id="child">
    <div class="v">
    <div class="h">
    <a style="color:black" href="index.html"><i>某某资源网</i></a>
    </div>
    </div>
    </div>
    </div>
  
   <div style="line-height:46px;height:40px;font-size:20px;text-decoration:none;" align="center">
  <a style="color:black;text-decoration:none;" href="">&nbsp 首页 &nbsp</a>
  <a style="color:black;text-decoration:none;" href="">&nbsp 网游 &nbsp</a>
  <a href="" style="color: #65bb0a;text-decoration:none;">&nbsp 单机 &nbsp</a>
  <a style="color:black;text-decoration:none;" href="">&nbsp 应用 &nbsp</a>
  <a style="color:black;text-decoration:none;" href="">&nbsp 其他 &nbsp</a>
    </div>
   <hr style="border-color: #f5f5f5"/>
  
     <!--图片建议剪切圆角-->
    <img class="f" src="001.png" width="65" height="65" align="left"/>
   <big style="font-size:17>px">&nbsp 某某手游 &nbsp</big>
  <p class="n">&nbsp &nbsp版本:v999 &nbsp &nbsp 大小:100MB</p>
  <p class="n">&nbsp &nbsp类别:手游 &nbsp &nbsp 系统:Android </p>
  
  <center>
  <div class="a">
  <a style="color:white;text-decoration:none;" href="软件.apk">立即下载</a>
  </center>
  </div>
  <br>
  <div class="s"></div>
  <center>
  游戏介绍
  <hr style="border-color: #65bb0a"/>
  </center>
<!------------------------------------------------> 
 <script>
            var arr=new Array()
            arr[0]="1.png";
            arr[1]="2.png";
            var i=0;
            function image()
            {
                var image=document.getElementById("im");
                image.src=arr[i];
                i++;
                if(i>2){i=0};             
            };
            setInterval(function(){-
            image();
            },1000);
        </script>
 <script>
            var arr=new Array()
            arr[2]="3.png";
            arr[3]="4.png";
            var i=0;
            function image()
            {
                var image=document.getElementById("img");
                image.src=arr[i];
                i++;
                if(i>2){i=0};             
            };
            setInterval(function(){
            image();
            },1000);
        </script> 
<!------------------------------------------------> 
     <center>
    <img src="1.png" id="im" width="170" height="300" >
   <img src="3.png" id="img" width="170" height="300" >
  </center>
   <h3>文字介绍标题:</h3>
   <p>我是介绍</p>
 </body>
</html>

css部分:

.a{
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#65bb0a;
    width:315px;
	text-align:center;
	padding:7px;
	text-decoration:none;
}
a:hover,a:active
{
	background-color:#7A991A;
}

body{
  margin:0px;padding:0px;
    }
   
.v{
  height: 40px;
  color: black;
  background-color: #65bb0a;
  }

.n{
  line-height:3px;
  font-size:15px;
  color:grey
  }

#child{
  line-height: 40px
      }
    
.s{
  width:100%;
  height:13px;
  background-color: #f5f5f5;
  }

.h{
  margin-left:0.5cm;
  }

.f{
  margin-left:10px;
  }

.y{
  margin-bottom:100%;
  }

本文章已经生成可运行项目