用HTML+css写一个简单的奶茶叫号页面
时间: 2024-03-25 15:35:29 浏览: 115
好的!以下是一个简单的奶茶叫号页面的 HTML+CSS 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>奶茶叫号页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 50px;
}
.container {
background-color: #fff;
border-radius: 5px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 500px;
margin: 0 auto;
text-align: center;
}
h2 {
font-size: 30px;
margin-top: 0;
}
p {
font-size: 20px;
margin-bottom: 30px;
color: #666;
}
button {
background-color: #0099ff;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 20px;
font-size: 20px;
cursor: pointer;
transition: background-color 0.2s ease;
}
button:hover {
background-color: #0066cc;
}
</style>
</head>
<body>
<h1>奶茶叫号页面</h1>
<div class="container">
<h2>请记住您的号码</h2>
<p>您的号码是:<strong>18</strong></p>
<button>重新生成号码</button>
</div>
</body>
</html>
```
你可以将上面的代码保存为一个 HTML 文件,然后在浏览器中打开该文件,即可看到一个简单的奶茶叫号页面。
阅读全文