css/html 个按钮 link 不工作

Question

我在你们的论坛上经常看到这个问题，但是所有的答案甚至问题都比我的知识先进得多。我刚开始学习 html 和 css，所以我看到了这个页面： HTML CSS - Responsive buttons (grid) 我喜欢这个设计，所以我决定使用它。问题是：我是运行 Wamp64。运行本地主机服务器和数据库。但是，我希望 localhost/index.html 页面让我可以选择使用上述按钮转到本地主机中的不同页面。例如。我单击 "test 01"，它将带我到“http://localhost/test01”，它又连接到另一个数据库。我点击测试 2，它将转到本地主机中的 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 的直接 html。php> ，但唯一发生的事情是，按钮对我的点击做出反应，但不会重定向我。我做错了什么？

Answer 1

您不必在 button-tag 之间放置 a-tag。它要么是一个按钮，要么是 link.

在 w3schools 上查看 HTML button Tag 了解更多信息。

<button type="button">Click Me!</button>

在 w3schools 上查看 HTML a Tag 了解更多信息。

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

Answer 2

试一试，

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>

有效吗？

Answer 3

当您执行 <a href="307.html">307</a> 时，只有“309”是可点击的 link 网页，按钮基本上什么都不做。

您可以通过将 class 名称放入 link

来为这些 link 应用类似样式的按钮

您可以在下面尝试此操作，但您可能需要根据自己的喜好更新 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>

css/html 个按钮 link 不工作

css/html buttons link not working

html

css

ref

hyperlink