给下面代码补充一个样式:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计时器</title> <link rel="preload" href="fonts/mui.ttf" as="font" crossorigin> <link rel="stylesheet" href="vendor/mui.min.css"> <link rel="stylesheet" href="vendor/waves.min.css"> <link rel="stylesheet" href="static/general-48e00d0585.css"> <link rel="shortcut icon" href="https:assets.retiehe.com/rth-legacy-icom-512.png"> <script src="static/theme-d5fe8b3fc6.js"></script> <meta name="theme-color" content="#ffffff"> </head> <body class="timer"> <div id="bg-img" class="bg-img"></div> <main> <div id="time" data-v-app> <div class="mui-input-row"> <input class="display" type="text"> </div> <div class="mui-input-row mui-input-range"> <label for="hour">时</label> <input id="minute" tpye="range" min="0" max="59"> </div> <div class="mui-input-row mui-input-rang"> <label for="second">秒</label> <input id="second" type="range" min="0" max="59"> </div> </div> <select> <option value="Countdown">倒计时</option> <option value="Stopwatch">秒表</option> <option value="CurrentTime">当前时间</option> </select> <button id="star-btn" type="button" class="mui-bin mui-btn-blue mui-btn-block waves-effect wave-light">开始</button> <button id="reset-btn" tpye="button" class="mui-btn mui-btn-block waves-effect waves-light">复位</button> </main> <script scr="static/i18n-36955081a6.js"></script> <script scr="static/general-e70b71a82f.js"></script> <script scr="https://static.retiehe.com/js/waves.min.js"></script> <script scr="static/timer-181c3930f6.js"></script> <script async scr="https://static.retiehe.com/js/wave.min.js"></script> <header class="mui-bar mui-bar-nav"> <div id="back-btn" class="mui-icon mui-icon-contact mui-pull-right" tabindex="0" role="button" aria-label="用户"></div> </header> <div class="mask" tabindex="0" aria-label="关闭弹窗" hidden></div> </body> </html>
时间: 2023-08-14 16:18:54 浏览: 166
HTML5开发手册(Chuck Hudson & Tom Leadbetter)第一章代码
5星 · 资源好评率100%
以下是一些样式示例,可以根据需要进行自定义:
```css
/* 计时器背景图片 */
.bg-img {
background-image: url("your-image-url");
background-size: cover;
}
/* 计时器主要内容 */
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
/* 选择框 */
select {
margin-top: 20px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: lightgray;
}
/* 开始按钮 */
#start-btn {
margin-top: 20px;
font-size: 20px;
padding: 10px;
border-radius: 5px;
border: none;
background-color: blue;
color: white;
cursor: pointer;
}
/* 复位按钮 */
#reset-btn {
margin-top: 10px;
font-size: 16px;
padding: 5px;
border-radius: 5px;
border: 2px solid blue;
background-color: white;
color: blue;
cursor: pointer;
}
/* 弹窗遮罩层 */
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
```
只需将上述代码放在你的CSS文件中,或者在HTML文件的`<head>`标签中添加`<style>`标签,即可应用样式。
阅读全文