.button { transition: background-color 0.3s ease-in-out; } .button:hover { background-color: #ff9900; } .container { width: 800px; margin: 0 auto; } .input { margin-bottom: 10px; } .result { display: flex; justify-content: space-around; } .success, .failure { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; } .success { background-color: lightgreen; } .failure { background-color: orange; }
时间: 2024-03-26 16:36:37 浏览: 141
Button控件的字体颜色和背景颜色
这是CSS样式表中的一些样式定义,用于设置HTML元素的外观和布局等。
在上面的代码中,我们定义了一些类名,用于设置不同的样式:
1. .button:设置按钮的过渡效果,当鼠标悬浮在按钮上时,背景颜色会以0.3秒的时间从当前颜色渐变到#ff9900。
2. .button:hover:设置按钮在鼠标悬浮时的背景颜色为#ff9900。
3. .container:设置容器的宽度为800像素,并将其水平居中。
4. .input:设置表单输入框的下边距为10像素。
5. .result:将结果容器内的内容水平居中对齐。
6. .success和.failure:设置成功和失败的样式,宽高均为200像素,内容采用flex布局,居中对齐,字体大小为24像素,字体加粗。
7. .success:设置成功容器的背景颜色为lightgreen。
8. .failure:设置失败容器的背景颜色为orange。
通过定义这些样式,我们可以让HTML元素拥有更加美观、合理的外观和布局,从而提高用户体验。
阅读全文