From 43724ea79eeb1768fd696011a2bcc7fbf0926641 Mon Sep 17 00:00:00 2001
From: CFF <1730422060@qq.com>
Date: Sun, 26 Oct 2025 15:56:40 +0800
Subject: [PATCH] =?UTF-8?q?css=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/resources/static/css/myCenter.css | 93 +++++++++++-----------
 src/main/resources/static/css/pages.css    | 44 +++++-----
 2 files changed, 69 insertions(+), 68 deletions(-)

diff --git a/src/main/resources/static/css/myCenter.css b/src/main/resources/static/css/myCenter.css
index 124eb31..9503c1a 100644
--- a/src/main/resources/static/css/myCenter.css
+++ b/src/main/resources/static/css/myCenter.css
@@ -1,117 +1,118 @@
+/*这段 CSS 代码主要用于设置网站导航栏、侧边栏和主内容区的样式，整体风格统一且带有交互效果。*/
 .navbar-default{
-	transition: all 0.6s;
-	background-color: #219ED8;
-	border: 0;
-	border-radius: 0;
+    transition: all 0.6s; /* 所有样式变化添加0.6秒过渡动画（如hover效果、展开收起） */
+    background-color: #219ED8;/* 导航栏背景色：亮蓝色 */
+    border: 0;/* 取消默认边框 */
+    border-radius: 0;/* 取消默认圆角，改为直角 */
 }
 
 
-.header{                                       
-	text-align: center;
-	letter-spacing: 1rem;
+.header{
+    text-align: center;/* 文本居中对齐 */
+    letter-spacing: 1rem;/* 字符间距1rem，增强标题的视觉松散感 */
 }
 
 .navbar{
-	min-height: 5.4rem !important;
+    min-height: 5.4rem !important;/* 导航栏最小高度5.4rem（!important强制覆盖默认值） */
 }
 
 
-@media screen and (min-width:1000px){
+@media screen and (min-width:1000px){ /* 屏幕宽度≥1000px时生效 */
 
-.nav-con{
-	padding: 0 12rem;
-}
+    .nav-con{/* 导航内容容器 */
+        padding: 0 12rem;/* 左右内边距12rem，让导航内容在大屏上两侧留白，居中展示 */
+    }
 
 }
 
 label{
-	display: none;
+    display: none;/* 隐藏所有<label>标签（可能通过占位符或其他方式提示表单内容） */
 }
 
 
 .navbar-default .navbar-nav>li>a {
-    color: white;
+    color: white;/* 导航链接文字颜色：白色 */
 }
 
 li.navli{
-	margin-right: 40px;
+    margin-right: 40px;/* 导航项右侧间距40px，避免链接挤在一起 */
 }
-
+/* 汉堡按钮（移动端菜单按钮） hover/focus状态 */
 .navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{
-	background: transparent;
+    background: transparent;/* 悬停/聚焦时背景透明（不改变背景色） */
 }
-
+/* 汉堡按钮边框 */
 .navbar-default .navbar-toggle {
-    border-color: white;
+    border-color: white;/* 按钮边框颜色：白色 */
 }
-
+/* 汉堡按钮内部线条 */
 .navbar-default .navbar-toggle .icon-bar {
-    background-color: white;
+    background-color: white;/* 按钮线条颜色：白色 */
 }
 
 .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover{
-	background: transparent;
-	color: white;
-	transition: all 0.6s;
-	transform: scale(1.0,1.2);
+    background: transparent;/* 下拉菜单展开时，父项背景透明 */
+    color: white;/* 文字保持白色 */
+    transition: all 0.6s;/* 样式变化过渡动画0.6秒 */
+    transform: scale(1.0,1.2);/* Y轴拉伸1.2倍（纵向轻微放大，增强激活感） */
 }
 
 
 .navbar-nav>li>a{
-	padding-top: 1.7rem;
+    padding-top: 1.7rem;/* 导航链接顶部内边距1.7rem，控制文字在导航栏中的纵向位置 */
 }
 
 
 .navbar-default .navbar-nav>li>a:hover{
-	color: white;
-	transition: all 0.6s;
+    color: white;/* 悬停时文字保持白色（默认是灰色） */
+    transition: all 0.6s;/* 过渡动画0.6秒（可配合其他hover样式平滑变化） */
 }
 
 .main{
-	margin-top: -20px;
+    margin-top: -20px;/* 顶部负外边距-20px，消除与导航栏之间的默认间距 */
 }
 
 .nopadding{
-	padding: 0;
+    padding: 0;/* 清除元素所有内边距（通用工具类） */
 }
 
 .navlist{
-	min-height: 58rem;
-	background: #254552;
+    min-height: 58rem;/* 侧边栏最小高度58rem，确保高度足够容纳内容 */
+    background: #254552;/* 侧边栏背景色：深青灰色 */
 }
 
 a.list-group-item{
-	color: #C2D2CB;
-	padding-left: 3rem;
+    color: #C2D2CB;/* 链接文字颜色：浅灰绿色 */
+    padding-left: 3rem;/* 左侧内边距3rem，文字向右缩进，增强层级感 */
 
 }
 
 .list-group-item{
-	background-color:transparent;
-	color: #C2D2CB;
-	border:0;
-	border-radius: 0;
+    background-color:transparent; /* 列表项背景透明（继承侧边栏深青灰色） */
+    color: #C2D2CB;/* 文字颜色：浅灰绿色 */
+    border:0;/* 取消默认边框 */
+    border-radius: 0;/* 取消默认圆角，改为直角 */
 }
 
 .list-group-item:hover,.list-group-item:focus{
-	background-color:transparent !important;
-	color: #C2D2CB !important;
+    background-color:transparent !important;/* 悬停/聚焦时背景仍透明（!important强制覆盖） */
+    color: #C2D2CB !important;/* 文字颜色保持不变（!important强制覆盖） */
 
 }
 
 .list-group-item.active,.list-group-item.active:hover{
-	background: #20343D  !important;
-	color:white !important;
-	border: 0;
+    background: #20343D  !important;/* 激活项背景色：更深的青灰色（!important强制覆盖） */
+    color:white !important; /* 激活项文字颜色：白色（突出显示） */
+    border: 0;/* 无边框 */
 }
 
 .glyphicon{
-	margin-right: 10px;
+    margin-right: 10px;/* 图标右侧间距10px，与文字分隔开 */
 }
 
 .mainFrame{
-	width: 100%;
-	min-height: 60rem;
+    width: 100%;/* 宽度100%，占满父容器 */
+    min-height: 60rem;/* 最小高度60rem，确保内容区有足够高度 */
 }
 
 
diff --git a/src/main/resources/static/css/pages.css b/src/main/resources/static/css/pages.css
index cd05663..6b40d81 100644
--- a/src/main/resources/static/css/pages.css
+++ b/src/main/resources/static/css/pages.css
@@ -1,36 +1,36 @@
-
+/*这段 CSS 代码主要用于定义页面中用户信息展示、数据项布局等元素的样式，功能明确且针对性强。*/
 .nopadding{
-	padding-left: 0;
-	padding-right: 0;
+    padding-left: 0;/* 清除左侧内边距 */
+    padding-right: 0;/* 清除右侧内边距 */
 }
-
+/*定义用户头像的样式，核心是通过 border-radius: 50% 将图片片裁剪成圆形，并通过宽度和外边距控制其大小和居中显示*/
 .userpic{
-	width: 50%;
-	border-radius: 50%;
-	border: 1px solid black;
-	margin-left:25%;
+    width: 50%;/* 宽度为父容器的50%（自适应父元素大小） */
+    border-radius: 50%;/* 圆角半径50%，将图片裁剪成圆形 */
+    border: 1px solid black; /* 1px黑色实线边框，勾勒出头像的轮廓 */
+    margin-left:25%;/* 左侧外边距25%（配合父容器宽度的25%），配合50%宽度实现水平居中 */
 }
-
+/*设置用户名的展示样式，通过居中和与头像的间距，形成 “头像在上、用户名在下” 的垂直居中布局*/
 .username{
-	text-align: center;
-	margin-top: 20px;
-	font-size: 1.7rem;
+    text-align: center; /* 文本水平居中（与头像对齐，保持布局一致性） */
+    margin-top: 20px; /* 顶部外边距20px，与上方头像保持距离，避免拥挤 */
+    font-size: 1.7rem;/* 字体大小1.7rem（相对单位，适配不同屏幕） */
 }
 
 .glyphicon{
-	margin-right: 0;
+    margin-right: 0;/* 清除图标图标右侧的默认外边距（重置为0） */
 }
-
+/*定义数据项的通用样式。通过缩进、行高、底部边框等属性，实现数据项的整齐排列和分隔，提升信息展示的条理性。*/
 .fdata {
-    padding-left: 2%;
-    width: 100%;
-    margin: 0 auto;
-    line-height: 3.2;
-    border-bottom: 2px solid #e6e6e6;
-    overflow: hidden;
-    float: left;
+    padding-left: 2%;/* 左侧内边距2%（相对父容器宽度），让内容向右缩进一点，避免贴边 */
+    width: 100%;/* 宽度100%，占满父容器 */
+    margin: 0 auto;/* 水平居中（在父容器内居中显示） */
+    line-height: 3.2;/* 行高3.2倍（控制文本垂直居中，增强可读性） */
+    border-bottom: 2px solid #e6e6e6;/* 底部2px实线边框，颜色为浅灰色（#e6e6e6），用于分隔数据项 */
+    overflow: hidden;/* 超出容器的内容隐藏（避免内容溢出破坏布局） */
+    float: left;/* 左浮动，让多个数据项横向排列（或在父容器内靠左对齐） */
 }
 
 .alterinfo{
-	margin-bottom: 20px !important;
+    margin-bottom: 20px !important;/* 底部外边距20px，且通过!important强制覆盖其他样式，确保与下方元素的间距 */
 }
\ No newline at end of file