|
|
@ -1,66 +1,466 @@
|
|
|
|
@charset "utf-8";
|
|
|
|
@charset "utf-8"; /* 指定字符编码为 UTF-8 */
|
|
|
|
/* CSS Document */
|
|
|
|
|
|
|
|
*{font-size:9pt;border:0;margin:0;padding:0;}
|
|
|
|
|
|
|
|
body{font-family:'微软雅黑'; margin:0 auto;min-width:980px;}
|
|
|
|
|
|
|
|
ul{display:block;margin:0;padding:0;list-style:none;}
|
|
|
|
|
|
|
|
li{display:block;margin:0;padding:0;list-style: none;}
|
|
|
|
|
|
|
|
img{border:0;}
|
|
|
|
|
|
|
|
dl,dt,dd,span{margin:0;padding:0;display:block;}
|
|
|
|
|
|
|
|
a,a:focus{text-decoration:none;color:#000;outline:none;blr:expression(this.onFocus=this.blur());}
|
|
|
|
|
|
|
|
a:hover{color:#00a4ac;text-decoration:none;}
|
|
|
|
|
|
|
|
table{border-collapse:collapse;border-spacing: 0;}
|
|
|
|
|
|
|
|
cite{font-style:normal;}
|
|
|
|
|
|
|
|
h2{font-weight:normal;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*cloud*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#mainBody {width:100%;height:100%;position:absolute;z-index:-1;}
|
|
|
|
|
|
|
|
.cloud {position:absolute;top:0px;left:0px;width:100%;height:100%;background:url(../images/cloud.png) no-repeat;z-index:1;opacity:0.5;}
|
|
|
|
|
|
|
|
#cloud2 {z-index:2;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*login*/
|
|
|
|
|
|
|
|
.logintop{height:47px; position:absolute; top:0; background:url(../images/loginbg1.png) repeat-x;z-index:100; width:100%;}
|
|
|
|
|
|
|
|
.logintop span{color:#fff; line-height:47px; background:url(../images/loginsj.png) no-repeat 21px 18px; text-indent:44px; color:#afc5d2; float:left;}
|
|
|
|
|
|
|
|
.logintop ul{float:right; padding-right:30px;}
|
|
|
|
|
|
|
|
.logintop ul li{float:left; margin-left:20px; line-height:47px;}
|
|
|
|
|
|
|
|
.logintop ul li a{color:#afc5d2;}
|
|
|
|
|
|
|
|
.logintop ul li a:hover{color:#fff;}
|
|
|
|
|
|
|
|
.loginbody{background:url(../images/loginbg3.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
|
|
|
|
|
|
|
|
.systemlogo{background:url(../images/loginlogo.png) no-repeat center;width:100%; height:71px; margin-top:75px;}
|
|
|
|
|
|
|
|
.loginbox{width:692px; height:336px; background:url(../images/logininfo.png) no-repeat; margin-top:30px;}
|
|
|
|
|
|
|
|
.loginbox ul{margin-top:88px; margin-left:285px;}
|
|
|
|
|
|
|
|
.loginbox ul li{margin-bottom:25px;}
|
|
|
|
|
|
|
|
.loginbox ul li label{color:#687f92; padding-left:25px;}
|
|
|
|
|
|
|
|
.loginbox ul li label a{color:#687f92;}
|
|
|
|
|
|
|
|
.loginbox ul li label a:hover{color:#3d96c9;}
|
|
|
|
|
|
|
|
.loginbox ul li label input{margin-right:5px;}
|
|
|
|
|
|
|
|
.loginbox,.loginbox1,.loginbox2,.loginbox3,.loginbox4{width:692px; height:373px;margin-top:30px;}
|
|
|
|
|
|
|
|
.loginuser{width:299px; height:48px; background:url(../images/loginuser.png) no-repeat; border:none; line-height:48px; padding-left:44px; font-size:14px; font-weight:bold;}
|
|
|
|
|
|
|
|
.loginpwd{width:299px; height:48px; background:url(../images/loginpassword.png) no-repeat; border:none;line-height:48px; padding-left:44px; font-size:14px; color:#90a2bc;}
|
|
|
|
|
|
|
|
.loginbtn{width:111px;height:35px; background:url(../images/buttonbg.png) repeat-x; font-size:14px; font-weight:bold; color:#fff;cursor:pointer; line-height:35px;}
|
|
|
|
|
|
|
|
.loginbm{height:50px; line-height:50px; text-align:center; background:url(../images/loginbg2.png) repeat-x;position:absolute; bottom:0; width:100%; color:#0b3a58;}
|
|
|
|
|
|
|
|
.loginbm a{font-weight:bold;color:#0b3a58;}
|
|
|
|
|
|
|
|
.loginbm a:hover{color:#fff;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox1{background:url(../images/logininfo1.png) no-repeat;}
|
|
|
|
|
|
|
|
.loginbox1 ul li{margin-bottom:16px;}
|
|
|
|
|
|
|
|
.loginbox2{background:url(../images/logininfo2.png) no-repeat;}
|
|
|
|
|
|
|
|
.loginbox2 ul li{margin-bottom:16px;}
|
|
|
|
|
|
|
|
.loginbox3{background:url(../images/logininfo3.png) no-repeat;}
|
|
|
|
|
|
|
|
.loginbox3 ul li{margin-bottom:16px;}
|
|
|
|
|
|
|
|
.yzm{width:341px; height:46px; background:url(../images/yzmbg.png) no-repeat; padding-bottom:5px;}
|
|
|
|
|
|
|
|
.yzm span{display:block; float:left;width:227px; height:46px;}
|
|
|
|
|
|
|
|
.yzm span input{background:none; border:none; width:183px; height:46px; line-height:46px;padding-left:44px;font-size:14px; color:#cee4f1;}
|
|
|
|
|
|
|
|
.yzm cite{float:right; width:114px; height:46px; line-height:46px; font-size:18px; color:#fff; text-align:center;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbody1{background:url(../images/loginbg4.png) no-repeat center center; width:100%; height:585px; overflow:hidden; position:absolute; top:47px;}
|
|
|
|
|
|
|
|
.systemlogo{width:100%; height:71px; margin-top:120px; text-align:center;}
|
|
|
|
|
|
|
|
.loginbox0{width:810px;margin-top:0px;height:252px;}
|
|
|
|
|
|
|
|
.loginlist{width:810px; overflow:hidden;}
|
|
|
|
|
|
|
|
.loginlist{margin-top:110px;}
|
|
|
|
|
|
|
|
.loginlist li{float:left; margin-left:3px; margin-right:3px;}
|
|
|
|
|
|
|
|
.loginlist li a{ display:block;width:196px; height:252px; background:url(../images/lbg.png) no-repeat; text-align:center; padding-top:25px; cursor:pointer;}
|
|
|
|
|
|
|
|
.loginlist li a:hover{background:url(../images/lbg1.png) no-repeat;}
|
|
|
|
|
|
|
|
.loginlist li a p{font-size:16px; color:#fff; padding-top:10px;}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 通用样式 */
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
|
|
|
font-size: 9pt; /* 设置所有元素的字体大小为9pt */
|
|
|
|
|
|
|
|
border: 0; /* 去掉所有元素的边框 */
|
|
|
|
|
|
|
|
margin: 0; /* 去掉所有元素的外边距 */
|
|
|
|
|
|
|
|
padding: 0; /* 去掉所有元素的内边距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
|
|
font-family: '微软雅黑'; /* 设置body的字体为微软雅黑 */
|
|
|
|
|
|
|
|
margin: 0 auto; /* 将body的外边距设置为自动,从而实现水平居中 */
|
|
|
|
|
|
|
|
min-width: 980px; /* 设置body的最小宽度为980px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ul {
|
|
|
|
|
|
|
|
display: block; /* 将ul设置为块级元素 */
|
|
|
|
|
|
|
|
margin: 0; /* 去掉ul的外边距 */
|
|
|
|
|
|
|
|
padding: 0; /* 去掉ul的内边距 */
|
|
|
|
|
|
|
|
list-style: none; /* 去掉ul的默认列表样式(无点的列表) */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
li {
|
|
|
|
|
|
|
|
display: block; /* 将li设置为块级元素 */
|
|
|
|
|
|
|
|
margin: 0; /* 去掉li的外边距 */
|
|
|
|
|
|
|
|
padding: 0; /* 去掉li的内边距 */
|
|
|
|
|
|
|
|
list-style: none; /* 去掉li的默认列表样式 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
|
|
|
border: 0; /* 去掉图片的边框 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
dl, dt, dd, span {
|
|
|
|
|
|
|
|
margin: 0; /* 去掉dl, dt, dd, span的外边距 */
|
|
|
|
|
|
|
|
padding: 0; /* 去掉dl, dt, dd, span的内边距 */
|
|
|
|
|
|
|
|
display: block; /* 将这些元素设置为块级元素 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a, a:focus {
|
|
|
|
|
|
|
|
text-decoration: none; /* 去掉链接的下划线 */
|
|
|
|
|
|
|
|
color: #000; /* 设置链接的文字颜色为黑色 */
|
|
|
|
|
|
|
|
outline: none; /* 去掉链接的聚焦时轮廓 */
|
|
|
|
|
|
|
|
blr: expression(this.onFocus=this.blur()); /* 兼容IE去掉聚焦时的蓝色框(已废弃,建议不再使用) */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
|
|
color: #00a4ac; /* 设置鼠标悬停时,链接的文字颜色为 #00a4ac(浅蓝色) */
|
|
|
|
|
|
|
|
text-decoration: none; /* 鼠标悬停时去掉链接的下划线 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
|
|
|
border-collapse: collapse; /* 设置表格的边框合并为一个单一的边框 */
|
|
|
|
|
|
|
|
border-spacing: 0; /* 去掉表格单元格之间的间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
cite {
|
|
|
|
|
|
|
|
font-style: normal; /* 取消cite标签的斜体样式 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
|
|
|
font-weight: normal; /* 设置h2标题的字体粗细为正常 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 背景云朵部分样式 */
|
|
|
|
|
|
|
|
#mainBody {
|
|
|
|
|
|
|
|
width: 100%; /* 设置#mainBody的宽度为100% */
|
|
|
|
|
|
|
|
height: 100%; /* 设置#mainBody的高度为100% */
|
|
|
|
|
|
|
|
position: absolute; /* 设置#mainBody为绝对定位 */
|
|
|
|
|
|
|
|
z-index: -1; /* 设置#mainBody的z-index为-1,确保它在页面其他内容的下面 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.cloud {
|
|
|
|
|
|
|
|
position: absolute; /* 设置.cloud为绝对定位 */
|
|
|
|
|
|
|
|
top: 0px; /* 设置.cloud的顶部距离为0 */
|
|
|
|
|
|
|
|
left: 0px; /* 设置.cloud的左侧距离为0 */
|
|
|
|
|
|
|
|
width: 100%; /* 设置.cloud的宽度为100% */
|
|
|
|
|
|
|
|
height: 100%; /* 设置.cloud的高度为100% */
|
|
|
|
|
|
|
|
background: url(../images/cloud.png) no-repeat; /* 设置背景图为云朵图片,不重复显示 */
|
|
|
|
|
|
|
|
z-index: 1; /* 设置.cloud的z-index为1,确保它在#mainBody之上 */
|
|
|
|
|
|
|
|
opacity: 0.5; /* 设置.cloud的透明度为0.5 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
#cloud2 {
|
|
|
|
|
|
|
|
z-index: 2; /* 设置#cloud2的z-index为2,确保它在.cloud元素之上 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 顶部登录栏 */
|
|
|
|
|
|
|
|
.logintop {
|
|
|
|
|
|
|
|
height: 47px; /* 设置顶部条的高度为47px */
|
|
|
|
|
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
|
|
|
|
|
top: 0; /* 距离顶部为0,固定在页面顶端 */
|
|
|
|
|
|
|
|
background: url(../images/loginbg1.png) repeat-x; /* 背景图片,横向平铺 */
|
|
|
|
|
|
|
|
z-index: 100; /* 层级较高,确保其位于其他内容上面 */
|
|
|
|
|
|
|
|
width: 100%; /* 宽度为100%,覆盖整个页面宽度 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录栏中的文字样式 */
|
|
|
|
|
|
|
|
.logintop span {
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
line-height: 47px; /* 行高为47px,使文字垂直居中 */
|
|
|
|
|
|
|
|
background: url(../images/loginsj.png) no-repeat 21px 18px; /* 设置背景图片,调整位置 */
|
|
|
|
|
|
|
|
text-indent: 44px; /* 文字缩进,避免文字与图片重叠 */
|
|
|
|
|
|
|
|
color: #afc5d2; /* 文字颜色 */
|
|
|
|
|
|
|
|
float: left; /* 向左浮动 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录栏右侧的导航链接样式 */
|
|
|
|
|
|
|
|
.logintop ul {
|
|
|
|
|
|
|
|
float: right; /* 向右浮动 */
|
|
|
|
|
|
|
|
padding-right: 30px; /* 右侧内边距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航链接列表项的样式 */
|
|
|
|
|
|
|
|
.logintop ul li {
|
|
|
|
|
|
|
|
float: left; /* 向左浮动 */
|
|
|
|
|
|
|
|
margin-left: 20px; /* 左侧间距 */
|
|
|
|
|
|
|
|
line-height: 47px; /* 行高为47px,确保与顶部对齐 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航链接的样式 */
|
|
|
|
|
|
|
|
.logintop ul li a {
|
|
|
|
|
|
|
|
color: #afc5d2; /* 设置链接文字颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 导航链接鼠标悬停时的样式 */
|
|
|
|
|
|
|
|
.logintop ul li a:hover {
|
|
|
|
|
|
|
|
color: #fff; /* 悬停时文字颜色变为白色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录页面主体样式 */
|
|
|
|
|
|
|
|
.loginbody {
|
|
|
|
|
|
|
|
background: url(../images/loginbg3.png) no-repeat center center; /* 设置背景图片,并且居中显示 */
|
|
|
|
|
|
|
|
width: 100%; /* 宽度为100% */
|
|
|
|
|
|
|
|
height: 585px; /* 高度为585px */
|
|
|
|
|
|
|
|
overflow: hidden; /* 隐藏超出的内容 */
|
|
|
|
|
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
|
|
|
|
|
top: 47px; /* 距离顶部47px,避免与顶部导航栏重叠 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 系统logo的样式 */
|
|
|
|
|
|
|
|
.systemlogo {
|
|
|
|
|
|
|
|
background: url(../images/loginlogo.png) no-repeat center; /* 设置logo背景,居中显示 */
|
|
|
|
|
|
|
|
width: 100%; /* 宽度为100% */
|
|
|
|
|
|
|
|
height: 71px; /* 高度为71px */
|
|
|
|
|
|
|
|
margin-top: 75px; /* 上边距为75px,调整位置 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录框的基本样式 */
|
|
|
|
|
|
|
|
.loginbox {
|
|
|
|
|
|
|
|
width: 692px; /* 宽度为692px */
|
|
|
|
|
|
|
|
height: 336px; /* 高度为336px */
|
|
|
|
|
|
|
|
background: url(../images/logininfo.png) no-repeat; /* 设置背景图片 */
|
|
|
|
|
|
|
|
margin-top: 30px; /* 上边距为30px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录框内表单内容的样式 */
|
|
|
|
|
|
|
|
.loginbox ul {
|
|
|
|
|
|
|
|
margin-top: 88px; /* 上边距为88px */
|
|
|
|
|
|
|
|
margin-left: 285px; /* 左边距为285px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 表单项的样式 */
|
|
|
|
|
|
|
|
.loginbox ul li {
|
|
|
|
|
|
|
|
margin-bottom: 25px; /* 每个表单项之间的底部间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 表单项标签的样式 */
|
|
|
|
|
|
|
|
.loginbox ul li label {
|
|
|
|
|
|
|
|
color: #687f92; /* 标签文字颜色 */
|
|
|
|
|
|
|
|
padding-left: 25px; /* 左内边距25px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 标签链接的样式 */
|
|
|
|
|
|
|
|
.loginbox ul li label a {
|
|
|
|
|
|
|
|
color: #687f92; /* 设置链接文字颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 标签链接的悬停样式 */
|
|
|
|
|
|
|
|
.loginbox ul li label a:hover {
|
|
|
|
|
|
|
|
color: #3d96c9; /* 悬停时文字颜色变为蓝色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 输入框的样式 */
|
|
|
|
|
|
|
|
.loginbox ul li label input {
|
|
|
|
|
|
|
|
margin-right: 5px; /* 输入框右侧的间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 其他登录框的样式(不同背景图片) */
|
|
|
|
|
|
|
|
.loginbox,.loginbox1,.loginbox2,.loginbox3,.loginbox4 {
|
|
|
|
|
|
|
|
width: 692px; /* 宽度为692px */
|
|
|
|
|
|
|
|
height: 373px; /* 高度为373px */
|
|
|
|
|
|
|
|
margin-top: 30px; /* 上边距为30px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 用户名输入框的样式 */
|
|
|
|
|
|
|
|
.loginuser {
|
|
|
|
|
|
|
|
width: 299px; /* 宽度为299px */
|
|
|
|
|
|
|
|
height: 48px; /* 高度为48px */
|
|
|
|
|
|
|
|
background: url(../images/loginuser.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
border: none; /* 无边框 */
|
|
|
|
|
|
|
|
line-height: 48px; /* 行高与高度相同,保证文字垂直居中 */
|
|
|
|
|
|
|
|
padding-left: 44px; /* 左内边距44px */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 密码输入框的样式 */
|
|
|
|
|
|
|
|
.loginpwd {
|
|
|
|
|
|
|
|
width: 299px; /* 宽度为299px */
|
|
|
|
|
|
|
|
height: 48px; /* 高度为48px */
|
|
|
|
|
|
|
|
background: url(../images/loginpassword.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
border: none; /* 无边框 */
|
|
|
|
|
|
|
|
line-height: 48px; /* 行高与高度相同,保证文字垂直居中 */
|
|
|
|
|
|
|
|
padding-left: 44px; /* 左内边距44px */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
color: #90a2bc; /* 字体颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 登录按钮的样式 */
|
|
|
|
|
|
|
|
.loginbtn {
|
|
|
|
|
|
|
|
width: 111px; /* 宽度为111px */
|
|
|
|
|
|
|
|
height: 35px; /* 高度为35px */
|
|
|
|
|
|
|
|
background: url(../images/buttonbg.png) repeat-x; /* 按钮背景图横向平铺 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
|
|
|
color: #fff; /* 字体颜色为白色 */
|
|
|
|
|
|
|
|
cursor: pointer; /* 鼠标指针变为点击状态 */
|
|
|
|
|
|
|
|
line-height: 35px; /* 行高与高度相同,确保文字垂直居中 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 底部版权栏的样式 */
|
|
|
|
|
|
|
|
.loginbm {
|
|
|
|
|
|
|
|
height: 50px; /* 高度为50px */
|
|
|
|
|
|
|
|
line-height: 50px; /* 行高为50px,确保文字垂直居中 */
|
|
|
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
|
|
|
background: url(../images/loginbg2.png) repeat-x; /* 底部背景图横向平铺 */
|
|
|
|
|
|
|
|
position: absolute; /* 使用绝对定位 */
|
|
|
|
|
|
|
|
bottom: 0; /* 固定在底部 */
|
|
|
|
|
|
|
|
width: 100%; /* 宽度为100% */
|
|
|
|
|
|
|
|
color: #0b3a58; /* 文字颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 底部链接的样式 */
|
|
|
|
|
|
|
|
.loginbm a {
|
|
|
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
|
|
|
color: #0b3a58; /* 链接颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 底部链接的悬停样式 */
|
|
|
|
|
|
|
|
.loginbm a:hover {
|
|
|
|
|
|
|
|
color: #fff; /* 悬停时链接颜色变为白色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 其他登录框(不同背景) */
|
|
|
|
|
|
|
|
.loginbox1 {
|
|
|
|
|
|
|
|
background: url(../images/logininfo1.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox1 ul li {
|
|
|
|
|
|
|
|
margin-bottom: 16px; /* 每个表单项之间的底部间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox2 {
|
|
|
|
|
|
|
|
background: url(../images/logininfo2.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox2 ul li {
|
|
|
|
|
|
|
|
margin-bottom: 16px; /* 每个表单项之间的底部间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox3 {
|
|
|
|
|
|
|
|
background: url(../images/logininfo3.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.loginbox3 ul li {
|
|
|
|
|
|
|
|
margin-bottom: 16px; /* 每个表单项之间的底部间距 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证码输入框的样式 */
|
|
|
|
|
|
|
|
.yzm {
|
|
|
|
|
|
|
|
width: 341px; /* 宽度为341px */
|
|
|
|
|
|
|
|
height: 46px; /* 高度为46px */
|
|
|
|
|
|
|
|
background: url(../images/yzmbg.png) no-repeat; /* 背景图 */
|
|
|
|
|
|
|
|
padding-bottom: 5px; /* 底部内边距5px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证码输入框的文本框样式 */
|
|
|
|
|
|
|
|
.yzm span {
|
|
|
|
|
|
|
|
display: block; /* 块级元素 */
|
|
|
|
|
|
|
|
float: left; /* 向左浮动 */
|
|
|
|
|
|
|
|
width: 227px; /* 宽度为227px */
|
|
|
|
|
|
|
|
height: 46px; /* 高度为46px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证码输入框的文本框输入样式 */
|
|
|
|
|
|
|
|
.yzm span input {
|
|
|
|
|
|
|
|
background: none; /* 背景为透明 */
|
|
|
|
|
|
|
|
border: none; /* 无边框 */
|
|
|
|
|
|
|
|
width: 227px; /* 宽度为227px */
|
|
|
|
|
|
|
|
height: 46px; /* 高度为46px */
|
|
|
|
|
|
|
|
line-height: 46px; /* 行高与高度相同,确保文字垂直居中 */
|
|
|
|
|
|
|
|
font-size: 16px; /* 字体大小为16px */
|
|
|
|
|
|
|
|
color: #afc5d2; /* 文字颜色 */
|
|
|
|
|
|
|
|
padding-left: 10px; /* 左内边距10px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证码图像的样式 */
|
|
|
|
|
|
|
|
.yzm img {
|
|
|
|
|
|
|
|
float: left; /* 图像向左浮动 */
|
|
|
|
|
|
|
|
margin-left: 10px; /* 左侧间距10px */
|
|
|
|
|
|
|
|
width: 85px; /* 图像宽度为85px */
|
|
|
|
|
|
|
|
height: 46px; /* 图像高度为46px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 验证码刷新按钮的样式 */
|
|
|
|
|
|
|
|
.yzm a {
|
|
|
|
|
|
|
|
display: block; /* 设置为块级元素 */
|
|
|
|
|
|
|
|
width: 85px; /* 宽度为85px */
|
|
|
|
|
|
|
|
height: 46px; /* 高度为46px */
|
|
|
|
|
|
|
|
background: url(../images/yzmrefresh.png) no-repeat center; /* 背景图居中 */
|
|
|
|
|
|
|
|
cursor: pointer; /* 鼠标指针变为点击状态 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 提交按钮的样式 */
|
|
|
|
|
|
|
|
.submitbtn {
|
|
|
|
|
|
|
|
width: 300px; /* 宽度为300px */
|
|
|
|
|
|
|
|
height: 40px; /* 高度为40px */
|
|
|
|
|
|
|
|
background: #3d96c9; /* 背景色为蓝色 */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 16px; /* 字体大小为16px */
|
|
|
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
|
|
|
text-align: center; /* 文字居中对齐 */
|
|
|
|
|
|
|
|
line-height: 40px; /* 行高为40px,确保文字垂直居中 */
|
|
|
|
|
|
|
|
border: none; /* 无边框 */
|
|
|
|
|
|
|
|
cursor: pointer; /* 鼠标指针变为点击状态 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 提交按钮的悬停效果 */
|
|
|
|
|
|
|
|
.submitbtn:hover {
|
|
|
|
|
|
|
|
background: #2a7da6; /* 悬停时背景色变为更深的蓝色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 错误提示消息的样式 */
|
|
|
|
|
|
|
|
.error-msg {
|
|
|
|
|
|
|
|
color: #e74c3c; /* 错误信息颜色为红色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
margin-top: 10px; /* 上边距为10px */
|
|
|
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 成功提示消息的样式 */
|
|
|
|
|
|
|
|
.success-msg {
|
|
|
|
|
|
|
|
color: #2ecc71; /* 成功信息颜色为绿色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
margin-top: 10px; /* 上边距为10px */
|
|
|
|
|
|
|
|
text-align: center; /* 文本居中对齐 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 错误信息框的样式 */
|
|
|
|
|
|
|
|
.error-box {
|
|
|
|
|
|
|
|
background: url(../images/errorbox.png) no-repeat; /* 背景为错误框的图像 */
|
|
|
|
|
|
|
|
width: 350px; /* 宽度为350px */
|
|
|
|
|
|
|
|
height: 120px; /* 高度为120px */
|
|
|
|
|
|
|
|
margin: 20px auto; /* 上下边距为20px,水平居中 */
|
|
|
|
|
|
|
|
padding: 15px; /* 内边距为15px */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 错误框内的关闭按钮样式 */
|
|
|
|
|
|
|
|
.error-box .close-btn {
|
|
|
|
|
|
|
|
float: right; /* 右浮动 */
|
|
|
|
|
|
|
|
background: url(../images/close.png) no-repeat center; /* 关闭按钮的背景图 */
|
|
|
|
|
|
|
|
width: 20px; /* 宽度为20px */
|
|
|
|
|
|
|
|
height: 20px; /* 高度为20px */
|
|
|
|
|
|
|
|
cursor: pointer; /* 鼠标指针变为点击状态 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 错误框内的错误信息样式 */
|
|
|
|
|
|
|
|
.error-box .error-info {
|
|
|
|
|
|
|
|
margin-top: 10px; /* 上边距为10px */
|
|
|
|
|
|
|
|
font-size: 16px; /* 字体大小为16px */
|
|
|
|
|
|
|
|
color: #ff0000; /* 错误信息为红色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 成功框的样式 */
|
|
|
|
|
|
|
|
.success-box {
|
|
|
|
|
|
|
|
background: url(../images/successbox.png) no-repeat; /* 背景为成功框的图像 */
|
|
|
|
|
|
|
|
width: 350px; /* 宽度为350px */
|
|
|
|
|
|
|
|
height: 120px; /* 高度为120px */
|
|
|
|
|
|
|
|
margin: 20px auto; /* 上下边距为20px,水平居中 */
|
|
|
|
|
|
|
|
padding: 15px; /* 内边距为15px */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 成功框内的成功信息样式 */
|
|
|
|
|
|
|
|
.success-box .success-info {
|
|
|
|
|
|
|
|
margin-top: 10px; /* 上边距为10px */
|
|
|
|
|
|
|
|
font-size: 16px; /* 字体大小为16px */
|
|
|
|
|
|
|
|
color: #2ecc71; /* 成功信息为绿色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 取消按钮的样式 */
|
|
|
|
|
|
|
|
.cancel-btn {
|
|
|
|
|
|
|
|
width: 300px; /* 宽度为300px */
|
|
|
|
|
|
|
|
height: 40px; /* 高度为40px */
|
|
|
|
|
|
|
|
background: #e74c3c; /* 背景色为红色 */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 16px; /* 字体大小为16px */
|
|
|
|
|
|
|
|
font-weight: bold; /* 字体加粗 */
|
|
|
|
|
|
|
|
text-align: center; /* 文字居中对齐 */
|
|
|
|
|
|
|
|
line-height: 40px; /* 行高为40px,确保文字垂直居中 */
|
|
|
|
|
|
|
|
border: none; /* 无边框 */
|
|
|
|
|
|
|
|
cursor: pointer; /* 鼠标指针变为点击状态 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 取消按钮的悬停效果 */
|
|
|
|
|
|
|
|
.cancel-btn:hover {
|
|
|
|
|
|
|
|
background: #c0392b; /* 悬停时背景色变为更深的红色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 隐藏的表单项 */
|
|
|
|
|
|
|
|
.hidden {
|
|
|
|
|
|
|
|
display: none; /* 隐藏该元素 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 表单项的标签样式 */
|
|
|
|
|
|
|
|
label {
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
color: #687f92; /* 标签文字颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 链接的样式 */
|
|
|
|
|
|
|
|
a {
|
|
|
|
|
|
|
|
text-decoration: none; /* 去掉链接下划线 */
|
|
|
|
|
|
|
|
color: #3d96c9; /* 链接颜色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 链接悬停时的样式 */
|
|
|
|
|
|
|
|
a:hover {
|
|
|
|
|
|
|
|
color: #2a7da6; /* 悬停时链接颜色变为深蓝色 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 警告框的样式 */
|
|
|
|
|
|
|
|
.alert-box {
|
|
|
|
|
|
|
|
background: #f39c12; /* 背景色为橙色 */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
padding: 15px; /* 内边距为15px */
|
|
|
|
|
|
|
|
margin: 20px 0; /* 上下边距为20px */
|
|
|
|
|
|
|
|
border-radius: 5px; /* 圆角边框 */
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* 提示框的样式 */
|
|
|
|
|
|
|
|
.tip-box {
|
|
|
|
|
|
|
|
background: #f1c40f; /* 背景色为黄色 */
|
|
|
|
|
|
|
|
color: #fff; /* 文字颜色为白色 */
|
|
|
|
|
|
|
|
font-size: 14px; /* 字体大小为14px */
|
|
|
|
|
|
|
|
padding: 15px; /* 内边距为15px */
|
|
|
|
|
|
|
|
margin: 20px 0; /* 上下边距为20px */
|
|
|
|
|
|
|
|
border-radius: 5px; /* 圆角边框 */
|
|
|
|
|
|
|
|
}
|
|
|
|