请你用html5和css3帮我写两个盒子模块,要求点击会浮动,模块要有颜色
时间: 2024-10-08 11:10:12 浏览: 24
HTML-CSS-Intermediario:ProgBr模块4和5
当然可以,以下是使用HTML5和CSS3创建两个响应式浮动的盒子模块,并设置了点击事件和基本的颜色样式:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.box-container {
display: flex;
justify-content: space-between; /* 使盒子水平居中 */
}
.box {
width: 200px;
height: 200px;
background-color: #f00; /* 红色背景 */
color: white;
text-align: center;
line-height: 200px;
cursor: pointer; /* 鼠标悬停变为手形 */
transition: transform 0.3s ease; /* 添加过渡效果 */
}
.box:hover {
transform: translateY(-5px); /* 点击时向上移动一点 */
}
.blue-box {
background-color: #00f; /* 蓝色背景 */
}
</style>
</head>
<body>
<div class="box-container">
<div class="box blue-box" onclick="this.style.backgroundColor = '#00f';">点击变蓝</div>
<div class="box" onclick="this.style.backgroundColor = '#f00';">点击变红</div>
</div>
</body>
</html>
```
在这个例子中,我们有两个`.box`容器,每个都包含一个按钮。当用户点击红色盒子时,它将变为蓝色;点击蓝色盒子时,它将变为红色。它们通过CSS的`:hover`伪类实现浮动效果,鼠标悬停时会有轻微上移。
阅读全文