css/html 按鈕鏈接不起作用

Question

我在您的論壇上經常看到這個問題，但是所有的答案甚至問題都比我的知識先進得多。 我剛剛開始學習 html 和 css，所以我遇到了這個頁面： HTML CSS - 響應式按鈕（網格）我喜歡這個設計，所以我決定使用它。 問題是：我正在運行 Wamp64。 運行本地主機服務器和數據庫。 但是，我希望 localhost/index.html 頁面讓我可以選擇使用上面提到的按鈕轉到 localhost 中的不同頁面。 例如。 我單擊“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.php> 的直接 html，但唯一發生的事情是, 按鈕對我的點擊有反應，但沒有重定向我。我做錯了什么？

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 type="button">Click Me!</button>

查看 w3schools 上的HTML a Tag以獲取更多信息。

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

css/html 按鈕鏈接不起作用

問題描述

3 個解決方案

解決方案1
1 已采納 2017-01-09 08:24:37

解決方案2
0 2017-01-09 08:25:45

解決方案3
-1 2017-01-09 08:19:35

css/html 按鈕鏈接不起作用

問題描述

3 個解決方案

解決方案1 1 已采納 2017-01-09 08:24:37

解決方案2 0 2017-01-09 08:25:45

解決方案3 -1 2017-01-09 08:19:35

解決方案1
1 已采納 2017-01-09 08:24:37

解決方案2
0 2017-01-09 08:25:45

解決方案3
-1 2017-01-09 08:19:35