diff --git a/WebContent/loginReader.html b/WebContent/loginReader.html index 7cd5502..254c8d5 100644 --- a/WebContent/loginReader.html +++ b/WebContent/loginReader.html @@ -1,72 +1,71 @@ - -借阅者登录页面 - - - - - - - - - - - + + 借阅者登录页面 + + + + + + + + + + -
-
-

借阅者登录

-
- - - -
- -
+
+
+

借阅者登录

+
+ + + +
-
-
- -
- - + + + }); + return false; // 阻止表单默认提交行为 + }); + }); + - \ No newline at end of file + diff --git a/WebContent/public/css/animate.css b/WebContent/public/css/animate.css index 98f29c2..4727b58 100644 --- a/WebContent/public/css/animate.css +++ b/WebContent/public/css/animate.css @@ -2898,597 +2898,611 @@ } } +/* 定义一个名为zoomInDown的关键帧动画 */ @keyframes zoomInDown { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); /* 缩小并向上移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 放大并向下移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 应用zoomInDown动画的类 */ .zoomInDown { - -webkit-animation-name: zoomInDown; - animation-name: zoomInDown; + -webkit-animation-name: zoomInDown; /* 使用WebKit内核的浏览器 */ + animation-name: zoomInDown; /* 使用标准内核的浏览器 */ } +/* 定义一个名为zoomInLeft的关键帧动画（适用于WebKit内核） */ @-webkit-keyframes zoomInLeft { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 定义一个名为zoomInLeft的关键帧动画（适用于标准内核） */ @keyframes zoomInLeft { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); /* 缩小并向左移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); /* 放大并向右移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 应用zoomInLeft动画的类 */ .zoomInLeft { - -webkit-animation-name: zoomInLeft; - animation-name: zoomInLeft; + -webkit-animation-name: zoomInLeft; /* 使用WebKit内核的浏览器 */ + animation-name: zoomInLeft; /* 使用标准内核的浏览器 */ } +/* 定义一个名为zoomInRight的关键帧动画（适用于WebKit内核） */ @-webkit-keyframes zoomInRight { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 定义一个名为zoomInRight的关键帧动画 */ @keyframes zoomInRight { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); /* 缩小并向右移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); /* 放大并向左移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 应用zoomInRight动画的类 */ .zoomInRight { - -webkit-animation-name: zoomInRight; - animation-name: zoomInRight; -} - -@-webkit-keyframes zoomInUp { - from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } + -webkit-animation-name: zoomInRight; /* 指定动画名称 */ + animation-name: zoomInRight; /* 指定动画名称 */ } +/* 定义一个名为zoomInUp的关键帧动画 */ @keyframes zoomInUp { + /* 动画开始时的状态 */ from { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); /* 缩小并向下移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画进行到60%时的状态 */ 60% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 应用zoomInUp动画的类 */ .zoomInUp { - -webkit-animation-name: zoomInUp; - animation-name: zoomInUp; -} - -@-webkit-keyframes zoomOut { - from { - opacity: 1; - } - - 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); - } - - to { - opacity: 0; - } + -webkit-animation-name: zoomInUp; /* 指定动画名称 */ + animation-name: zoomInUp; /* 指定动画名称 */ } +/* 定义一个名为zoomOut的关键帧动画 */ @keyframes zoomOut { + /* 动画开始时的状态 */ from { - opacity: 1; + opacity: 1; /* 完全不透明 */ } + /* 动画进行到50%时的状态 */ 50% { - opacity: 0; - -webkit-transform: scale3d(0.3, 0.3, 0.3); - transform: scale3d(0.3, 0.3, 0.3); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */ + transform: scale3d(0.3, 0.3, 0.3); /* 缩小 */ } + /* 动画结束时的状态 */ to { - opacity: 0; + opacity: 0; /* 完全透明 */ } } +/* 应用zoomOut动画的类 */ .zoomOut { - -webkit-animation-name: zoomOut; - animation-name: zoomOut; -} - -@-webkit-keyframes zoomOutDown { - 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - } - - to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - } + -webkit-animation-name: zoomOut; /* 指定动画名称 */ + animation-name: zoomOut; /* 指定动画名称 */ } +/* 定义一个名为zoomOutDown的关键帧动画 */ @keyframes zoomOutDown { + /* 动画进行到40%时的状态 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); /* 放大并向上移动 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 缓动函数 */ } + /* 动画结束时的状态 */ to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); /* 缩小并向下移动 */ + -webkit-transform-origin: center bottom; /* 变换原点在底部中心 */ + transform-origin: center bottom; /* 变换原点在底部中心 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 缓动函数 */ } } +/* 应用zoomOutDown动画的类 */ .zoomOutDown { - -webkit-animation-name: zoomOutDown; - animation-name: zoomOutDown; + -webkit-animation-name: zoomOutDown; /* 指定动画名称 */ + animation-name: zoomOutDown; /* 指定动画名称 */ } -@-webkit-keyframes zoomOutLeft { +/* 定义一个名为zoomOutLeft的关键帧动画 */ +@keyframes zoomOutLeft { + /* 动画进行到40%时的状态 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + opacity: 1; /* 完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 放大并向右移动 */ } + /* 动画结束时的状态 */ to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; + opacity: 0; /* 完全透明 */ + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */ + transform: scale(0.1) translate3d(-2000px, 0, 0); /* 缩小并向左移动 */ + -webkit-transform-origin: left center; /* 变换原点在左侧中心 */ + transform-origin: left center; /* 变换原点在左侧中心 */ } } +/* 应用zoomOutLeft动画的类 */ +.zoomOutLeft { + -webkit-animation-name: zoomOutLeft; /* 指定动画名称 */ + animation-name: zoomOutLeft; /* 指定动画名称 */ +} + +/* 定义一个名为zoomOutLeft的关键帧动画 */ @keyframes zoomOutLeft { + /* 在动画的40%时 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); + opacity: 1; /* 保持元素完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 缩小并向右移动元素 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); /* 缩小并向右移动元素 */ } + /* 动画结束时 */ to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); - transform: scale(0.1) translate3d(-2000px, 0, 0); - -webkit-transform-origin: left center; - transform-origin: left center; + opacity: 0; /* 完全透明 */ + -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); /* 将元素缩放到非常小并向左移动到视野外 */ + transform: scale(0.1) translate3d(-2000px, 0, 0); /* 将元素缩放到非常小并向左移动到视野外 */ + -webkit-transform-origin: left center; /* 设置变换的原点为元素的左中心 */ + transform-origin: left center; /* 设置变换的原点为元素的左中心 */ } } +/* 应用zoomOutLeft动画的类 */ .zoomOutLeft { - -webkit-animation-name: zoomOutLeft; - animation-name: zoomOutLeft; + -webkit-animation-name: zoomOutLeft; /* 指定使用zoomOutLeft关键帧动画 */ + animation-name: zoomOutLeft; /* 指定使用zoomOutLeft关键帧动画 */ } +/* 定义一个名为zoomOutRight的关键帧动画，用于兼容旧版WebKit浏览器 */ @-webkit-keyframes zoomOutRight { + /* 在动画的40%时 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + opacity: 1; /* 保持元素完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */ } + /* 动画结束时 */ to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; + opacity: 0; /* 完全透明 */ + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */ + transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */ + -webkit-transform-origin: right center; /* 设置变换的原点为元素的右中心 */ + transform-origin: right center; /* 设置变换的原点为元素的右中心 */ } } +/* 定义一个名为zoomOutRight的关键帧动画 */ @keyframes zoomOutRight { + /* 在动画的40%时 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); + opacity: 1; /* 保持元素完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); /* 缩小并向左移动元素 */ } + /* 动画结束时 */ to { - opacity: 0; - -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); - transform: scale(0.1) translate3d(2000px, 0, 0); - -webkit-transform-origin: right center; - transform-origin: right center; + opacity: 0; /* 完全透明 */ + -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */ + transform: scale(0.1) translate3d(2000px, 0, 0); /* 将元素缩放到非常小并向右移动到视野外 */ + -webkit-transform-origin: right center; /* 设置变换的原点为元素的右中心 */ + transform-origin: right center; /* 设置变换的原点为元素的右中心 */ } } +/* 应用zoomOutRight动画的类 */ .zoomOutRight { - -webkit-animation-name: zoomOutRight; - animation-name: zoomOutRight; + -webkit-animation-name: zoomOutRight; /* 指定使用zoomOutRight关键帧动画 */ + animation-name: zoomOutRight; /* 指定使用zoomOutRight关键帧动画 */ } +/* 定义一个名为zoomOutUp的关键帧动画，用于兼容旧版WebKit浏览器 */ @-webkit-keyframes zoomOutUp { + /* 在动画的40%时 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 1; /* 保持元素完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */ } + /* 动画结束时 */ to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */ + -webkit-transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */ + transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */ } } +/* 定义一个名为zoomOutUp的关键帧动画 */ @keyframes zoomOutUp { + /* 在动画的40%时 */ 40% { - opacity: 1; - -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); - -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); - animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + opacity: 1; /* 保持元素完全不透明 */ + -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */ + transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); /* 缩小并向上移动元素 */ + -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */ + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); /* 自定义缓动函数 */ } + /* 动画结束时 */ to { - opacity: 0; - -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); - -webkit-transform-origin: center bottom; - transform-origin: center bottom; - -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); - animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); + opacity: 0; /* 完全透明 */ + -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */ + transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); /* 将元素缩放到非常小并向下移动到视野外 */ + -webkit-transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */ + transform-origin: center bottom; /* 设置变换的原点为元素的底部中心 */ + -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */ + animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); /* 自定义缓动函数 */ } } +/* 应用zoomOutUp动画的类 */ .zoomOutUp { - -webkit-animation-name: zoomOutUp; - animation-name: zoomOutUp; + -webkit-animation-name: zoomOutUp; /* 指定使用zoomOutUp关键帧动画 */ + animation-name: zoomOutUp; /* 指定使用zoomOutUp关键帧动画 */ } +/* 定义一个名为slideInDown的关键帧动画，用于兼容旧版WebKit浏览器 */ @-webkit-keyframes slideInDown { from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; + -webkit-transform: translate3d(0, -100%, 0); /* 从上方开始移动 */ + transform: translate3d(0, -100%, 0); /* 从上方开始移动 */ + visibility: visible; /* 确保元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 回到原始位置 */ + transform: translate3d(0, 0, 0); /* 回到原始位置 */ } } +/* 定义一个名为slideInDown的关键帧动画 */ @keyframes slideInDown { from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; + -webkit-transform: translate3d(0, -100%, 0); /* 从上方开始移动 */ + transform: translate3d(0, -100%, 0); /* 从上方开始移动 */ + visibility: visible; /* 确保元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 回到原始位置 */ + transform: translate3d(0, 0, 0); /* 回到原始位置 */ } } +/* 应用slideInDown动画的类 */ .slideInDown { - -webkit-animation-name: slideInDown; - animation-name: slideInDown; + -webkit-animation-name: slideInDown; /* 指定使用slideInDown关键帧动画 */ + animation-name: slideInDown; /* 指定使用slideInDown关键帧动画 */ } +/* 定义从左侧滑入的动画 */ @-webkit-keyframes slideInLeft { from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; + -webkit-transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */ + transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } @keyframes slideInLeft { from { - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); - visibility: visible; + -webkit-transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */ + transform: translate3d(-100%, 0, 0); /* 初始位置在屏幕左侧外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } .slideInLeft { - -webkit-animation-name: slideInLeft; - animation-name: slideInLeft; + -webkit-animation-name: slideInLeft; /* 使用slideInLeft动画 */ + animation-name: slideInLeft; /* 使用slideInLeft动画 */ } +/* 定义从右侧滑入的动画 */ @-webkit-keyframes slideInRight { from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; + -webkit-transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */ + transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } @keyframes slideInRight { from { - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); - visibility: visible; + -webkit-transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */ + transform: translate3d(100%, 0, 0); /* 初始位置在屏幕右侧外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } .slideInRight { - -webkit-animation-name: slideInRight; - animation-name: slideInRight; + -webkit-animation-name: slideInRight; /* 使用slideInRight动画 */ + animation-name: slideInRight; /* 使用slideInRight动画 */ } +/* 定义从上方滑入的动画 */ @-webkit-keyframes slideInUp { from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; + -webkit-transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */ + transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } @keyframes slideInUp { from { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - visibility: visible; + -webkit-transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */ + transform: translate3d(0, 100%, 0); /* 初始位置在屏幕上方外 */ + visibility: visible; /* 元素可见 */ } to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ + transform: translate3d(0, 0, 0); /* 最终位置回到原位 */ } } .slideInUp { - -webkit-animation-name: slideInUp; - animation-name: slideInUp; + -webkit-animation-name: slideInUp; /* 使用slideInUp动画 */ + animation-name: slideInUp; /* 使用slideInUp动画 */ } +/* 定义向下滑动隐藏的动画 */ @-webkit-keyframes slideOutDown { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */ + transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */ } } @keyframes slideOutDown { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */ + transform: translate3d(0, 100%, 0); /* 最终位置在屏幕下方外 */ } } .slideOutDown { - -webkit-animation-name: slideOutDown; - animation-name: slideOutDown; + -webkit-animation-name: slideOutDown; /* 使用slideOutDown动画 */ + animation-name: slideOutDown; /* 使用slideOutDown动画 */ } +/* 定义向左滑动隐藏的动画 */ @-webkit-keyframes slideOutLeft { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */ + transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */ } } @keyframes slideOutLeft { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(-100%, 0, 0); - transform: translate3d(-100%, 0, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */ + transform: translate3d(-100%, 0, 0); /* 最终位置在屏幕左侧外 */ } } .slideOutLeft { - -webkit-animation-name: slideOutLeft; - animation-name: slideOutLeft; + -webkit-animation-name: slideOutLeft; /* 使用slideOutLeft动画 */ + animation-name: slideOutLeft; /* 使用slideOutLeft动画 */ } +/* 定义向右滑动隐藏的动画 */ @-webkit-keyframes slideOutRight { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */ + transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */ } } @keyframes slideOutRight { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(100%, 0, 0); - transform: translate3d(100%, 0, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */ + transform: translate3d(100%, 0, 0); /* 最终位置在屏幕右侧外 */ } } .slideOutRight { - -webkit-animation-name: slideOutRight; - animation-name: slideOutRight; + -webkit-animation-name: slideOutRight; /* 使用slideOutRight动画 */ + animation-name: slideOutRight; /* 使用slideOutRight动画 */ } +/* 定义向上滑动隐藏的动画 */ @-webkit-keyframes slideOutUp { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */ + transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */ } } @keyframes slideOutUp { from { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -webkit-transform: translate3d(0, 0, 0); /* 初始位置在原位 */ + transform: translate3d(0, 0, 0); /* 初始位置在原位 */ } to { - visibility: hidden; - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); + visibility: hidden; /* 元素不可见 */ + -webkit-transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */ + transform: translate3d(0, -100%, 0); /* 最终位置在屏幕上方外 */ } } .slideOutUp { - -webkit-animation-name: slideOutUp; - animation-name: slideOutUp; + -webkit-animation-name: slideOutUp; /* 使用slideOutUp动画 */ + animation-name: slideOutUp; /* 使用slideOutUp动画 */ } diff --git a/WebContent/public/css/component.css b/WebContent/public/css/component.css index 83269a8..b5be834 100644 --- a/WebContent/public/css/component.css +++ b/WebContent/public/css/component.css @@ -1,156 +1,168 @@ -/* General styles for the modal */ - -/* -Styles for the html/body for special modal where we want 3d effects -Note that we need a container wrapping all content on the page for the -perspective effects (not including the modals and the overlay). -*/ +/* 设置全局样式，适用于所有模态框 */ .md-perspective, .md-perspective body { - height: 100%; - overflow: hidden; + height: 100%; /* 设置高度为100% */ + overflow: hidden; /* 隐藏溢出内容 */ } - +/* 容器样式，用于包裹页面内容以实现透视效果 */ .container { - background: steelblue; - min-height: 100%; - width:100%; + background: steelblue; /* 设置背景颜色为钢蓝色 */ + min-height: 100%; /* 最小高度为100% */ + width:100%; /* 宽度为100% */ } +/* 模态框基本样式 */ .md-modal { - position: fixed; - top: 50%; - left: 50%; - width: 50%; - max-width: 630px; - min-width: 320px; - height: auto; - z-index: 2000; - visibility: hidden; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - backface-visibility: hidden; - -webkit-transform: translateX(-50%) translateY(-50%); - -moz-transform: translateX(-50%) translateY(-50%); - -ms-transform: translateX(-50%) translateY(-50%); - transform: translateX(-50%) translateY(-50%); -} - + position: fixed; /* 固定定位 */ + top: 50%; /* 距离顶部50% */ + left: 50%; /* 距离左侧50% */ + width: 50%; /* 宽度为50% */ + max-width: 630px; /* 最大宽度为630px */ + min-width: 320px; /* 最小宽度为320px */ + height: auto; /* 高度自动 */ + z-index: 2000; /* z轴索引为2000 */ + visibility: hidden; /* 初始不可见 */ + -webkit-backface-visibility: hidden; /* Webkit浏览器隐藏背面 */ + -moz-backface-visibility: hidden; /* Firefox浏览器隐藏背面 */ + backface-visibility: hidden; /* 标准方式隐藏背面 */ + -webkit-transform: translateX(-50%) translateY(-50%); /* Webkit浏览器居中 */ + -moz-transform: translateX(-50%) translateY(-50%); /* Firefox浏览器居中 */ + -ms-transform: translateX(-50%) translateY(-50%); /* IE浏览器居中 */ + transform: translateX(-50%) translateY(-50%); /* 标准方式居中 */ +} + +/* 显示模态框时的样式 */ .md-show { - visibility: visible; + visibility: visible; /* 设置为可见 */ } +/* 遮罩层样式 */ .md-overlay { - position: fixed; - width: 100%; - height: 100%; - visibility: hidden; - top: 0; - left: 0; - z-index: 1000; - opacity: 0; - background: rgba(232, 232, 232, 0.5); - -webkit-transition: all 0.3s; - -moz-transition: all 0.3s; - transition: all 0.3s; -} - + position: fixed; /* 固定定位 */ + width: 100%; /* 宽度为100% */ + height: 100%; /* 高度为100% */ + visibility: hidden; /* 初始不可见 */ + top: 0; /* 距离顶部0 */ + left: 0; /* 距离左侧0 */ + z-index: 1000; /* z轴索引为1000 */ + opacity: 0; /* 初始透明度为0 */ + background: rgba(232, 232, 232, 0.5); /* 背景色和透明度 */ + -webkit-transition: all 0.3s; /* Webkit浏览器过渡效果 */ + -moz-transition: all 0.3s; /* Firefox浏览器过渡效果 */ + transition: all 0.3s; /* 标准方式过渡效果 */ +} + +/* 当模态框显示时，遮罩层的样式 */ .md-show ~ .md-overlay { - opacity: 1; - visibility: visible; + opacity: 1; /* 透明度为1 */ + visibility: visible; /* 设置为可见 */ } -/* Content styles */ +/* 内容区域样式 */ .md-content { - color: black; - background: lightblue; - position: relative; - border-radius: 3px; - margin: 0 auto; + color: black; /* 文字颜色为黑色 */ + background: lightblue; /* 背景色为浅蓝色 */ + position: relative; /* 相对定位 */ + border-radius: 3px; /* 圆角半径为3px */ + margin: 0 auto; /* 水平居中 */ } +/* 标题样式 */ .md-content h3 { - margin: 0; - padding: 0.4em; - text-align: center; - font-size: 2.4em; - font-weight: 300; - opacity: 0.8; - background: rgba(0,0,0,0.1); - border-radius: 3px 3px 0 0; + margin: 0; /* 外边距为0 */ + padding: 0.4em; /* 内边距为0.4em */ + text-align: center; /* 文本居中 */ + font-size: 2.4em; /* 字体大小为2.4em */ + font-weight: 300; /* 字体粗细为300 */ + opacity: 0.8; /* 透明度为0.8 */ + background: rgba(0,0,0,0.1); /* 背景色和透明度 */ + border-radius: 3px 3px 0 0; /* 圆角半径，上左和上右为3px，下左和下右为0 */ } +/* 内容区域的子元素样式 */ .md-content > div { - padding: 15px 40px 30px; - margin: 0; - font-weight: 300; - font-size: 1.15em; + padding: 15px 40px 30px; /* 内边距 */ + margin: 0; /* 外边距为0 */ + font-weight: 300; /* 字体粗细为300 */ + font-size: 1.15em; /* 字体大小为1.15em */ } +/* 内容区域内的段落样式 */ .md-content > div p { - margin: 0; - padding: 10px 0; + margin: 0; /* 外边距为0 */ + padding: 10px 0; /* 内边距为10px 0 */ } +/* 内容区域内的无序列表样式 */ .md-content > div ul { - margin: 0; - padding: 0 0 30px 20px; + margin: 0; /* 外边距为0 */ + padding: 0 0 30px 20px; /* 内边距为0 0 30px 20px */ } +/* 列表项样式 */ .md-content > div ul li { - padding: 5px 0; + padding: 5px 0; /* 内边距为5px 0 */ } +/* 按钮样式 */ .md-content button { - display: block; - margin: 0 auto; - font-size: 0.8em; + display: block; /* 块级显示 */ + margin: 0 auto; /* 水平居中 */ + font-size: 0.8em; /* 字体大小为0.8em */ } -/* Individual modal styles with animations/transitions */ - - -/* Effect 13: 3D slit */ +/* 特效13：3D切片效果 */ .md-effect-13.md-modal { - -webkit-perspective: 1300px; - -moz-perspective: 1300px; - perspective: 1300px; + -webkit-perspective: 1300px; /* Webkit浏览器透视效果 */ + -moz-perspective: 1300px; /* Firefox浏览器透视效果 */ + perspective: 1300px; /* 标准方式透视效果 */ } +/* 特效13的内容样式 */ .md-effect-13 .md-content { - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-transform: translateZ(-3000px) rotateY(90deg); - -moz-transform: translateZ(-3000px) rotateY(90deg); - -ms-transform: translateZ(-3000px) rotateY(90deg); - transform: translateZ(-3000px) rotateY(90deg); - opacity: 0; + -webkit-transform-style: preserve-3d; /* Webkit浏览器保留3D变换 */ + -moz-transform-style: preserve-3d; /* Firefox浏览器保留3D变换 */ + transform-style: preserve-3d; /* 标准方式保留3D变换 */ + -webkit-transform: translateZ(-3000px) rotateY(90deg); /* Webkit浏览器初始位置和旋转角度 */ + -moz-transform: translateZ(-3000px) rotateY(90deg); /* Firefox浏览器初始位置和旋转角度 */ + -ms-transform: translateZ(-3000px) rotateY(90deg); /* IE浏览器初始位置和旋转角度 */ + transform: translateZ(-3000px) rotateY(90deg); /* 标准方式初始位置和旋转角度 */ + opacity: 0; /* 初始透明度为0 */ } +/* 显示特效13时的动画效果 */ .md-show.md-effect-13 .md-content { - -webkit-animation: slit .7s forwards ease-out; - -moz-animation: slit .7s forwards ease-out; - animation: slit .7s forwards ease-out; + -webkit-animation: slit .7s forwards ease-out; /* Webkit浏览器动画效果 */ + -moz-animation: slit .7s forwards ease-out; /* Firefox浏览器动画效果 */ + animation: slit .7s forwards ease-out; /* 标准方式动画效果 */ } +/* Webkit浏览器的动画关键帧 */ @-webkit-keyframes slit { - 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} - 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } + 50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} /* 中间状态 */ + 100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */ } +/* Firefox浏览器的动画关键帧 */ @-moz-keyframes slit { - 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} - 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } + 50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} /* 中间状态 */ + 100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */ } -@keyframes slit { - 50% { transform: translateZ(-250px) rotateY(89deg); opacity: 1; animation-timing-function: ease-in;} - 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } +/* IE浏览器的动画关键帧 */ +@-ms-keyframes slit { + 50% { -ms-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -ms-animation-timing-function: ease-out;} /* 中间状态 */ + 100% { -ms-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */ } +/* 标准方式的动画关键帧 */ +@keyframes slit { + 50% { transform: translateZ(-250px) rotateY(89deg); opacity:1; animation-timing-function: ease-in;} /* 中间状态 */ + 100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */ +} +/* 如果屏幕宽度小于或等于32em，则调整字体大小 */ @media screen and (max-width: 32em) { - body { font-size: 75%; } -} \ No newline at end of file + body { font-size: 75%; } /* 字体大小缩小到75% */ +} diff --git a/WebContent/public/css/default.css b/WebContent/public/css/default.css index 12844b1..a16ee2a 100644 --- a/WebContent/public/css/default.css +++ b/WebContent/public/css/default.css @@ -1,45 +1,50 @@ -/* General Demo Style */ +/* 导入Lato字体 */ @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); +/* 定义codropsicons字体 */ @font-face { font-family: 'codropsicons'; src:url('../fonts/codropsicons/codropsicons.eot'); src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), - url('../fonts/codropsicons/codropsicons.woff') format('woff'), - url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), - url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); + url('../fonts/codropsicons/codropsicons.woff') format('woff'), + url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), + url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); font-weight: normal; font-style: normal; } +/* 设置所有元素的盒模型为border-box */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } + +/* 设置body和html的默认样式 */ body, html { font-size: 100%; padding: 0; margin: 0; } -/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ +/* Clearfix hack，用于清除浮动 */ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } +/* 设置body的字体、颜色和背景色 */ body { font-family: 'Lato', Calibri, Arial, sans-serif; color: #fff; background: lightblue; } - - -/* Header Style */ +/* 主内容和头部容器的样式 */ .main, .container > header { margin: 0 auto; padding: 2em; } +/* 头部容器的文本对齐和背景色 */ .container > header { text-align: center; background: lightblue; padding: 3em; } +/* 头部标题的字体大小和行高 */ .container > header h1 { font-size: 2.625em; line-height: 1.3; @@ -47,17 +52,19 @@ body { font-weight: 300; } +/* 头部副标题的样式 */ .container > header span { display: block; opacity: 0.7; padding: 0 0 0.6em 0.1em; } -/* Main Content */ +/* 主内容的宽度限制 */ .main { max-width: 69em; } +/* 列的样式 */ .column { float: left; width: 50%; @@ -66,10 +73,12 @@ body { position: relative; } +/* 第二列的阴影效果 */ .column:nth-child(2) { box-shadow: -1px 0 0 rgba(0,0,0,0.1); } +/* 列中段落的样式 */ .column p { font-weight: 300; font-size: 2em; @@ -79,11 +88,7 @@ body { line-height: 1.5; } -/* To Navigation Style */ - - - - +/* 按钮的样式 */ button { border: none; padding: 0.6em 1.2em; @@ -99,32 +104,33 @@ button { border-radius: 2px; } +/* 按钮悬停时的样式 */ button:hover { background: cornflowerblue; } +/* 媒体查询：屏幕宽度小于等于46.0625em时 */ @media screen and (max-width: 46.0625em) { .column { - width: 100%; - min-width: auto; - min-height: auto; - padding: 1em; + width: 100%; /* 列宽变为100% */ + min-width: auto; /* 最小宽度自动 */ + min-height: auto; /* 最小高度自动 */ + padding: 1em; /* 内边距增加 */ } .column p { - text-align: left; - font-size: 1.5em; + text-align: left; /* 段落左对齐 */ + font-size: 1.5em; /* 字体大小减小 */ } .column:nth-child(2) { - box-shadow: 0 -1px 0 rgba(0,0,0,0.1); + box-shadow: 0 -1px 0 rgba(0,0,0,0.1); /* 阴影方向改变 */ } } +/* 媒体查询：屏幕宽度小于等于25em时 */ @media screen and (max-width: 25em) { - .codrops-icon span { - display: none; + display: none; /* 隐藏图标描述文字 */ } - -} \ No newline at end of file +} diff --git a/WebContent/public/css/login.css b/WebContent/public/css/login.css index 96e0827..d2c96c2 100644 --- a/WebContent/public/css/login.css +++ b/WebContent/public/css/login.css @@ -1,48 +1,53 @@ -body{ - background-color: #f5f5f5; -} -.main{ - margin-top: 150px; - font-family: system-ui,cursive,sans-serif; -} -#login{ - max-width: 500px; - margin: 0 auto; - padding:25px 45px 45px 45px; - box-shadow: 8px 8px #b3e5fc; - border-radius: 15px; - background-image: -webkit-linear-gradient(top left, #ffd6e7, #cdfcf9); - background-image: -o-linear-gradient(top left, #ffd6e7, #cdfcf9); - background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9); - font-size: 16px; -} -#login h1{ - color: #4dd0e1; - text-align: center; - font-size: 30px; -} -#login .my_input{ - margin-top: 25px; - border: none; - background-color: rgba(0,0,0,0); - box-shadow: none; - border-bottom: 2px solid white; - border-radius: 0px; - font-size: 20px; - transition: all 0.3s; -} -#login .my_input:hover{ - border-bottom: 2px solid #ff9c6e; - -} -#login input[type=submit]{ - margin-top: 45px; - background-color: #fce4ec; - font-size: 18px; - transition: all 0.5s; - border-radius: 15px; -} -#login input[type=submit]:hover{ - background-color: #ffd6e7; +body { + background-color: #f5f5f5; /* 设置页面背景颜色为浅灰色 */ +} + +.main { + margin-top: 150px; /* 设置主内容区域的上边距为150像素 */ + font-family: system-ui, cursive, sans-serif; /* 设置字体样式，优先使用系统默认UI字体，其次是手写体和无衬线体 */ +} + +#login { + max-width: 500px; /* 设置登录框的最大宽度为500像素 */ + margin: 0 auto; /* 水平居中对齐 */ + padding: 25px 45px 45px 45px; /* 设置内边距：上、右、下、左均为45像素 */ + box-shadow: 8px 8px #b3e5fc; /* 设置阴影效果，偏移量为8像素，颜色为#b3e5fc */ + border-radius: 15px; /* 设置边框圆角半径为15像素 */ + background-image: -webkit-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 设置背景渐变色，从左上角到右下角，颜色从#ffd6e7渐变到#cdfcf9 */ + background-image: -o-linear-gradient(to top left, #ffd6e7, #cdfcf9); /* 兼容旧版Opera浏览器的渐变色设置 */ + background-image: linear-gradient(to bottom right, #ffd6e7, #cdfcf9); /* 标准渐变色设置，从左下角到右上角，颜色从#ffd6e7渐变到#cdfcf9 */ + font-size: 16px; /* 设置字体大小为16像素 */ +} + +#login h1 { + color: #4dd0e1; /* 设置标题文字颜色为#4dd0e1 */ + text-align: center; /* 文本居中对齐 */ + font-size: 30px; /* 设置标题字体大小为30像素 */ +} -} \ No newline at end of file +#login .my_input { + margin-top: 25px; /* 设置输入框的上边距为25像素 */ + border: none; /* 移除边框 */ + background-color: rgba(0, 0, 0, 0); /* 设置背景颜色为透明 */ + box-shadow: none; /* 移除阴影效果 */ + border-bottom: 2px solid white; /* 设置底部边框为2像素宽的白色实线 */ + border-radius: 0px; /* 设置边框圆角半径为0像素 */ + font-size: 20px; /* 设置字体大小为20像素 */ + transition: all 0.3s; /* 设置所有属性的过渡时间为0.3秒 */ +} + +#login .my_input:hover { + border-bottom: 2px solid #ff9c6e; /* 当鼠标悬停时，底部边框变为2像素宽的橙色实线 */ +} + +#login input[type=submit] { + margin-top: 45px; /* 设置提交按钮的上边距为45像素 */ + background-color: #fce4ec; /* 设置按钮背景颜色为#fce4ec */ + font-size: 18px; /* 设置按钮字体大小为18像素 */ + transition: all 0.5s; /* 设置所有属性的过渡时间为0.5秒 */ + border-radius: 15px; /* 设置按钮边框圆角半径为15像素 */ +} + +#login input[type=submit]:hover { + background-color: #ffd6e7; /* 当鼠标悬停时，按钮背景颜色变为#ffd6e7 */ +} diff --git a/WebContent/public/css/message.css b/WebContent/public/css/message.css index 3258a83..8917c0b 100644 --- a/WebContent/public/css/message.css +++ b/WebContent/public/css/message.css @@ -1,133 +1,141 @@ -body{ - background: white; - color: #DDD; - font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; +body { + background: white; /* 设置背景颜色为白色 */ + color: #DDD; /* 设置文本颜色为浅灰色 */ + font-family: 'Helvetica', 'Lucida Grande', 'Arial', sans-serif; /* 设置字体 */ } -.border{ - height: 99%; - width: 30%; + +.border { + height: 99%; /* 设置高度为父容器的99% */ + width: 30%; /* 设置宽度为父容器的30% */ } -.rain{ - height: 400px; - width: 35%; + +.rain { + height: 400px; /* 设置固定高度为400像素 */ + width: 35%; /* 设置宽度为父容器的35% */ } -/* Layout with mask */ -.rain{ - padding: 10px 12px 12px 10px; - -moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; - -webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; - box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; - margin: 100px auto; + +/* 使用遮罩布局 */ +.rain { + padding: 10px 12px 12px 10px; /* 设置内边距 */ + -moz-box-shadow: 10px 10px 10px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Firefox阴影效果 */ + -webkit-box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* Webkit阴影效果 */ + box-shadow: 8px 8px 8px rgba(255,255,255,1) inset, -9px -9px 8px rgba(255,255,255,1) inset; /* 标准阴影效果 */ + margin: 100px auto; /* 设置外边距，使元素居中 */ } -/* Artifical "border" to clear border to bypass mask */ -.border{ - padding: 1px; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; + +/* 人工“边框”以清除遮罩 */ +.border { + padding: 1px; /* 设置内边距 */ + -moz-border-radius: 5px; /* Firefox圆角效果 */ + -webkit-border-radius: 5px; /* Webkit圆角效果 */ + border-radius: 5px; /* 标准圆角效果 */ } .border, .rain, .border.start, -.rain.start{ - background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; - background-position: 0 0, 0 0, 0 0, 0 0; - /* Blue-ish Green Fallback for Mozilla */ +.rain.start { + background-repeat: repeat-x, repeat-x, repeat-x, repeat-x; /* 设置背景重复模式 */ + background-position: 0 0, 0 0, 0 0, 0 0; /* 设置背景位置 */ + /* Firefox下的蓝色渐变背景 */ background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%); - /* Add "Highlight" Texture to the Animation */ + /* 添加动画纹理 */ background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25))); - /* Starting Color */ + /* 起始颜色 */ background-color: #39f; - /* Just do something for IE-suck */ + /* IE滤镜效果 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 ); } -/* Non-keyframe fallback animation */ +/* 非关键帧动画回退 */ .border.end, -.rain.end{ - -moz-transition-property: background-position; - -moz-transition-duration: 30s; - -moz-transition-timing-function: linear; - -webkit-transition-property: background-position; - -webkit-transition-duration: 30s; - -webkit-transition-timing-function: linear; - -o-transition-property: background-position; - -o-transition-duration: 30s; - -o-transition-timing-function: linear; - transition-property: background-position; - transition-duration: 30s; - transition-timing-function: linear; - background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0; +.rain.end { + -moz-transition-property: background-position; /* Firefox过渡属性 */ + -moz-transition-duration: 30s; /* Firefox过渡持续时间 */ + -moz-transition-timing-function: linear; /* Firefox过渡时间函数 */ + -webkit-transition-property: background-position; /* Webkit过渡属性 */ + -webkit-transition-duration: 30s; /* Webkit过渡持续时间 */ + -webkit-transition-timing-function: linear; /* Webkit过渡时间函数 */ + -o-transition-property: background-position; /* Opera过渡属性 */ + -o-transition-duration: 30s; /* Opera过渡持续时间 */ + -o-transition-timing-function: linear; /* Opera过渡时间函数 */ + transition-property: background-position; /* 标准过渡属性 */ + transition-duration: 30s; /* 标准过渡持续时间 */ + transition-timing-function: linear; /* 标准过渡时间函数 */ + background-position: -5400px 0, -4800px 0, -4200px 0, -3600px 0; /* 设置背景位置 */ } -/* Keyfram-licious animation */ +/* 关键帧动画 */ @-webkit-keyframes colors { - 0% {background-color: pink;} - 15% {background-color: hotpink;} - 30% {background-color: rosybrown;} - 45% {background-color: steelblue;} - 60% {background-color: black;} - 75% {background-color: #c9c0d3;} - 90% {background-color: darkgreen;} - 100% {background-color: orange;} + 0% {background: pink;} /* 开始时的颜色 */ + 15% {background: hotpink;} /* 15%时的颜色 */ + 30% {background: rosybrown;} /* 30%时的颜色 */ + 45% {background: steelblue;} /* 45%时的颜色 */ + 60% {background: black;} /* 60%时的颜色 */ + 75% {background: #c9c0d3;} /* 75%时的颜色 */ + 90% {background: darkgreen;} /* 90%时的颜色 */ + 100% {background: orange;} /* 结束时的颜色 */ } -.border,.rain{ - -webkit-animation-direction: normal; - -webkit-animation-duration: 20s; - -webkit-animation-iteration-count: infinite; - -webkit-animation-name: colors; - -webkit-animation-timing-function: ease; + +.border, +.rain { + -webkit-animation-direction: normal; /* Webkit动画方向 */ + -webkit-animation-duration: 20s; /* Webkit动画持续时间 */ + -webkit-animation-iteration-count: infinite; /* Webkit动画迭代次数 */ + -webkit-animation-timing-function: ease; /* Webkit动画时间函数 */ + -webkit-animation-name: colors; /* Webkit动画名称 */ } -/* In-Active State Style */ -.border.unfocus{ - background: #333 !important; - -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2); - -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2); - box-shadow: 0px 0px 15px rgba(255,255,255,.2); - -webkit-animation-name: none; +/* 无焦点状态样式 */ +.border.unfocus { + background: #333 !important; /* 强制背景颜色 */ + -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Firefox阴影效果 */ + -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* Webkit阴影效果 */ + box-shadow: 0px 0px 15px rgba(255,255,255,.2) inset; /* 标准阴影效果 */ + -webkit-animation-name: none; /* Webkit无动画 */ } -.rain.unfocus{ - background: #000 !important; - -webkit-animation-name: none; + +.rain.unfocus { + background: #000 !important; /* 强制背景颜色 */ + -webkit-animation-name: none; /* Webkit无动画 */ } -/* Regular Form Styles */ -form{ - background: darkred; - -moz-border-radius: 5px; - -webkit-border-radius: 5px; - border-radius: 5px; - height: 100%; - width: 335%; - background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, white, lightblue); - background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue)); +/* 表单样式 */ +form { + background: darkred; /* 设置背景颜色为深红色 */ + -moz-border-radius: 5px; /* Firefox圆角效果 */ + -webkit-border-radius: 5px; /* Webkit圆角效果 */ + border-radius: 5px; /* 标准圆角效果 */ + height: 100%; /* 设置高度为父容器的100% */ + width: 335%; /* 设置宽度为父容器的335% */ + background: -moz-radial-gradient(center 46% 90deg, closest-corner, white, lightblue); /* Firefox径向渐变背景 */ + background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(lightcyan), to(lightblue));/* Webkit径向渐变背景 */ } -form label{ - display: block; - padding: 10px 10px 5px 15px; - font-size: 20px; - color: hotpink; + +form label { + display: block; /* 块级显示 */ + padding: 10px 15px 10px 15px; /* 设置内边距 */ + font-size: 20px; /* 设置字体大小 */ + color: hotpink; /* 设置字体颜色 */ } -form textarea{ - display: block; - margin: 5px 10px 10px 15px; - width: 85%; - background: #f0f8ff; - -moz-box-shadow: 0px 0px 4px grey inset; - -webkit-box-shadow: 0px 0px 4px grey inset; - box-shadow: 0px 0px 4px grey inset; - outline: 1px solid black; - border: 1px solid grey; - padding: 5px; - color: black; - font-size: 16px; +form input { + display: block; /* 块级显示 */ + margin: 5px 10px 10px 15px; /* 设置外边距 */ + width: 85%; /* 设置宽度为父容器的85% */ + background: #f0f8ff; /* 设置背景颜色 */ + -moz-box-shadow: 0px 0px 4px grey inset; /* Firefox阴影效果 */ + -webkit-box-shadow: 0px 0px 4px grey inset; /* Webkit阴影效果 */ + box-shadow: 0px 0px 4px grey inset; /* 标准阴影效果 */ + outline: 1px solid black; /* 设置轮廓线 */ + border: 1px solid grey; /* 设置边框 */ + padding: 5px; /* 设置内边距 */ + color: black; /* 设置字体颜色 */ + font-size: 16px; /* 设置字体大小 */ } -form textarea:focus{ - outline: 2px solid white; - color: #c0c0c0; - background-color: white; + +form input:focus { + outline: 2px solid white; /* 设置聚焦时的轮廓线 */ + color: #c0c0c0; /* 设置聚焦时的字体颜色 */ + background-color: white; /* 设置聚焦时的背景颜色 */ } - \ No newline at end of file diff --git a/WebContent/reader/01main.jsp b/WebContent/reader/01main.jsp index 6959c51..8cdc81f 100644 --- a/WebContent/reader/01main.jsp +++ b/WebContent/reader/01main.jsp @@ -1,91 +1,94 @@ <%@ page language="java" contentType="text/html; charset=UTF-8" - pageEncoding="UTF-8"%> + pageEncoding="UTF-8"%> - - - - - - - - - - + <% - if(session.getAttribute("reader")!=null && session.getAttribute("reader_first")!=null &&session.getAttribute("reader_first").equals("1")){ - session.setAttribute("reader_first", "2"); - //session.setAttribute("reader", session.getAttribute("reader")); - + // 检查会话属性 'reader' 和 'reader_first' 是否不为空且 'reader_first' 等于 "1" + if(session.getAttribute("reader") != null && session.getAttribute("reader_first") != null && session.getAttribute("reader_first").equals("1")){ + // 将 'reader_first' 设置为 "2"，表示用户已经访问过 + session.setAttribute("reader_first", "2"); + // 可选地，可以在会话中保留 reader 属性 + // session.setAttribute("reader", session.getAttribute("reader")); + } %> - - -<% - } -%> - +