首页怎样用html讲两个按钮居中颜色为绿色

怎样用html讲两个按钮居中颜色为绿色

时间: 2024-04-13 10:25:26 浏览: 184

你可以使用 CSS 样式来实现按钮的居中和绿色背景颜色。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>Centered Buttons</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .container { text-align: center; } .container button { margin: 10px; padding: 10px 20px; background-color: green; color: white; border: none; border-radius: 3px; cursor: pointer; } .container button:hover { background-color: darkgreen; } </style> </head> <body> <div class="container"> <button>Button 1</button> <button>Button 2</button> </div> </body> </html> ``` 在上面的示例中，我们使用了 Flexbox 布局和 CSS 样式来实现按钮的居中和绿色背景颜色。`body` 元素的样式设置了 `display: flex;`，`justify-content: center;` 和 `align-items: center;`，使页面内容在水平和垂直方向上都居中显示。按钮的样式通过 `.container button` 来设置，其中包括了绿色背景颜色和鼠标悬停时的颜色变化效果。你可以将以上代码保存到一个名为 "centered_buttons.html" 的文件中，并在浏览器中打开该文件，即可看到两个居中且颜色为绿色的按钮。

阅读全文