下载按钮(打开文件不下载文件)

时间:2017-10-10 04:51:23

标签: html css download

最近我遇到的问题是,当我点击下载按钮时,它总是打开而不是下载文件(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="&nbsp;"/>
		<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 &copy; 2017</p>
				</footer>
			</body>
	</head>
</html>
&#13;
&#13;
&#13;

IMG [https://i.stack.imgur.com/TGoFg.jpg][1]

试试这里 [https://ravens-hangar.tk/repaints.html][1]

1 个答案:

答案 0 :(得分:0)

如果您使用html标记进行链接。只需添加一个额外的属性下载。

这意味着你可以写

<a href="sample.jpg" download></a>

现在文件将提示下载名为sample.jpg的文件

如果你给下载的价值,如;

<a href="sample.jpg" download="demo.jpg"></a>

然后文件将提示下载新名称demo.jpg

尝试并告诉我你的问题。