|
|
|
|
@ -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;/* 悬停时文字保持白色 */
|
|
|
|
|
}
|