注释代码

zhaozhiyuan_branch
zhaozhiyuan 5 months ago
parent b616be0e4a
commit 10dab3ba50

@ -1,54 +1,73 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans" <!-- 声明 XML 文档的版本和编码格式 -->
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop" <beans xmlns="http://www.springframework.org/schema/beans" <!-- Spring Beans -->
xmlns:tx="http://www.springframework.org/schema/tx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" <!-- 定义 XML Schema 实例命名空间 -->
xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" <!-- 定义 AOP 命名空间 -->
xsi:schemaLocation="http://www.springframework.org/schema/beans xmlns:tx="http://www.springframework.org/schema/tx" <!-- 定义事务管理命名空间 -->
http://www.springframework.org/schema/beans/spring-beans-4.3.xsd xmlns:context="http://www.springframework.org/schema/context" <!-- 定义 Spring 上下文命名空间 -->
http://www.springframework.org/schema/tx xsi:schemaLocation="http://www.springframework.org/schema/beans <!-- 定义 XML Schema 文件位置 -->
http://www.springframework.org/schema/tx/spring-tx-4.3.xsd http://www.springframework.org/schema/beans/spring-beans-4.3.xsd <!-- Beans schema 的位置 -->
http://www.springframework.org/schema/context http://www.springframework.org/schema/tx <!-- 事务管理 schema 的位置 -->
http://www.springframework.org/schema/context/spring-context-4.3.xsd http://www.springframework.org/schema/tx/spring-tx-4.3.xsd <!-- 事务管理 schema 文件 -->
http://www.springframework.org/schema/aop http://www.springframework.org/schema/context <!-- 上下文配置 schema 的位置 -->
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd"> http://www.springframework.org/schema/context/spring-context-4.3.xsd <!-- 上下文配置 schema 文件 -->
<!-- 读取db.properties --> http://www.springframework.org/schema/aop <!-- AOP schema 的位置 -->
http://www.springframework.org/schema/aop/spring-aop-4.3.xsd"> <!-- AOP schema 文件 -->
<!-- 读取 db.properties 配置文件中的数据库相关信息 -->
<context:property-placeholder location="classpath:db.properties"/> <context:property-placeholder location="classpath:db.properties"/>
<!-- 配置数据源 -->
<bean id="dataSource" <!-- 配置数据源,使用 Apache DBCP2 数据源 -->
class="org.apache.commons.dbcp2.BasicDataSource"> <bean id="dataSource"
<!--数据库驱动 --> class="org.apache.commons.dbcp2.BasicDataSource">
<property name="driverClassName" value="${jdbc.driver}" />
<!--连接数据库的url --> <!-- 配置数据库连接驱动 -->
<property name="url" value="${jdbc.url}" /> <property name="driverClassName" value="${jdbc.driver}" />
<!--连接数据库的用户名 -->
<property name="username" value="${jdbc.username}" /> <!-- 配置数据库连接的 URL -->
<!--连接数据库的密码 --> <property name="url" value="${jdbc.url}" />
<property name="password" value="${jdbc.password}" />
<!--最大连接数 --> <!-- 配置数据库连接的用户名 -->
<property name="maxTotal" value="${jdbc.maxTotal}" /> <property name="username" value="${jdbc.username}" />
<!--最大空闲连接 -->
<property name="maxIdle" value="${jdbc.maxIdle}" /> <!-- 配置数据库连接的密码 -->
<!--初始化连接数 --> <property name="password" value="${jdbc.password}" />
<property name="initialSize" value="${jdbc.initialSize}" />
</bean> <!-- 配置最大连接数 -->
<!-- 事务管理器,依赖于数据源 --> <property name="maxTotal" value="${jdbc.maxTotal}" />
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<property name="dataSource" ref="dataSource" /> <!-- 配置最大空闲连接数 -->
</bean> <property name="maxIdle" value="${jdbc.maxIdle}" />
<!-- 开启事务注解 -->
<tx:annotation-driven transaction-manager="transactionManager"/> <!-- 配置初始化连接数 -->
<!-- 配置MyBatis工厂SqlSessionFactory --> <property name="initialSize" value="${jdbc.initialSize}" />
</bean>
<!-- 配置事务管理器,依赖于上面定义的数据源 -->
<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
<!-- 注入数据源到事务管理器 -->
<property name="dataSource" ref="dataSource" />
</bean>
<!-- 开启事务注解支持,指定事务管理器 -->
<tx:annotation-driven transaction-manager="transactionManager"/>
<!-- 配置 MyBatis 的 SqlSessionFactory负责创建数据库会话 -->
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean"> <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<!--注入数据源 --> <!-- 注入数据源到 SqlSessionFactory -->
<property name="dataSource" ref="dataSource" /> <property name="dataSource" ref="dataSource" />
<!--指定核MyBatis心配置文件位置 -->
<property name="configLocation" value="classpath:mybatis-config.xml" /> <!-- 配置 MyBatis 核心配置文件的位置 -->
<property name="configLocation" value="classpath:mybatis-config.xml" />
</bean>
<!-- 配置 MyBatis 的 Mapper 扫描器,用于自动扫描 DAO 接口 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<!-- 配置要扫描的包,扫描所有 Mapper 接口 -->
<property name="basePackage" value="com.itheima.dao"/>
</bean> </bean>
<!-- 配置mapper扫描器 -->
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer"> <!-- 扫描并加载 Service 层的 Bean -->
<property name="basePackage" value="com.itheima.dao"/>
</bean>
<!-- 扫描Service -->
<context:component-scan base-package="com.itheima.service" /> <context:component-scan base-package="com.itheima.service" />
</beans> </beans>

