diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css index c73e9e5..322f236 100644 --- a/src/main/resources/static/css/footer.css +++ b/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,清除段落默认的底部间距 */ } \ No newline at end of file diff --git a/src/main/resources/static/css/index.css b/src/main/resources/static/css/index.css index f3b6e8c..8cb61fe 100644 --- a/src/main/resources/static/css/index.css +++ b/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;/* 悬停时文字保持白色 */ } \ No newline at end of file