SDMS/web/css/usersLogin.css

/* 全局样式：去除所有元素的外边距和内边距 */
*{
    margin: 0; /* 去除外边距 */
    padding: 0; /* 去除内边距 */
}

/* .header样式：设置页头背景图、宽度和高度 */
.header{
    background: url("../images/bti.jpg") no-repeat; /* 背景图，且不重复 */
    width: 100%; /* 宽度为100% */
    height: 200px; /* 高度为200px */
}

/* .body样式：设置页面主体背景图，宽度、高度和上边距 */
.body{
    background: url("../images/timg-1.jpg"); /* 背景图 */
    width: 100%; /* 宽度为100% */
    height: 650px; /* 高度为650px */
    margin-top: -100px; /* 设置上边距为负值，向上偏移100px */
}

/* .panel样式：设置面板的宽度、高度、位置、背景和边框 */
.panel{
    width: 350px; /* 宽度为350px */
    height: 420px; /* 高度为420px */
    position: relative; /* 相对定位，用于后续定位子元素 */
    left: 800px; /* 左边距为800px，将面板向右移动 */
    top: 60px; /* 上边距为60px，将面板向下移动 */
    background-color: #FFFFFF; /* 背景色为白色 */
    border: 1px solid #dff0d8; /* 边框为1px实线，颜色为淡绿色 */
}

/* .top样式：设置面板顶部部分的高度和边框 */
.top{
    height: 60px; /* 高度为60px */
    border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线，颜色为淡绿色 */
}

/* .top p样式：设置标题文本的对齐方式、字体大小、颜色和内边距 */
.top>p{
    text-align: center; /* 文本居中对齐 */
    padding-top: 15px; /* 顶部内边距为15px */
    /*margin: 20px 0;*/ /* 注释掉的代码，可能用于调整上下边距 */
    font-size: 25px; /* 字体大小为25px */
    color: #f57421; /* 字体颜色为橙色 */
}

/* .middle样式：设置面板中间部分的高度、边距和底部边框 */
.middle{
    position: relative; /* 相对定位，用于定位子元素 */
    height: 290px; /* 高度为290px */
    margin: 10px 0; /* 上下边距为10px */
    /*background-color: red;*/ /* 注释掉的代码，可能用于调试背景色 */
    border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线，颜色为淡绿色 */
}

/* .middle > form > input样式：设置输入框的高度、宽度、边距和边框 */
.middle>form>input{
    height: 40px; /* 高度为40px */
    width: 290px; /* 宽度为290px */
    margin: 20px 30px; /* 上下边距为20px，左右边距为30px */
    border: 1px solid #e0e0e0; /* 边框为1px实线，颜色为浅灰色 */
}

/* .middle > form > input:last-child样式：设置最后一个输入框的背景色、字体大小和字体颜色 */
.middle>form>input:last-child{
    background-color: #f57421; /* 背景色为橙色 */
    font-size: 18px; /* 字体大小为18px */
    color: #FFFFFF; /* 字体颜色为白色 */
}

/* .middle > form > input:last-child:hover样式：设置最后一个输入框鼠标悬停时的效果 */
.middle>form>input:last-child:hover{
    background-color: #f57421; /* 背景色保持为橙色 */
    opacity: 0.7; /* 透明度为0.7 */
    cursor: pointer; /* 鼠标指针变为手型 */
    font-size: 18px; /* 字体大小保持为18px */
}

/* .middle > form > .s1样式：设置第一个图标的大小、位置和背景图 */
.middle>form>.s1{
    height: 40px; /* 高度为40px */
    width: 40px; /* 宽度为40px */
    position: absolute; /* 绝对定位 */
    left: 35px; /* 距离左侧35px */
    top: 40px; /* 距离顶部40px */
    background: url("../images/J1.PNG") no-repeat; /* 背景图 */
}

/* .middle > form > .s2样式：设置第二个图标的大小、位置和背景图 */
.middle>form>.s2{
    height: 40px; /* 高度为40px */
    width: 40px; /* 宽度为40px */
    position: absolute; /* 绝对定位 */
    left: 35px; /* 距离左侧35px */
    top: 120px; /* 距离顶部120px */
    background: url("../images/J2.PNG") no-repeat; /* 背景图 */
}

/* .middle > form > .erro样式：设置错误提示文本的颜色、字体大小和左边距 */
.middle>form>.erro{
    color: red; /* 文本颜色为红色 */
    font-size: 14px; /* 字体大小为14px */
    margin-left: 10px; /* 左边距为10px */
}

/* .tail > a样式：设置尾部链接的浮动、字体大小、内边距和颜色 */
.tail>a{
    float: right; /* 右浮动，使链接靠右显示 */
    font-size: 12px; /* 字体大小为12px */
    padding: 10px; /* 内边距为10px */
    text-decoration: none; /* 去除文本装饰 */
    color: black; /* 字体颜色为黑色 */
}

/* .tail > a:hover样式：设置链接鼠标悬停时的颜色变化 */
.tail>a:hover{
    color: red; /* 鼠标悬停时，字体颜色变为红色 */
}

/* .middle > form > .iputs:hover样式：设置输入框悬停时的边框颜色变化 */
.middle>form>.iputs:hover{
    border: 1px solid red; /* 鼠标悬停时，输入框边框颜色变为红色 */
}

/* .footer样式：设置页脚的上边距 */
.footer{
    margin-top: 20px; /* 上边距为20px */
}

/* .footer > span样式：设置页脚文本的字体大小、位置和左边距 */
.footer>span{
    font-size: 15px; /* 字体大小为15px */
    position: relative; /* 相对定位，用于精确调整位置 */
    left: 45%; /* 左边距为45%，使其水平居中 */
}