@ -1,9 +1,22 @@
<?xml version="1.0" encoding="UTF-8" ?> <?xml version="1.0" encoding="UTF-8" ?>
<!-- 定义 XML 文件的版本和编码格式,这里指定使用 UTF-8 编码。 -->
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd"> "http://mybatis.org/dtd/mybatis-3-config.dtd">
<!-- 声明这个配置文件遵循 MyBatis 的 DTD (Document Type Definition),用于验证 XML 文件的结构和规则。 -->
<configuration> <configuration>
<!-- 配置文件的根元素,所有的 MyBatis 配置信息都包含在这里面。 -->
<!-- 别名定义 --> <!-- 别名定义 -->
<typeAliases> <typeAliases>
<!-- typeAliases 元素用于定义 Java 类型的别名,方便在 MyBatis 的映射文件中使用简短的类名。 -->
<package name="com.itheima.po" /> <package name="com.itheima.po" />
<!-- 指定一个 Java 包,用来扫描该包下的所有 POJO 类,并为每个类自动生成别名。 -->
<!-- 例如,如果包中有一个类 `User`,那么 MyBatis 会自动为它生成别名 `User`,可以在映射文件中直接使用 `User` 作为类型。 -->
</typeAliases> </typeAliases>
</configuration> </configuration>
<!-- 结束配置文件的根元素 -->

