css / html按钮链接不工作
我在你的论坛中看到过很多这个问题，但是所有的答案，甚至是问题都远远超出我的知识水平。 我刚开始学习HTML和CSS，所以我遇到了这个页面：HTML CSS - 响应按钮（网格）我喜欢这个设计，所以我决定使用它。 这是问题：我正在运行Wamp64。 运行本地主机服务器和数据库。 但是，我希望localhost / index.html页面可以让我选择使用上面提到的按钮访问本地主机中的不同页面。 例如。 我点击“测试01”，它会带我到“http：// localhost / test01”，然后连接到不同的数据库。 我试着测试2，它会去localhost中的test02目录，连接到数据库test02等等。 使用上面的代码，我将href更改为我的地址（请参阅下文），但是当我点击它们时，没有任何反应：
HTML：
<link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<button type="button3" class="button3">
<a href="http://localhost/test01">Test 1</a>
</button>
<button type="button3" class="button3">
<a href="http://localhost/test02/index.php">Test 2</a>
</button>
<button type="button3" class="button3">
<a href="309.html">309</a>
</button>
<button type="button3" class="button3">
<a href="304.html">304</a>
</button>
<button type="button3" class="button3">
<a href="307.html">307</a>
</button>
<button type="button3" class="button3">
<a href="310.html">310</a>
</button>
<button type="button3" class="button3">
<a href="311.html">311</a>
</button>
<button type="button3" class="button3">
<a href="312.html">312</a>
</button>
</center>
</div>
这是CSS：
.button {
height: 40px;
width: 130px;
margin-bottom: 3%;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
border-color: #ffffff;
}
.button:hover {
background-color: #474240;
font-family: 'Muli', sans-serif;
}
.button1 {
height: 40px;
width: 70px;
background-color: #7C8082;
font-size: 100%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:5px;
}
.button1:hover {
background-color: #474240;
}
.button3 {
height: 80px;
width: 30%;
background-color: #7C8082;
font-size: 200%;
color: white;
font-family: 'Muli', sans-serif;
border-radius: 5px;
margin-top:10px;
}
.button3:hover {
background-color: #474240;
}
我尝试重命名链接，将href更改为动作OnClick，甚至是'form method =“link”action =“http：//localhost/test01/index.php”的直接html，但唯一发生的事情是，该按钮对我的点击作出反应，但没有重定向我。我做错了什么？
尝试一下，
link rel="stylesheet" type="text/css" href="css/styles.css" >
<div class="middle">
<center>
<a href="304.html" class ="button3" >304</a>
<a href="309.html" class ="button3" > 309</a>
</center>
</div>
它有效吗？
当您执行<a href="307.html">307</a>只有“309”是可点击的网页链接，而按钮基本上什么也不做。
您可以通过将类名称放入链接中，将类似按钮的按钮应用于这些链接
你可以在下面尝试，但是你可能需要更新css到你喜欢的=
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<header id="header">
<div class="middle">
<center>
<a href="http://localhost/test01" class="button3">Test 1</a>
<a href="http://localhost/test02/index.php" class="button3">Test 2</a>
<a href="309.html" class="button3">309</a>
<a href="304.html" class="button3">304</a>
<a href="307.html" class="button3">307</a>
<a href="310.html" class="button3">310</a>
<a href="311.html" class="button3">311</a>
<a href="312.html" class="button3">312</a>
</center>
</div>
</html>
您不必在button-tag a-tag之间放置a button-tag 。 它是一个按钮或一个链接。
查看w3schools上的HTML按钮标签获取更多信息。
<button type="button">Click Me!</button>上一篇: css/html buttons link not working
下一篇: create an HTML button with Onlick that aslo works as a link?