diff --git a/WebContent/js/bootstrap.js b/WebContent/js/bootstrap.js index 8a2e99a..d89aebe 100644 --- a/WebContent/js/bootstrap.js +++ b/WebContent/js/bootstrap.js @@ -5,13 +5,17 @@ */ if (typeof jQuery === 'undefined') { + // 如果未定义jQuery，则抛出错误 throw new Error('Bootstrap\'s JavaScript requires jQuery') } +function ($) { + // 使用严格模式 'use strict'; var version = $.fn.jquery.split(' ')[0].split('.') + // 获取jQuery版本号并分割成数组 if ((version[0] < 2 && version[1] < 9) || (version[0] == 1 && version[1] == 9 && version[2] < 1) || (version[0] > 3)) { + // 检查jQuery版本是否在1.9.1以上但低于4之间 throw new Error('Bootstrap\'s JavaScript requires jQuery version 1.9.1 or higher, but lower than version 4') } }(jQuery); @@ -32,6 +36,8 @@ if (typeof jQuery === 'undefined') { // ============================================================ function transitionEnd() { + // 创建一个临时元素用于检测CSS过渡支持 + var el = document.createElement('bootstrap') var transEndEventNames = { @@ -40,14 +46,16 @@ if (typeof jQuery === 'undefined') { OTransition : 'oTransitionEnd otransitionend', transition : 'transitionend' } - + // 定义不同浏览器的过渡结束事件名称 for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } + // 如果找到支持的过渡结束事件，返回对应的事件名称 } } return false // explicit for ie8 ( ._.) + // 对于不支持过渡的浏览器，显式返回false } // http://blog.alexmaccaw.com/css-transitions @@ -55,23 +63,30 @@ if (typeof jQuery === 'undefined') { var called = false var $el = this $(this).one('bsTransitionEnd', function () { called = true }) + // 绑定一次性事件，当过渡结束时设置called为true var callback = function () { if (!called) $($el).trigger($.support.transition.end) } + // 定义回调函数，如果called为false，触发过渡结束事件 setTimeout(callback, duration) + // 设置定时器，在指定持续时间后执行回调函数 return this } $(function () { $.support.transition = transitionEnd() +// 检测并设置CSS过渡支持情况 if (!$.support.transition) return +// 如果不支持过渡，直接返回 $.event.special.bsTransitionEnd = { bindType: $.support.transition.end, delegateType: $.support.transition.end, handle: function (e) { if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments) + // 如果事件目标与当前元素匹配，调用处理函数 } } + // 定义自定义事件bsTransitionEnd，用于处理过渡结束事件 }) }(jQuery); @@ -94,38 +109,42 @@ if (typeof jQuery === 'undefined') { var dismiss = '[data-dismiss="alert"]' var Alert = function (el) { $(el).on('click', dismiss, this.close) + // 绑定点击事件，当点击带有data-dismiss属性的元素时，调用close方法 } Alert.VERSION = '3.3.7' - + // 定义Alert类的版本号 Alert.TRANSITION_DURATION = 150 + // 定义过渡动画的持续时间为150毫秒 Alert.prototype.close = function (e) { var $this = $(this) var selector = $this.attr('data-target') - + // 获取data-target属性的值作为选择器 if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 } - +// 如果data-target不存在，则获取href属性的值作为选择器，并去除URL中的其他部分以兼容IE7 var $parent = $(selector === '#' ? [] : selector) - +// 根据选择器获取父元素，如果选择器为#，则返回空数组 if (e) e.preventDefault() - +// 如果存在事件对象，阻止默认行为 if (!$parent.length) { $parent = $this.closest('.alert') + // 如果父元素不存在，尝试查找最近的祖先元素 } $parent.trigger(e = $.Event('close.bs.alert')) if (e.isDefaultPrevented()) return - + // 如果事件被阻止，则返回 $parent.removeClass('in') - + // 移除父元素的'in'类，表示隐藏元素 function removeElement() { // detach from parent, fire event then clean up data $parent.detach().trigger('closed.bs.alert').remove() + // 从父元素中分离，触发关闭事件，然后移除元素及其数据 } $.support.transition && $parent.hasClass('fade') ? @@ -133,6 +152,7 @@ if (typeof jQuery === 'undefined') { .one('bsTransitionEnd', removeElement) .emulateTransitionEnd(Alert.TRANSITION_DURATION) : removeElement() + // 如果支持过渡且父元素有'fade'类，则在过渡结束后移除元素；否则立即移除元素 } @@ -140,34 +160,36 @@ if (typeof jQuery === 'undefined') { // ======================= function Plugin(option) { + // 遍历每一个匹配的元素，并执行回调函数 return this.each(function () { - var $this = $(this) - var data = $this.data('bs.alert') + var $this = $(this); // 将当前元素包装成jQuery对象 + var data = $this.data('bs.'); // 获取元素的'bs.'数据 - if (!data) $this.data('bs.alert', (data = new Alert(this))) - if (typeof option == 'string') data[option].call($this) - }) + // 如果元素没有'bs.'数据，则创建一个新的Alert实例并存储在'bs.'数据中 + if (!data) $this.data('bs.', (data = new Alert(this))); + // 如果传入的option是字符串，则调用对应的方法 + if (typeof option == 'string') data[option].call($this); + }); } - var old = $.fn.alert + var old = $.fn.button// 保存旧的插件定义 - $.fn.alert = Plugin - $.fn.alert.Constructor = Alert + $.fn.button = Plugin// 将Plugin函数赋值给jQuery的fn属性 + $.fn.button.Constructor = Button// 将Alert构造函数赋值给jQuery的fn属性的Constructor属性 +// ALERT NO CONFLICT +// ================= - // ALERT NO CONFLICT - // ================= - - $.fn.alert.noConflict = function () { - $.fn.alert = old + $.fn.button.noConflict = function () { + $.fn.button = old return this - } + }; - // ALERT DATA-API - // ============== +// ALERT DATA-API +// ============== - $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close) + $(document).on('click.bs..data-api', dismiss, Alert.prototype.close); // 为文档绑定点击事件，当点击dismiss时，调用Alert原型的close方法 }(jQuery); @@ -179,7 +201,6 @@ if (typeof jQuery === 'undefined') { * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * ======================================================================== */ - +function ($) { 'use strict'; @@ -187,115 +208,122 @@ if (typeof jQuery === 'undefined') { // ============================== var Button = function (element, options) { - this.$element = $(element) - this.options = $.extend({}, Button.DEFAULTS, options) - this.isLoading = false + this.$element = $(element); // 将DOM元素包装成jQuery对象 + this.options = $.extend({}, Button.DEFAULTS, options); // 合并默认选项和用户选项 + this.isLoading = false; // 初始化加载状态为false } - Button.VERSION = '3.3.7' + Button.VERSION = '3.3.7'; // 设置版本号 Button.DEFAULTS = { - loadingText: 'loading...' + loadingText: 'loading...' // 设置默认加载文本 } Button.prototype.setState = function (state) { - var d = 'disabled' - var $el = this.$element - var val = $el.is('input') ? 'val' : 'html' - var data = $el.data() + var d = 'disabled'; // 禁用状态的CSS类名 + var $el = this.$element; // 按钮的jQuery对象 + var val = $el.is('input') ? 'val' : 'html'; // 根据元素类型选择使用val或html方法 + var data = $el.data(); // 获取元素的数据 - state += 'Text' + state += 'Text'; // 拼接状态文本后缀 - if (data.resetText == null) $el.data('resetText', $el[val]()) + // 如果resetText数据不存在，则保存当前值到resetText数据中 + if (data.resetText == null) $el.data('resetText', $el[val]()); // push to event loop to allow forms to submit setTimeout($.proxy(function () { - $el[val](data[state] == null ? this.options[state] : data[state]) + // 设置按钮文本或HTML内容 + $el[val](data[state] == null ? this.options[state] : data[state]); + // 如果状态是loadingText，则设置加载状态和禁用样式 if (state == 'loadingText') { - this.isLoading = true - $el.addClass(d).attr(d, d).prop(d, true) + this.isLoading = true; + $el.addClass(d).attr(d, d).prop(d, true); } else if (this.isLoading) { - this.isLoading = false - $el.removeClass(d).removeAttr(d).prop(d, false) + // 如果当前状态不是loadingText且之前是加载状态，则取消加载状态和禁用样式 + this.isLoading = false; + $el.removeClass(d).removeAttr(d).prop(d, false); } - }, this), 0) + }, this), 0); } Button.prototype.toggle = function () { - var changed = true - var $parent = this.$element.closest('[data-toggle="buttons"]') + var changed = true; // 标记状态是否改变 + var $parent = this.$element.closest('[data-toggle="buttons"]'); // 查找最近的父级按钮组容器 if ($parent.length) { - var $input = this.$element.find('input') + var $input = this.$element.find('input'); // 查找按钮内的输入元素 if ($input.prop('type') == 'radio') { - if ($input.prop('checked')) changed = false - $parent.find('.active').removeClass('active') - this.$element.addClass('active') + // 如果输入类型是单选按钮且已选中，则不改变状态 + if ($input.prop('checked')) changed = false; + $parent.find('.active').removeClass('active'); // 移除其他按钮的激活状态 + this.$element.addClass('active'); // 设置当前按钮为激活状态 } else if ($input.prop('type') == 'checkbox') { - if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false - this.$element.toggleClass('active') + // 如果输入类型是复选框且状态与激活状态不一致，则不改变状态 + if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false; + this.$element.toggleClass('active'); // 切换当前按钮的激活状态 } - $input.prop('checked', this.$element.hasClass('active')) - if (changed) $input.trigger('change') + $input.prop('checked', this.$element.hasClass('active')); // 同步输入元素的选中状态 + if (changed) $input.trigger('change'); // 如果状态改变，触发change事件 } else { - this.$element.attr('aria-pressed', !this.$element.hasClass('active')) - this.$element.toggleClass('active') + // 如果按钮不在按钮组内，直接切换aria-pressed属性和激活状态 + this.$element.attr('aria-pressed', !this.$element.hasClass('active')); + this.$element.toggleClass('active'); } } - // BUTTON PLUGIN DEFINITION // ======================== function Plugin(option) { return this.each(function () { - var $this = $(this) - var data = $this.data('bs.button') - var options = typeof option == 'object' && option + var $this = $(this); // 将当前元素包装成jQuery对象 + var data = $this.data('bs.button'); // 获取元素的bs.button数据 + var options = typeof option == 'object' && option; // 如果option是对象，则赋值给options变量 - if (!data) $this.data('bs.button', (data = new Button(this, options))) + // 如果元素没有bs.button数据，则创建新的Button实例并存储在bs.button数据中 + if (!data) $this.data('bs.button', (data = new Button(this, options))); - if (option == 'toggle') data.toggle() - else if (option) data.setState(option) - }) + // 如果option是toggle，则调用toggle方法；否则如果option存在，则调用setState方法 + if (option == 'toggle') data.toggle(); + else if (option) data.setState(option); + }); } - var old = $.fn.button - - $.fn.button = Plugin - $.fn.button.Constructor = Button + var old = $.fn.button; // 保存旧的按钮插件定义 + $.fn.button = Plugin; // 将Plugin函数赋值给jQuery的fn属性的button方法 + $.fn.button.Constructor = Button; // 将Button构造函数赋值给jQuery的fn属性的button方法的Constructor属性 // BUTTON NO CONFLICT // ================== $.fn.button.noConflict = function () { - $.fn.button = old - return this - } - + $.fn.button = old; // 恢复旧的按钮插件定义 + return this; // 返回当前对象以支持链式调用 + }; // BUTTON DATA-API // =============== $(document) - .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { - var $btn = $(e.target).closest('.btn') - Plugin.call($btn, 'toggle') - if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) { - // Prevent double click on radios, and the double selections (so cancellation) on checkboxes - e.preventDefault() - // The target component still receive the focus - if ($btn.is('input,button')) $btn.trigger('focus') - else $btn.find('input:visible,button:visible').first().trigger('focus') - } - }) - .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { - $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)) - }) + .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) { + var $btn = $(e.target).closest('.btn'); // 查找点击目标最近的按钮元素 + Plugin.call($btn, 'toggle'); // 调用Plugin的toggle方法 + if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) { + // 如果点击的不是单选按钮或复选框，则阻止默认行为（防止双击） + e.preventDefault(); + // 如果目标组件是按钮或输入元素，则触发焦点事件 + if ($btn.is('input,button')) $btn.trigger('focus'); + else $btn.find('input:visible,button:visible').first().trigger('focus'); + } + }) + .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) { + // 根据事件类型切换按钮的焦点样式 + $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type)); + }); +}(jQuery); // 立即执行函数，传入jQuery对象作为参数，确保代码在jQuery加载后执行。 -}(jQuery); /* ======================================================================== * Bootstrap: carousel.js v3.3.7 @@ -307,168 +335,182 @@ if (typeof jQuery === 'undefined') { +function ($) { - 'use strict'; + 'use strict'; // 使用严格模式，避免一些常见的错误 // CAROUSEL CLASS DEFINITION // ========================= var Carousel = function (element, options) { - this.$element = $(element) - this.$indicators = this.$element.find('.carousel-indicators') - this.options = options - this.paused = null - this.sliding = null - this.interval = null - this.$active = null - this.$items = null - + this.$element = $(element) // 将传入的元素转换为jQuery对象 + this.$indicators = this.$element.find('.carousel-indicators') // 查找轮播图的指示器元素 + this.options = options // 保存传入的选项参数 + this.paused = null // 初始化暂停状态为null + this.sliding = null // 初始化滑动状态为null + this.interval = null // 初始化定时器为null + this.$active = null // 初始化当前活动项为null + this.$items = null // 初始化所有项目为null + + // 如果选项中启用了键盘控制，绑定键盘事件处理函数 this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this)) + // 如果选项中设置了鼠标悬停暂停，并且设备不支持触摸事件，绑定鼠标进入和离开事件处理函数 this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element - .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) - .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) + .on('mouseenter.bs.carousel', $.proxy(this.pause, this)) + .on('mouseleave.bs.carousel', $.proxy(this.cycle, this)) } - Carousel.VERSION = '3.3.7' + Carousel.VERSION = '3.3.7' // 定义轮播组件的版本号 - Carousel.TRANSITION_DURATION = 600 + Carousel.TRANSITION_DURATION = 600 // 定义过渡动画的持续时间 Carousel.DEFAULTS = { - interval: 5000, - pause: 'hover', - wrap: true, - keyboard: true + interval: 5000, // 默认自动播放间隔时间为5秒 + pause: 'hover', // 默认在鼠标悬停时暂停 + wrap: true, // 默认支持循环播放 + keyboard: true // 默认启用键盘控制 } + // 键盘事件处理函数 Carousel.prototype.keydown = function (e) { - if (/input|textarea/i.test(e.target.tagName)) return + if (/input|textarea/i.test(e.target.tagName)) return // 如果焦点在输入框或文本区域，不处理键盘事件 switch (e.which) { - case 37: this.prev(); break - case 39: this.next(); break - default: return + case 37: this.prev(); break // 左箭头键切换到上一个项目 + case 39: this.next(); break // 右箭头键切换到下一个项目 + default: return // 其他按键不处理 } - e.preventDefault() + e.preventDefault() // 阻止默认行为 } + // 开始自动播放 Carousel.prototype.cycle = function (e) { - e || (this.paused = false) + e || (this.paused = false) // 如果没有传入事件对象，设置暂停状态为false - this.interval && clearInterval(this.interval) + this.interval && clearInterval(this.interval) // 清除之前的定时器 this.options.interval - && !this.paused - && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) + && !this.paused + && (this.interval = setInterval($.proxy(this.next, this), this.options.interval)) // 根据选项中的间隔时间设置新的定时器 - return this + return this // 返回当前实例以支持链式调用 } + // 获取项目的索引 Carousel.prototype.getItemIndex = function (item) { - this.$items = item.parent().children('.item') - return this.$items.index(item || this.$active) + this.$items = item.parent().children('.item') // 获取所有项目 + return this.$items.index(item || this.$active) // 返回指定项目的索引，如果未指定则返回当前活动的项目索引 } + // 根据方向获取下一个项目 Carousel.prototype.getItemForDirection = function (direction, active) { - var activeIndex = this.getItemIndex(active) - var willWrap = (direction == 'prev' && activeIndex === 0) - || (direction == 'next' && activeIndex == (this.$items.length - 1)) - if (willWrap && !this.options.wrap) return active - var delta = direction == 'prev' ? -1 : 1 - var itemIndex = (activeIndex + delta) % this.$items.length - return this.$items.eq(itemIndex) + var activeIndex = this.getItemIndex(active) // 获取当前活动的项目索引 + var willWrap = (direction == 'prev' && activeIndex === 0) // 判断是否要循环到最后一个项目 + || (direction == 'next' && activeIndex == (this.$items.length - 1)) // 判断是否要循环到第一个项目 + if (willWrap && !this.options.wrap) return active // 如果不允许循环播放，直接返回当前活动项目 + var delta = direction == 'prev' ? -1 : 1 // 根据方向计算索引变化量 + var itemIndex = (activeIndex + delta) % this.$items.length // 计算下一个项目的索引 + return this.$items.eq(itemIndex) // 返回下一个项目 } + // 切换到指定位置的项目 Carousel.prototype.to = function (pos) { - var that = this - var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) - - if (pos > (this.$items.length - 1) || pos < 0) return + var that = this // 保存当前实例的引用 + var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active')) // 获取当前活动的项目索引并更新活动项目 - if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid" - if (activeIndex == pos) return this.pause().cycle() + if (pos > (this.$items.length - 1) || pos < 0) return // 如果指定的位置超出范围，直接返回 + if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // 如果正在滑动，等待滑动完成后再切换到指定位置 + if (activeIndex == pos) return this.pause().cycle() // 如果已经是指定位置，暂停并重新开始自动播放 - return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos)) + return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos)) // 根据位置关系切换到指定位置的项目 } + // 暂停自动播放 Carousel.prototype.pause = function (e) { - e || (this.paused = true) + e || (this.paused = true) // 如果没有传入事件对象，设置暂停状态为true if (this.$element.find('.next, .prev').length && $.support.transition) { - this.$element.trigger($.support.transition.end) - this.cycle(true) + this.$element.trigger($.support.transition.end) // 如果支持CSS3过渡效果，触发过渡结束事件 + this.cycle(true) // 重新开始自动播放 } - this.interval = clearInterval(this.interval) + this.interval = clearInterval(this.interval) // 清除定时器 - return this + return this // 返回当前实例以支持链式调用 } + // 切换到下一个或上一个项目 Carousel.prototype.next = function () { - if (this.sliding) return - return this.slide('next') + if (this.sliding) return // 如果正在滑动，直接返回 + return this.slide('next') // 切换到下一个项目 } + // 切换到上一个项目 Carousel.prototype.prev = function () { - if (this.sliding) return - return this.slide('prev') + if (this.sliding) return // 如果正在滑动，直接返回 + return this.slide('prev') // 切换到上一个项目 } + // 执行滑动操作 Carousel.prototype.slide = function (type, next) { - var $active = this.$element.find('.item.active') - var $next = next || this.getItemForDirection(type, $active) - var isCycling = this.interval - var direction = type == 'next' ? 'left' : 'right' - var that = this - - if ($next.hasClass('active')) return (this.sliding = false) - - var relatedTarget = $next[0] - var slideEvent = $.Event('slide.bs.carousel', { - relatedTarget: relatedTarget, - direction: direction + var $active = this.$element.find('.item.active') // 获取当前活动的项目 + var $next = next || this.getItemForDirection(type, $active) // 获取下一个项目，如果没有指定则根据方向获取 + var isCycling = this.interval // 检查是否正在自动播放 + var direction = type == 'next' ? 'left' : 'right' // 根据类型确定滑动方向 + var that = this // 保存当前实例的引用 + + if ($next.hasClass('active')) return (this.sliding = false) // 如果下一个项目已经是活动状态，直接返回 + + var slideEvent = $.Event('slide.bs.carousel', { // 创建滑动事件对象 + relatedTarget: $next[0], // 设置相关目标为下一个项目 + direction: direction // 设置滑动方向 }) - this.$element.trigger(slideEvent) - if (slideEvent.isDefaultPrevented()) return + this.$element.trigger(slideEvent) // 触发滑动事件 + if (slideEvent.isDefaultPrevented()) return // 如果事件被阻止，直接返回 - this.sliding = true + this.sliding = true // 设置滑动状态为true - isCycling && this.pause() + isCycling && this.pause() // 如果正在自动播放，暂停自动播放 - if (this.$indicators.length) { - this.$indicators.find('.active').removeClass('active') - var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]) - $nextIndicator && $nextIndicator.addClass('active') + if (this.$indicators.length) { // 如果存在指示器元素 + this.$indicators.find('.active').removeClass('active') // 移除当前活动指示器的激活状态 + var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)]) // 获取下一个项目对应的指示器元素 + $nextIndicator && $nextIndicator.addClass('active') // 如果存在下一个指示器元素，添加激活状态 } - var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid" - if ($.support.transition && this.$element.hasClass('slide')) { - $next.addClass(type) - $next[0].offsetWidth // force reflow - $active.addClass(direction) - $next.addClass(direction) + var slidEvent = $.Event('slid.bs.carousel', { // 创建已滑动事件对象 + relatedTarget: $next[0], // 设置相关目标为下一个项目 + direction: direction // 设置滑动方向 + }) // yes, "slid" + if ($.support.transition && this.$element.hasClass('slide')) { // 如果支持CSS3过渡效果且轮播图元素具有slide类名 + $next.addClass(type) // 添加滑动类型类名（next或prev） + $next[0].offsetWidth // 强制浏览器重新计算元素的宽度和高度，以触发重绘和过渡效果 + $active.addClass(direction) // 添加滑动方向类名（left或right） + $next.addClass(direction) // 添加滑动方向类名（left或right） $active - .one('bsTransitionEnd', function () { - $next.removeClass([type, direction].join(' ')).addClass('active') - $active.removeClass(['active', direction].join(' ')) - that.sliding = false - setTimeout(function () { - that.$element.trigger(slidEvent) - }, 0) - }) - .emulateTransitionEnd(Carousel.TRANSITION_DURATION) - } else { - $active.removeClass('active') - $next.addClass('active') - this.sliding = false - this.$element.trigger(slidEvent) + .one('bsTransitionEnd', function () { // 监听过渡结束事件 + $next.removeClass([type, direction].join(' ')).addClass('active') // 移除滑动类型和方向类名，添加激活状态 + $active.removeClass(['active', direction].join(' ')) // 移除激活状态和方向类名 + that.sliding = false // 设置滑动状态为false + setTimeout(function () { // 延迟触发已滑动事件，以确保过渡效果完成 + that.$element.trigger(slidEvent) // 触发已滑动事件 + }, 0) + }) + .emulateTransitionEnd(Carousel.TRANSITION_DURATION) // 模拟过渡结束事件，以触发过渡效果 + } else { // 如果不支持CSS3过渡效果或轮播图元素没有slide类名 + $active.removeClass('active') // 移除当前活动项目的激活状态 + $next.addClass('active') // 添加下一个项目的激活状态 + this.sliding = false // 设置滑动状态为false + this.$element.trigger(slidEvent) // 触发已滑动事件 } - isCycling && this.cycle() + isCycling && this.cycle() // 如果正在自动播放，重新开始自动播放 - return this + return this // 返回当前实例以支持链式调用 } + + // CAROUSEL PLUGIN DEFINITION // ========================== 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")); + } %> - - -<% - } -%> - +