modified: public/main.html

modified:   public/styles-main.css
This commit is contained in:
IrisVega 2024-07-13 16:46:48 +08:00
parent 5c66815320
commit 54b41e97d8
2 changed files with 16 additions and 2 deletions

View File

@ -8,10 +8,10 @@
<link rel="stylesheet" href="styles-main.css"> <link rel="stylesheet" href="styles-main.css">
</head> </head>
<body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;"> <body background="./bg.png" style="background-size:100% 100%; background-attachment: fixed;">
<button class="BackButton" id="BackButton">退出登录</button> <div class="slider-button-container">
<div class="slider-container">
<input type="range" id="mySlider" min="0" max="100" value="50"> <input type="range" id="mySlider" min="0" max="100" value="50">
<span id="sliderValue">50</span> <span id="sliderValue">50</span>
<button class="BackButton" id="BackButton">退出登录</button>
</div> </div>
<div class="tab-container"> <div class="tab-container">
<div class="tab"> <div class="tab">

View File

@ -175,8 +175,22 @@ span {
padding: 5px 10px; padding: 5px 10px;
transition: 0.3s; transition: 0.3s;
font-size: 12px; /* 调整字体大小 */ font-size: 12px; /* 调整字体大小 */
flex-shrink: 0;
} }
.BackButton:hover { .BackButton:hover {
background-color: #ff1493; /* 深粉色背景 */ background-color: #ff1493; /* 深粉色背景 */
} }
.slider-button-container {
display: flex;
align-items: center;
justify-content: space-between;
}
#mySlider {
margin-right: 0px; /* 添加间距以分开滑块和按钮 */
}
#sliderValue {
flex-grow: 1;
margin-left: 10px; /* 添加间距以分开按钮和滑块值 */
}