屏幕使用时间程序按钮横向排列
<!DOCTYPE html>
<html>
<head>
<title>屏幕使用时间程序</title>
<style>
body {
background-color: #f5f3e7;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
<pre><code> h1 {
color: #ffcc00;
text-align: center;
}
.container {
display: flex;
justify-content: center;
margin-top: 50px;
}
.button {
width: 100px;
height: 100px;
background-color: #ffd633;
border-radius: 50%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #ffcc00;
}
.arc-button-container {
display: flex;
justify-content: center;
margin-top: 50px;
}
.arc-button {
width: 100px;
height: 100px;
background-color: #ffd633;
border-radius: 50%;
margin: 0 10px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: background-color 0.3s;
transform: rotate(-90deg);
}
.arc-button:hover {
background-color: #ffcc00;
}
</style>
</code></pre>
</head>
<body>
<h1>屏幕使用时间程序</h1>
<pre><code><div class='arc-button-container'>
<div class='arc-button' onclick='openReport()'>报告</div>
<div class='arc-button' onclick='openSettings()'>设置</div>
<div class='arc-button' onclick='openAbout()'>关于</div>
</div>
<script>
function openReport() {
// TODO: 打开报告页面的逻辑
console.log('打开报告页面');
}
function openSettings() {
// TODO: 打开设置页面的逻辑
console.log('打开设置页面');
}
function openAbout() {
// TODO: 打开关于页面的逻辑
console.log('打开关于页面');
}
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/qeGO 著作权归作者所有。请勿转载和采集!