RyanGoodwill/web_assignment
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor:重构了部分css，但是实在太乱了，构不动这坨构史了

Browse Source
This commit is contained in:
高子兴 2024-07-14 18:07:32 +08:00
parent 21a51f3e1a
commit 7d6dd8671e
1 changed files with 105 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

232
src/main/webapp/resources/css/styles.css
View File

@ -69,16 +69,109 @@ footer {
text-align: center; text-align: center;
} }
.project-list li:hover, .liButton:hover { .project-button {
background-color: #fff;
border: 1px solid #ddd;
margin: 5px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
display: inline-block;
width: auto; /* 调整按钮宽度，使其不占满整行 */
}
.project-button:hover {
background-color: #f0f0f0; background-color: #f0f0f0;
} }
/* Project form styling */ /* 按钮样式 */
/*.project-form {*/ .project-button {
/* background-color: #fff;*/ background-color: #fff;
/* padding: 20px;*/ border: 1px solid #ddd;
/* border: 1px solid #ddd;*/ margin: 5px;
/*}*/ padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
display: inline-block;
width: auto;
}
.project-button:hover {
background-color: #f0f0f0;
}
/* 保存按钮样式 */
#saveButton, .saveButton {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#saveButton:hover {
background-color: #0056b3;
}
.btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #555;
}
.edit-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.edit-button:hover {
background-color: #45a049; /* 悬停时背景颜色 */
}
.cancel-button {
background-color: #ffffff; /* 红色背景 */
color: #000000; /* 黑色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.cancel-button:hover {
background-color: #d2d2d2; /* 悬停时背景颜色 */
}
.project-list li:hover, .liButton:hover {
background-color: #f0f0f0;
}
.project-form label { .project-form label {
display: block; display: block;
@ -98,35 +191,6 @@ footer {
resize: vertical; resize: vertical;
} }
.btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #555;
}
/* Save button styling */
.save_btn {
background-color: #4CAF50; /* Green background color */
color: white; /* White text color */
padding: 10px 20px; /* Padding for the button */
border: none; /* Remove default border */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
font-size: 16px; /* Font size */
transition: background-color 0.3s ease; /* Smooth transition for background color */
}
.save_btn:hover {
background-color: #45a049; /* Darker green on hover */
}
/* Project list item styling */ /* Project list item styling */
#project-list, #user-list { #project-list, #user-list {
@ -134,7 +198,7 @@ footer {
background-color: #f9f9f9; background-color: #f9f9f9;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */ max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
margin: 20px auto; margin: 20px auto;
text-align: center; text-align: center;
@ -146,28 +210,12 @@ footer {
margin-bottom: 20px; margin-bottom: 20px;
} }
.project-button { #project-details, #user-info {
background-color: #fff;
border: 1px solid #ddd;
margin: 5px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
display: inline-block;
width: auto; /* 调整按钮宽度，使其不占满整行 */
}
.project-button:hover {
background-color: #f0f0f0;
}
#project-details,#user-info {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-color: #f9f9f9; background-color: #f9f9f9;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */ max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
margin: 20px auto; margin: 20px auto;
} }
@ -206,7 +254,7 @@ footer {
background-color: #f9f9f9; background-color: #f9f9f9;
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */ max-width: 80%; /* 修改为百分比宽度，自适应屏幕 */
margin: 20px auto; margin: 20px auto;
} }
@ -265,45 +313,12 @@ footer {
text-align: center; /* 使每个选项内的文本居中 */ text-align: center; /* 使每个选项内的文本居中 */
} }
/* 按钮样式 */
.project-button {
background-color: #fff;
border: 1px solid #ddd;
margin: 5px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: center;
display: inline-block;
width: auto;
}
.project-button:hover {
background-color: #f0f0f0;
}
/* 保存按钮样式 */
#saveButton,.saveButton {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#saveButton:hover {
background-color: #0056b3;
}
/* Section styling for About Me */ /* Section styling for About Me */
#about-me { #about-me {
background-color: #fff; /* 白色背景 */ background-color: #fff; /* 白色背景 */
padding: 20px; /* 内边距 */ padding: 20px; /* 内边距 */
border-radius: 10px; /* 圆角边框 */ border-radius: 10px; /* 圆角边框 */
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 盒子阴影 */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 盒子阴影 */
max-width: 80%; /* 设置最大宽度 */ max-width: 80%; /* 设置最大宽度 */
margin: 20px auto; /* 垂直外边距和水平居中 */ margin: 20px auto; /* 垂直外边距和水平居中 */
} }
@ -323,40 +338,3 @@ footer {
color: #555; /* 文字颜色 */ color: #555; /* 文字颜色 */
} }
.edit-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.edit-button:hover {
background-color: #45a049; /* 悬停时背景颜色 */
}
.cancel-button {
background-color: #ffffff; /* 红色背景 */
color: #000000; /* 黑色文字 */
border: none; /* 无边框 */
padding: 10px 20px; /* 内边距 */
text-align: center; /* 文字居中 */
text-decoration: none; /* 无下划线 */
display: inline-block; /* 行内块 */
font-size: 16px; /* 字体大小 */
margin: 4px 2px; /* 外边距 */
cursor: pointer; /* 鼠标指针 */
border-radius: 4px; /* 圆角 */
transition: background-color 0.3s; /* 背景色过渡效果 */
}
.cancel-button:hover {
background-color: #d2d2d2; /* 悬停时背景颜色 */
}