帮我写个html页面,页面包含两个按钮,两个按钮并列在屏幕中间,一个按钮显示查询另一个按钮显示管理,点击这两个按钮跳转到不同的页面,并帮我美化一下这个页面。
时间: 2023-09-03 17:27:39 浏览: 124
### 回答1:
您好,下面是您请求的HTML页面的代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮页面</title>
<style>
/* 为按钮设置样式 */
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="text-align: center;">按钮页面</h1>
<!-- 创建两个按钮 -->
<div style="text-align: center;">
<a href="#" class="button">查询</a>
<a href="#" class="button">管理</a>
</div>
</body>
</html>
```
这个页面包含两个按钮,分别显示"查询"和"管理",它们位于屏幕中间,并且用 CSS 样式进行了美化。
在这个代码中,我们使用了 HTML 的 `a` 标签创建了两个按钮,并使用了 `href` 属性来指定点击按钮后跳转的页面。当然,您可以将 `href` 属性的值替换为您想要跳转的页面的 URL。
我们还使用了 CSS 样式为按钮设置了背景色、字体颜色、内边距、对齐方式等属性。您可以根据自己的需要调整这些样式,以达到您想要的效果。
希望这个代码能帮
### 回答2:
好的,以下是一个简单的HTML代码,实现了你所描述的功能,并添加了一些基本的样式进行美化:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding: 20px;
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
}
.button {
display: inline-block;
padding: 10px 20px;
margin: 10px;
font-size: 16px;
color: white;
background-color: #4CAF50;
border: none;
border-radius: 5px;
text-decoration: none;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
.button-query {
background-color: #4CAF50;
}
.button-manage {
background-color: #008CBA;
}
</style>
</head>
<body>
<div class="container">
<button class="button button-query" onclick="window.location.href='query.html'">查询</button>
<button class="button button-manage" onclick="window.location.href='manage.html'">管理</button>
</div>
</body>
</html>
```
这段代码创建了一个居中的容器,容器内包含两个按钮,并且按钮样式使用了不同的背景颜色。点击按钮时会跳转到指定页面(这里分别是`query.html`和`manage.html`,你可以根据实际需求修改)。
希望这段代码对你有帮助,如有任何疑问,请随时提问。
### 回答3:
当然可以帮您写一个包含两个按钮的HTML页面。首先,您需要创建一个HTML文件,比如命名为“index.html”。在文件中,您可以使用以下代码来创建两个按钮并使它们并列在屏幕中央:
```html
<!DOCTYPE html>
<html>
<head>
<title>按钮页面</title>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.button {
padding: 10px 20px;
margin: 0 10px;
font-size: 18px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<button class="button" onclick="window.location.href='query.html'">查询</button>
<button class="button" onclick="window.location.href='management.html'">管理</button>
</div>
</body>
</html>
```
以上代码中,我们将两个按钮放在名为“container”的div容器内,使其通过flex布局在水平方向上并列,并通过justify-content和align-items属性使它们居中显示。按钮的样式通过内联和样式标签的方式来定义。其中,button类设置了基本的样式,包括背景颜色、文字颜色、边框等,hover伪类定义了鼠标悬停时按钮的样式。
要实现点击按钮跳转到不同页面,可以在按钮的onclick事件中使用JavaScript代码,使其跳转到指定的页面。在此示例中,我们将查询按钮跳转到“query.html”页面,管理按钮跳转到“management.html”页面。
最后,您可以根据自己的需求自定义您所认为美化的样式,例如调整按钮的颜色、字体大小、边距等。
阅读全文
相关推荐


