@ -9,23 +9,50 @@
http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-4.3.xsd"> http://www.springframework.org/schema/context/spring-context-4.3.xsd">
<!--
声明当前文件使用 Spring 框架的 XML 配置格式,并指定各个 XML 命名空间xmlns以及对应的 XSD 文件xsi:schemaLocation。这些配置决定了文件的验证规则和使用的功能。
- `xmlns` 定义了 XML 文件的命名空间Spring 通过命名空间来识别不同的配置模块。
- `xsi:schemaLocation` 定义了每个命名空间对应的 XSD 文件地址,用于验证配置文件的结构。
-->
<!-- 配置包扫描器,扫描@Controller注解的类 --> <!-- 配置包扫描器,扫描@Controller注解的类 -->
<context:component-scan base-package="com.itheima.controller" /> <context:component-scan base-package="com.itheima.controller" />
<!--
<context:component-scan> 元素用于配置 Spring 扫描指定包及其子包中的类,自动识别并注册为 Spring 容器中的 Bean。
这里指定扫描 `com.itheima.controller` 包下的类Spring 会自动扫描并注册标注了 `@Controller` 注解的类,便于实现控制器功能。
-->
<!-- 加载注解驱动 --> <!-- 加载注解驱动 -->
<mvc:annotation-driven /> <mvc:annotation-driven />
<!--
<mvc:annotation-driven> 配置启用 Spring MVC 的注解驱动功能。
该配置启用之后Spring MVC 会支持如 `@Controller`、`@RequestMapping`、`@ResponseBody` 等注解功能。
-->
<!--配置静态资源的访问映射,此配置中的文件,将不被前端控制器拦截 --> <!-- 配置静态资源的访问映射,此配置中的文件,将不被前端控制器拦截 -->
<mvc:resources location="/js/" mapping="/js/**"/> <mvc:resources location="/js/" mapping="/js/**"/>
<mvc:resources location="/css/" mapping="/css/**"/> <mvc:resources location="/css/" mapping="/css/**"/>
<mvc:resources location="/fonts/" mapping="/fonts/**"/> <mvc:resources location="/fonts/" mapping="/fonts/**"/>
<mvc:resources location="/images/" mapping="/images/**"/> <mvc:resources location="/images/" mapping="/images/**"/>
<mvc:resources location="/lib/" mapping="/lib/**"/> <mvc:resources location="/lib/" mapping="/lib/**"/>
<mvc:resources location="/layui_exts/" mapping="/layui_exts/**"/> <mvc:resources location="/layui_exts/" mapping="/layui_exts/**"/>
<!--
<mvc:resources> 元素用于配置静态资源(如 JavaScript、CSS、图片等的访问路径映射。
这些静态资源不会经过 Spring MVC 的前端控制器拦截,直接通过对应的 URL 路径进行访问。
每个 `<mvc:resources>` 配置指定一个静态资源的根路径(`location`),和相应的 URL 映射(`mapping`)。
例如:`/js/**` 映射到 `/js/` 目录下的所有文件。
-->
<!-- 配置视图解析器 --> <!-- 配置视图解析器 -->
<bean class= <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
"org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" /> <property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" /> <property name="suffix" value=".jsp" />
</bean> </bean>
<!--
<bean> 元素定义了一个 Spring Bean这里配置了 `InternalResourceViewResolver`,该类用于解析视图名称并找到相应的 JSP 文件。
- `prefix` 配置了 JSP 文件的前缀路径(即 JSP 文件所在的目录),这里是 `/WEB-INF/jsp/`,表示所有 JSP 文件都放在该目录下。
- `suffix` 配置了 JSP 文件的后缀,这里设置为 `.jsp`,表示视图名称解析后会拼接成 JSP 文件路径。
-->
</beans> </beans>
<!-- 结束 Spring 配置文件 -->

@ -1,16 +1,36 @@
/* 定义字体图标的字体文件 */
@font-face { @font-face {
/* 定义字体家族名称为 'iconfont' */
font-family: 'iconfont'; font-family: 'iconfont';
/* 指定字体文件路径,使用 eot 格式IE6-IE8 支持) */
src: url('../fonts/iconfont.eot'); src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'), /* eotwofftruetype svg
url('../fonts/iconfont.ttf') format('truetype'), */
url('../fonts/iconfont.svg#iconfont') format('svg'); src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE Fix for eot 文件 */
url('../fonts/iconfont.woff') format('woff'), /* WOFF 格式,用于大多数现代浏览器 */
url('../fonts/iconfont.ttf') format('truetype'), /* TTF 格式,用于某些旧版浏览器 */
url('../fonts/iconfont.svg#iconfont') format('svg'); /* SVG 格式,用于移动设备和一些现代浏览器 */
} }
/* 配置图标字体的样式 */
.iconfont{ .iconfont{
font-family:"iconfont" !important; /* 设置字体家族为 'iconfont',确保所有使用该类的元素应用自定义图标字体 */
font-size:16px;font-style:normal; font-family: "iconfont" !important;
/* 设置字体大小为 16px可以根据需求调整大小 */
font-size: 16px;
/* 设置字体样式为正常,确保图标显示清晰 */
font-style: normal;
/* 启用 Webkit 浏览器的字体平滑效果,使得字体显示更加柔和 */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
/* 设置文本描边宽度,防止在某些浏览器中显示模糊的图标 */
-webkit-text-stroke-width: 0.2px; -webkit-text-stroke-width: 0.2px;
/* 启用 Firefox OS X 上的字体平滑效果,使字体更加清晰 */
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }

@ -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; /* 圆角边框 */
}

@ -1,54 +1,72 @@
/*分页按钮样式*/ /* 分页按钮容器的样式 */
.page-go-form{ .page-go-form {
float: right; float: right; /* 右浮动,使容器靠右显示 */
margin-right: 40px; margin-right: 40px; /* 右边距为40px */
width: 200px; width: 200px; /* 宽度为200px */
} }
.page-bar{ /* 分页栏的容器样式 */
width: 600px; .page-bar {
height: 30px; width: 600px; /* 宽度为600px */
float: right; height: 30px; /* 高度为30px */
} float: right; /* 右浮动,使分页栏靠右显示 */
.page-num-ul{ }
width: 250px;
height: 30px; /* 分页数字的容器样式 */
padding-left: 100px; .page-num-ul {
float: left; width: 250px; /* 宽度为250px */
font-size: 14px; height: 30px; /* 高度为30px */
} padding-left: 100px; /* 左边距为100px用于调整位置 */
.pg_a{ float: left; /* 左浮动,使其在分页栏中靠左显示 */
margin: 0 5px; font-size: 14px; /* 字体大小为14px */
} }
.pg_a:hover{
color: #00a4ac; /* 分页链接(数字)的样式 */
margin: 0 5px; .pg_a {
} margin: 0 5px; /* 设置左右边距为5px避免元素之间重叠 */
#inputPage{ }
width: 50px;
} /* 分页链接(数字)鼠标悬停时的样式 */
.page-btn{ .pg_a:hover {
margin: 0 3px; color: #00a4ac; /* 鼠标悬停时,文字颜色变为蓝绿色 */
width: 50px; margin: 0 5px; /* 鼠标悬停时保持左右边距为5px */
cursor: pointer; }
color: #ffffff;
background-color: #009688; /* 输入框的样式,用于直接输入页码 */
} #inputPage {
.page-btn:hover{ width: 50px; /* 宽度为50px */
opacity: 0.7; }
cursor: pointer;
background-color: #009688; /* 分页按钮的样式 */
} .page-btn {
margin: 0 3px; /* 左右边距为3px避免按钮之间太紧 */
#f_auto{ width: 50px; /* 宽度为50px */
margin: 0 auto; cursor: pointer; /* 鼠标指针变为点击状态 */
margin-top: 40px; color: #ffffff; /* 文字颜色为白色 */
width: 400px; background-color: #009688; /* 背景颜色为深青色 */
} }
#btn_on{
width: 260px; /* 分页按钮鼠标悬停时的样式 */
margin-left: 45px; .page-btn:hover {
} opacity: 0.7; /* 鼠标悬停时按钮的透明度降低至0.7 */
.f_sp{ cursor: pointer; /* 鼠标指针变为点击状态 */
letter-spacing: 16px; background-color: #009688; /* 背景颜色保持不变 */
}
/* 自动分页按钮的容器样式 */
#f_auto {
margin: 0 auto; /* 水平居中 */
margin-top: 40px; /* 上边距为40px */
width: 400px; /* 宽度为400px */
}
/* "立即跳转"按钮的样式 */
#btn_on {
width: 260px; /* 宽度为260px */
margin-left: 45px; /* 左边距为45px */
}
/* 设置特定文本的字母间距 */
.f_sp {
letter-spacing: 16px; /* 设置字母间距为16px */
} }

