抽签页面前端代码css
时间: 2024-01-07 08:00:46 浏览: 147
抽签页面前端代码CSS主要用于布局和样式设计,下面是一个简单的抽签页面前端代码CSS示例:
```css
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2; /* 页面背景色 */
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* 抽签页面样式 */
.lottery-card {
background-color: #fff; /* 抽签卡片的背景色 */
width: 300px;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.lottery-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.lottery-result {
font-size: 18px;
color: #ff0000; /* 抽签结果文字颜色 */
margin-bottom: 20px;
}
.lottery-button {
background-color: #007bff; /* 抽签按钮背景色 */
color: #fff; /* 抽签按钮文字颜色 */
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.lottery-button:hover {
background-color: #0056b3; /* 鼠标悬停时的背景色 */
}
```
以上是一个基础的抽签页面前端代码CSS示例,你可以根据实际需求进行自定义修改,添加一些动画效果或其他样式来增强页面的美观性和交互性。
阅读全文