p76jblgzq
/
test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css注释

Browse Source
main
CFF 4 months ago
parent 0c81b1d8e6
commit 43724ea79e
2 changed files with 69 additions and 68 deletions
Show Stats Download Patch File Download Diff File

93
src/main/resources/static/css/myCenter.css
Unescape View File

@ -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，确保内容区有足够高度 */
}

44
src/main/resources/static/css/pages.css
Unescape View File

@ -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强制覆盖其他样式，确保与下方元素的间距 */
}
Write Preview
Loading…
Cancel
Save