@ -1,118 +1,136 @@
/* 全局样式:去除所有元素的外边距和内边距 */
*{ *{
margin: 0; margin: 0; /* 去除外边距 */
padding: 0; padding: 0; /* 去除内边距 */
} }
/* .header样式设置页头背景图、宽度和高度 */
.header{ .header{
background: url("../images/bti.jpg")no-repeat; background: url("../images/bti.jpg") no-repeat; /* 背景图,且不重复 */
width: 100%; width: 100%; /* 宽度为100% */
height: 200px; height: 200px; /* 高度为200px */
} }
/* .body样式设置页面主体背景图宽度、高度和上边距 */
.body{ .body{
background: url("../images/timg-1.jpg"); background: url("../images/timg-1.jpg"); /* 背景图 */
width: 100%; width: 100%; /* 宽度为100% */
height: 650px; height: 650px; /* 高度为650px */
margin-top: -100px; margin-top: -100px; /* 设置上边距为负值向上偏移100px */
} }
/* .panel样式设置面板的宽度、高度、位置、背景和边框 */
.panel{ .panel{
width: 350px; width: 350px; /* 宽度为350px */
height: 420px; height: 420px; /* 高度为420px */
position: relative; position: relative; /* 相对定位,用于后续定位子元素 */
left: 800px; left: 800px; /* 左边距为800px将面板向右移动 */
top: 60px; top: 60px; /* 上边距为60px将面板向下移动 */
background-color: #FFFFFF; background-color: #FFFFFF; /* 背景色为白色 */
border: 1px solid #dff0d8; border: 1px solid #dff0d8; /* 边框为1px实线颜色为淡绿色 */
} }
/* .top样式设置面板顶部部分的高度和边框 */
.top{ .top{
height:60px; height: 60px; /* 高度为60px */
border-bottom:1px solid #dff0d8; border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线颜色为淡绿色 */
} }
/* .top p样式设置标题文本的对齐方式、字体大小、颜色和内边距 */
.top>p{ .top>p{
text-align: center; text-align: center; /* 文本居中对齐 */
padding-top: 15px; padding-top: 15px; /* 顶部内边距为15px */
/*margin: 20px 0;*/ /*margin: 20px 0;*/ /* 注释掉的代码,可能用于调整上下边距 */
font-size: 25px; font-size: 25px; /* 字体大小为25px */
color: #f57421; color: #f57421; /* 字体颜色为橙色 */
} }
/* .middle样式设置面板中间部分的高度、边距和底部边框 */
.middle{ .middle{
position: relative; position: relative; /* 相对定位,用于定位子元素 */
height: 290px; height: 290px; /* 高度为290px */
margin: 10px 0; margin: 10px 0; /* 上下边距为10px */
/*background-color: red;*/ /*background-color: red;*/ /* 注释掉的代码,可能用于调试背景色 */
border-bottom:1px solid #dff0d8; border-bottom: 1px solid #dff0d8; /* 底部边框为1px实线颜色为淡绿色 */
} }
/* .middle > form > input样式设置输入框的高度、宽度、边距和边框 */
.middle>form>input{ .middle>form>input{
height: 40px; height: 40px; /* 高度为40px */
width: 290px; width: 290px; /* 宽度为290px */
margin: 20px 30px; margin: 20px 30px; /* 上下边距为20px左右边距为30px */
border: 1px solid #e0e0e0; border: 1px solid #e0e0e0; /* 边框为1px实线颜色为浅灰色 */
} }
/* .middle > form > input:last-child样式设置最后一个输入框的背景色、字体大小和字体颜色 */
.middle>form>input:last-child{ .middle>form>input:last-child{
background-color: #f57421; background-color: #f57421; /* 背景色为橙色 */
font-size: 18px; font-size: 18px; /* 字体大小为18px */
color: #FFFFFF; color: #FFFFFF; /* 字体颜色为白色 */
} }
/* .middle > form > input:last-child:hover样式设置最后一个输入框鼠标悬停时的效果 */
.middle>form>input:last-child:hover{ .middle>form>input:last-child:hover{
background-color: #f57421; background-color: #f57421; /* 背景色保持为橙色 */
opacity: 0.7; opacity: 0.7; /* 透明度为0.7 */
cursor: pointer; cursor: pointer; /* 鼠标指针变为手型 */
font-size: 18px; font-size: 18px; /* 字体大小保持为18px */
} }
/* .middle > form > .s1样式设置第一个图标的大小、位置和背景图 */
.middle>form>.s1{ .middle>form>.s1{
height: 40px; height: 40px; /* 高度为40px */
width: 40px; width: 40px; /* 宽度为40px */
position: absolute; position: absolute; /* 绝对定位 */
left: 35px; left: 35px; /* 距离左侧35px */
top: 40px; top: 40px; /* 距离顶部40px */
background: url("../images/J1.PNG") no-repeat; background: url("../images/J1.PNG") no-repeat; /* 背景图 */
} }
/* .middle > form > .s2样式设置第二个图标的大小、位置和背景图 */
.middle>form>.s2{ .middle>form>.s2{
height: 40px; height: 40px; /* 高度为40px */
width: 40px; width: 40px; /* 宽度为40px */
position: absolute; position: absolute; /* 绝对定位 */
left: 35px; left: 35px; /* 距离左侧35px */
top: 120px; top: 120px; /* 距离顶部120px */
background: url("../images/J2.PNG") no-repeat; background: url("../images/J2.PNG") no-repeat; /* 背景图 */
} }
/* .middle > form > .erro样式设置错误提示文本的颜色、字体大小和左边距 */
.middle>form>.erro{ .middle>form>.erro{
color: red; color: red; /* 文本颜色为红色 */
font-size: 14px; font-size: 14px; /* 字体大小为14px */
margin-left:10px; margin-left: 10px; /* 左边距为10px */
} }
/* .tail > a样式设置尾部链接的浮动、字体大小、内边距和颜色 */
.tail>a{ .tail>a{
float: right; float: right; /* 右浮动,使链接靠右显示 */
font-size: 12px; font-size: 12px; /* 字体大小为12px */
padding: 10px; padding: 10px; /* 内边距为10px */
text-decoration:none; text-decoration: none; /* 去除文本装饰 */
color: black; color: black; /* 字体颜色为黑色 */
} }
/* .tail > a:hover样式设置链接鼠标悬停时的颜色变化 */
.tail>a:hover{ .tail>a:hover{
color: red; color: red; /* 鼠标悬停时,字体颜色变为红色 */
} }
/* .middle > form > .iputs:hover样式设置输入框悬停时的边框颜色变化 */
.middle>form>.iputs:hover{ .middle>form>.iputs:hover{
border:1px solid red; border: 1px solid red; /* 鼠标悬停时,输入框边框颜色变为红色 */
} }
/* .footer样式设置页脚的上边距 */
.footer{ .footer{
margin-top: 20px; margin-top: 20px; /* 上边距为20px */
} }
/* .footer > span样式设置页脚文本的字体大小、位置和左边距 */
.footer>span{ .footer>span{
font-size: 15px; font-size: 15px; /* 字体大小为15px */
position: relative; position: relative; /* 相对定位,用于精确调整位置 */
left: 45%; left: 45%; /* 左边距为45%,使其水平居中 */
} }

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save