Question

我在你的论坛上已经看到了很多这个问题但是，所有答案甚至问题都比我的知识要先进得多。我刚开始学习html和css，所以我遇到了这个页面： HTML CSS - Responsive buttons (grid) 我喜欢这个设计所以我决定使用它。问题出在这里：我正在运行Wamp64。运行localhost服务器和数据库。但是，我希望localhost / index.html页面让我选择使用上面提到的按钮转到localhost中的不同页面。例如。我点击＆＃34;测试01＆＃34;然后它会转到＆＃34; http://localhost/test01＆＃34;，而后者又连接到不同的数据库。我在测试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，甚至是＆＃39; form method =＆＃34; link＆＃34;的直接html。行动=＆＃34; HTTP：//localhost/test01/index.php> ，但唯一发生的事情是，按钮会对我的点击作出反应，但不会重定向我。我做错了什么？

Answer 1

试试吧，

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 2

当您执行<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>

Answer 3

您不必在a-tag之间放置button-tag。它是一个按钮或一个链接。

检查w3schools上的HTML button Tag以获取更多信息。

＆＃13;

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

＆＃13;

检查w3schools上的HTML a Tag以获取更多信息。

＆＃13;

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

＆＃13;

css / html按钮链接不起作用

3 个答案: