css注释

src/main/resources/static/css/footer.css

@@ -1,26 +1,26 @@
 
 .bs-docs-footer {
-    padding-top: 25px;
-    padding-bottom: 50px;
-    height: 12rem;
-    color: #99979c;
-    text-align: center;
-    background-color: rgba(0,0,0,.8);
+    padding-top: 25px;/* 顶部内边距：25px，控制内容与页脚顶部的距离 */
+    padding-bottom: 50px;/* 底部内边距：50px，控制内容与页脚底部的距离 */
+    height: 12rem;/* 固定高度：12rem（rem 是相对根元素字体大小的单位） */
+    color: #99979c;/* 文本颜色：浅灰色，用于页脚的普通文字 */
+    text-align: center; /* 文本居中对齐：页脚内所有内容水平居中 */
+    background-color: rgba(0,0,0,.8); /* 背景色：黑色半透明（透明度 80%） */
 }
 
 .bs-docs-footer-links {
-    padding-left: 0;
-    margin-bottom: 20px;
+    padding-left: 0; /* 左内边距：0，清除列表默认的左侧缩进 */
+    margin-bottom: 20px; /* 底部外边距：20px，控制链接列表与下方元素的距离 */
 }
 
 .bs-docs-footer-links li {
-    display: inline-block;
+    display: inline-block; /* 列表项改为行内块元素：让链接横向排列（默认列表项是块级元素，纵向排列） */
 }
 
 .bs-docs-footer a {
-    color: #fff;
+    color: #fff;/* 链接文字颜色：白色，与页脚普通文字（浅灰）区分开 */
 }
 
 .bs-docs-footer p {
-    margin-bottom: 0;
+    margin-bottom: 0;/* 段落底部外边距：0，清除段落默认的底部间距 */
 }

src/main/resources/static/css/index.css

@@ -1,95 +1,95 @@
 .navbar-default{
-	transition: all 0.6s;
-	background-color: rgba(0,0,0,.7);
-	border: 0;
-	border-radius: 0;
+    transition: all 0.6s;/* 所有所有样式变化添加过渡动画，持续 0.6s（如背景色、尺寸变化时平滑过渡） */
+    background-color: rgba(0,0,0,.7); /* 背景色：黑色半透明（透明度 70%） */
+    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 标签（可能通过其他方式展示表单说明，如占位符） */
 }
 
 .logindiv{
-	border: 1px solid white;
-	padding: 0rem 3.5rem;
-	height: 32rem;
-	background: rgba(255,255,255,.9);
-	position: relative;
-	margin-top: 5rem;
+    border: 1px solid white;/* 白色边框 */
+    padding: 0rem 3.5rem;/* 左右内边距 3.5rem，上下内边距 0 */
+    height: 32rem;/* 固定高度 32rem */
+    background: rgba(255,255,255,.9);/* 背景色：白色半透明（透明度 90%） */
+    position: relative; /* 相对定位，方便内部元素绝对定位 */
+    margin-top: 5rem;/* 顶部外边距 5rem，与上方元素拉开距离 */
 }
 
 .login-h{
-	border-bottom: 2px solid #337AB7;
-	text-align: center;
-	letter-spacing: 2.5px;
+    border-bottom: 2px solid #337AB7;/* 底部边框：2px 实线，蓝色（#337AB7 是 Bootstrap 主题蓝） */
+    text-align: center;/* 文本居中 */
+    letter-spacing: 2.5px;/* 字符间距 2.5px，增强标题感 */
 }
 
 .login-f{
-	padding-top: 2rem !important;
+    padding-top: 2rem !important;/* 顶部内边距 2rem（!important 强制覆盖默认样式） */
 }
 
 .forminput{
-	height: 4rem;
+    height: 4rem;/* 输入框高度 4rem，统一表单元素尺寸 */
 }
 
 .main{
-	background: url('../img/pexels-photo-545049.jpg') no-repeat;
-	background-repeat:no-repeat;
-    background-size: cover;
-	min-height: 40rem;
+    background: url('../img/pexels-photo-545049.jpg') no-repeat;/* 背景图：引用指定图片，不重复 */
+    background-repeat:no-repeat;/* 重复设置不重复（冗余保险） */
+    background-size: cover;/* 背景图自适应：覆盖整个容器，可能裁剪但保持比例 */
+    min-height: 40rem;/* 最小高度 40rem，确保内容区有足够高度 */
 }
 
 input[type="text"],
 input[type="password"]{
-	text-indent:2.3rem;
-	font-weight:normal;
-	color:black;
-	background:url('../img/login-sprite.png') no-repeat white;
-	background-position:3% 10%;
+    text-indent:2.3rem;/* 文本缩进 2.3rem，避免输入内容与左侧图标重叠 */
+    font-weight:normal;/* 字体常规粗细 */
+    color:black;/* 输入文本颜色为黑色 */
+    background:url('../img/login-sprite.png') no-repeat white;/* 背景：白色 + 引用精灵图（含多个图标） */
+    background-position:3% 10%;/* 精灵图位置：水平 3%，垂直 10%（显示用户名图标） */
 }
 
 input[type="password"]{
-	background-position:3% 90%;
+    background-position:3% 90%;  /* 密码框精灵图位置：水平 3%，垂直 90%（显示密码图标） */
 }
 
 .inputcode{
-	background-position:3% 90% !important;
+    background-position:3% 90% !important;/* 强制验证码输入框使用精灵图 90% 位置的图标（可能复用密码图标） */
 }
 
 .code{
-	height: 4rem;
-	width: 100%;
-	border:1px solid #3D86ED;
-	border-radius: 5px;
+    height: 4rem;/* 高度 4rem，与输入框保持一致 */
+    width: 100%;/* 宽度 100%，适应父容器 */
+    border:1px solid #3D86ED;/* 边框：1px 实线，浅蓝色 */
+    border-radius: 5px;/* 圆角 5px，柔和边框 */
 }
 
 .loginbtn{
-	background: #419FD8;
-	color: white;
+    background: #419FD8;/* 按钮背景色：浅蓝色 */
+    color: white;/* 按钮文字颜色：白色 */
 }
 
 .loginbtn:hover{
-	background: #5D89FA;
-	color: white;
+    background: #5D89FA;/* 鼠标悬停时背景色：更深的蓝色 */
+    color: white;/* 悬停时文字保持白色 */
 }