给我一个后台html的一个名字在最上面,下面有三个鼠标移动变色的按钮,给我代码和css
时间: 2024-05-01 13:21:14 浏览: 42
鼠标移动变色代码
好的,这里是一个简单的示例代码和 CSS:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>后台 HTML</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>后台 HTML</header>
<div class="button-container">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</div>
</body>
</html>
```
CSS代码:
```css
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
.button-container {
display: flex;
justify-content: center;
margin-top: 50px;
}
.btn {
background-color: #333;
color: #fff;
border: none;
padding: 10px 20px;
margin: 0 10px;
cursor: pointer;
}
.btn:hover {
background-color: #fff;
color: #333;
}
```
在这个示例中,我们使用了一个 `<header>` 元素来放置页面的标题,然后使用了一个包含三个按钮的 `<div>` 元素,这三个按钮都有 `.btn` 类名,当鼠标悬停在按钮上时,按钮的背景色和文本颜色都会发生变化,这是使用 `.btn:hover` 选择器实现的。
阅读全文