我有一个页面,它将有多个按钮,我希望每个按钮将用户带到不同的地方。我找遍了所有的教程,但不知道该怎么做。我在正文中有这个:
<form method="get" action="KFC.html">
<input type="submit" value="KFC">
</form>
<form method="get" action="Pizza_Hut.html">
<input type="submit" value="Pizza Hut">
</form>
<form method="get" action="Olive_Garden.html">
<input type="submit" value="Olive Garden">
</form>
<form method="get" action="Create_Order.html">
<input type="Submit" value="Create Your Own Order">
</form>
</body>
我如何使多个按钮在一个页面上去不同的地方?这样对吗?它可以工作,但我被告知这是一个非常糟糕的方法
尝试添加标准的独立于浏览器的锚链接,然后使用CSS样式化它们,使它们看起来像你想要的按钮。
<a href="KFC.html" class="button">KFC</a>
<a href="Pizza_hut.html" class="button">Pizza hut</a>
等等……
然后CSS。在我下面的例子中,我展示了一种将链接设计成按钮样式的方法,我相信如果你搜索的话,你可以找到许多其他更合适的样式。
a.button {
display: inline-block;
padding: 5px;
border: 1px solid #999;
background: #aaa;
color: #333;
text-decoration: none;
}
a.button:hover {
background: #ccc;
}
我添加了一个类"按钮",所以你只样式某些链接作为按钮。这样,您就可以添加任意数量的"按钮",而无需在代码中添加表单,也不会影响页面上的其他链接。
您正在创建多个表单,这也可能导致延迟和验证问题。如果你想让你的按钮去某个地方,特别是有几个方法。
你可以使用onclick属性来捕捉点击事件,并根据按钮选择正确的位置,像这样可以工作。
<button type="button" id="1" onclick="window.location = newLocation1;">Click Me 1!</button>
<button type="button" id="2" onclick="window.location = newLocation2;">Click Me 2!</button>
<button type="button" id="3" onclick="window.location = newLocation3;">Click Me 3!</button>
谢谢。事实证明,你想要的答案与上面的答案非常相似。但出于某种原因,我不明白。下面是我的HTML代码:
<body>
<p>Deliveries<p>
<a href="KFC_Menu.html">KFC</a> #This part -> >KFC</a> gives you the text that appears on the button. The <a href="KFC_Menu.html"> will take you to the KFC_Menu page.
<br>
<a href="Create_Order.html">Create Your Own Order</a>
要使这些链接看起来像按钮,创建一个CSS文件,如下所示:
stylesheet.css
a {
text-decoration: none;
font-size: 24px;
font-family: sans-serif, arial;
font-weight: bold;
background-color: blue;
color: #ffffff;
padding: 8px;
border: 2px solid grey;
border-radius: 10px;
}