请帮我写一个屏幕使用时间程序的html界面包括css与js该界面主要有几个选项:报告设置关于我希望你尽量把界面做得好看偏黄色系使用圆形按钮横向排列
以下是一个简单的屏幕使用时间程序的HTML界面,包括CSS和JS。界面使用了黄色系的颜色,采用了横向排列的圆形按钮。
<!DOCTYPE html>
<html>
<head>
<title>屏幕使用时间</title>
<style>
body {
background-color: #fff8dc;
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 20px;
}
h1 {
color: #ffa500;
}
.buttons-container {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #ffa500;
color: #fff;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s;
}
.button:hover {
background-color: #ffa000;
cursor: pointer;
}
</style>
</head>
<body>
<h1>屏幕使用时间</h1>
<div class="buttons-container">
<a href="#" class="button">报告</a>
<a href="#" class="button">设置</a>
<a href="#" class="button">关于</a>
</div>
<script>
// 在这里添加JavaScript代码
</script>
</body>
</html>
你可以将以上代码复制到一个HTML文件中,然后在浏览器中打开该文件以查看界面效果。请注意,该界面只包含HTML和CSS,JavaScript部分暂时为空。你可以根据需要添加相应的功能和逻辑
原文地址: https://www.cveoy.top/t/topic/ixnG 著作权归作者所有。请勿转载和采集!