最近我遇到的问题是,当我点击下载按钮时,它总是打开而不是下载文件(RAR)
网络希望你能帮助我解决这个问题,因为我擅长制作按钮或功能
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding:0:;
margin:0;
background-color:#f4f4f4;
}
/* Global */
.container{
width:80%;
margin:auto;
overflow:hidden;
}
header ul{
margin:0;
padding:0;
}
.button_1{
height: 38px;
background: #1b3f8b;
border: none;
padding-left: 20px;
padding-right: 20px;
color: white;
}
.dark{
padding: 15px;
background:#35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
h6{
text-align:right;
}
/* Header */
header{
background:#B3E8FF;
color:#FFFFFF;
padding-top:30px;
min-height:70px;
padding-bottom:0;
border-bottom:#80D9FF 3px solid;
}
header a{
color:white;
text-decoration:none;
text-transform:uppercase;
font-size:16px;
}
header li{
float:left;
display:inline;
padding: 0 20px 0 20px;
}
header #branding{
float:left;
}
header #branding h1{
margin-top:0;
margin-bottom:10px;
}
header nav{
float:right;
margin-top:10px;
}
header .highlight , header .current a{
color:#1b3f8b;
font-weight:bold;
}
header a:hover{
color:#cccccc;
color-weight:bold;
}
/*showcase*/
#showcase{
min-height: 650px;
background: url('../img/showcase.png') no-repeat 0 -5px;
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: #ffffff;
}
#showcase h1{
margin-top: 330px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p{
font-size: 20px;
}
/*newsletter*/
#newsletter{
padding: 15px;
background: #B3E8FF;
color: #ffffff;
}
#newsletter h1{
float: left;
}
#newsletter form{
float: right;
margin-top: 15px;
}
#newsletter input[type="email"]{
padding: 4px;
height: 25px;
width: 250px;
}
/*boxes*/
#boxes{
margin-top: 20px;
}
#boxes .box{
float: left;
width: 30%;
padding: 10px;
text-align: center;
}
#boxes .box img{
width: 200px;
}
#boxes h1{
text-align: center;
}
/*sidebar*/
aside#sidebar{
float:right;
width:30%;
margin-top:10px;
}
/*main-col*/
article#main-col{
float:left;
width:65%;
}
footer{
padding: 20px;
margin-top: 20px;
color: #1b3f8b;
background-color:#B3E8FF;
text-align: center;
font-size: 20px;
}
/*Repaint Gallery*/
.gallery img{
width:350px;
height:140px;
}
th{
font-size: 2em;
background-color:#35424a;
color:white;
}
td{
padding:25px;
text-align: center;
}
#repaintgallery table{
width: 100%;
margin:auto;
height: 100%;
}
/*Download Button*/
.download{
width:120px;
height:30px;
font-size:20px;
text-align:center;
background:#35424a;
border:none;
color:white;
display: inline-block;
text-decoration: none;
}
/*Media Queries*/
@media(max-width: 768px){
header #branding,
header nav,
header nav li,
#newsletter h1,
#boxes .box,
article#main-col,
aside#sidebar,
#newsletter form, #repaintgallery table{
float:none;
text-align:center;
width: 100%;
}
header{
padding-bottom: 20px;
}
#showcase h1{
margin-top: 40px;
}
#newsletter form button{
display:block;
width: 510px;
margin:auto;
}
#newsletter form input[type="email"]{
width:500px;
margin-bottom:5px;
}
#repaintgallery img{
width:170px;
height:85px;
margin:auto;
}
#repaintgallery table{
display: block;
}
.download {
width:60px;
height:25px;
font-size:10px;
text-align:center;
background:#35424a;
border:none;
color:white;
}
}

<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="kvxETPFss98nnIOWhaBbkHlKLAr3--nT5321XnFUVUg" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="FSX Repaints">
<meta name="keywords" content="fsx, repaints, project airbus, just flight, pmdg, captainsim, premier airraft design, pad, airlines, project opensky, posky, tom's ruth">
<meta name="author" content="Raven Lescano">
<title>Repaints | Raven's Hangar</title>
<link rel="stylesheet" href="./css/style.css" type="text/css">
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">RAVEN'S</span> HANGAR</h1>
</div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li class="current"><a href="repaints.html">Repaints</a></li>
<li><a href="aboutus.html">About Us</a></li>
</ul>
</nav>
</header>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form>
<input type="email" placeholder="Enter Email....." ="">
<button type="submit" class="button_1">Subscibe</button>
</form>
</div>
</section>
<section id="repaintgallery">
<div class="gallery">
<table>
<tr>
<th colspan="3">Repaints</th>
</tr>
<tr>
<td><img src="img/template7.png" alt=""><a class="download" href="repaints/tnc.rar" download>Download</a></td>
<td><img src="img/template9.png" alt=""><a class="download" href="repaints/agn.rar" download>Download</a></td>
<td><img src="img/template10.png" alt=""><a class="download" href="repaints/cen.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template3.png" alt=""><a class="download" href="repaints/ph.rar" download>Download</a></td>
<td><img src="img/template11.png" alt=""><a class="download" href="repaints/usao.rar" download>Download</a></td>
<td><img src="img/template17.png" alt=""><a class="download" href="repaints/ma.rar" download="ma.rar">Download</a></td>
</tr>
<tr>
<td><img src="img/template15.png" alt=""><a class="download" href="repaints/PH75th.rar" download>Download</a></td>
<td><img src="img/template16.png" alt=""><a class="download" href="repaints/CEBN.rar" download>Download</a></td>
</tr>
<tr>
<td><img src="img/template12.png" alt=""><a class="download" href="repaints/bin.rar" download>Download</a></td>
<td><img src="img/template13.png" alt=""><a class="download" href="repaints/as.rar" download>Download</a></td>
<td><img src="img/template14.png" alt=""><a class="download" href="repaints/001.rar" download>Download</a></td>
</tr>
</table>
</div>
</section>
<footer>
<p>Raven's Hangar, Copyright © 2017</p>
</footer>
</body>
</head>
</html>
&#13;
答案 0 :(得分:0)
如果您使用html标记进行链接。只需添加一个额外的属性下载。
这意味着你可以写
<a href="sample.jpg" download></a>
现在文件将提示下载名为sample.jpg的文件
如果你给下载的价值,如;
<a href="sample.jpg" download="demo.jpg"></a>
然后文件将提示下载新名称demo.jpg
尝试并告诉我你的问题。