|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<!-- 这是JSP页面的指令，用于设置页面的内容类型为HTML，字符编码为UTF-8，并且指定使用的语言是Java -->
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置页面的字符编码，不过这里的写法不太常规，<?php...?>这种语法一般是用在PHP中，在这里可能是一种错误的混用，正常在HTML中可以直接写固定值如<meta charset="UTF-8"> -->
|
|
|
<meta charset="<?php $this->options->charset();?>">
|
|
|
<!-- 指示浏览器以IE的最高版本或者Chrome 1的模式来渲染页面，用于解决不同浏览器的兼容性问题 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
|
|
|
<!-- 指示浏览器使用WebKit内核来渲染页面 -->
|
|
|
<meta name="renderer" content="webkit">
|
|
|
<!-- 设置视口相关属性，规定页面宽度等于设备宽度，初始缩放比例、最小缩放比例、最大缩放比例都为1.0，禁止用户手动缩放页面 -->
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
<!-- 指示浏览器不要对页面进行缓存转换，保持获取到的原始内容 -->
|
|
|
<meta http-equiv="Cache-Control" content="no-transform"/>
|
|
|
<!-- 定义页面的图标链接 -->
|
|
|
<link rel="icon" href="https://yoyling.com/favicon.ico">
|
|
|
|
|
|
<title>ERROR</title>
|
|
|
<style>
|
|
|
body{
|
|
|
margin:0;padding:0;
|
|
|
font-family: PingFang SC,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
|
|
|
/* 设置页面主体的外边距和内边距为0，定义字体族，优先使用苹方字体，其次是微软雅黑、文泉驿微米黑等无衬线字体 */
|
|
|
}
|
|
|
a, button.submit {
|
|
|
color:#6E7173;
|
|
|
text-decoration:none;
|
|
|
-webkit-transition:all.1s ease-in;
|
|
|
-moz-transition:all.1s ease-in;
|
|
|
-o-transition:all.1s ease-in;
|
|
|
transition:all.1s ease-in;
|
|
|
/* 设置链接和特定按钮的文本颜色为灰色，去除下划线，并且定义了在不同浏览器下过渡效果的属性，当元素状态改变时（如鼠标悬停等）会在0.1秒内平滑过渡样式变化 */
|
|
|
}
|
|
|
a:hover, a:active {
|
|
|
color:#6E7173;
|
|
|
/* 当鼠标悬停或者激活（比如点击按住时）链接元素时，保持文本颜色为灰色 */
|
|
|
}
|
|
|
.body404{
|
|
|
position: absolute;
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
background:#fff;
|
|
|
background-size: auto 100%;
|
|
|
/* 定义一个类名为body404的元素，设置其绝对定位，占满整个页面的高度和宽度，背景颜色为白色，背景图片尺寸自适应高度为100%（这里没看到背景图片相关设置，可能后续会添加或者有遗漏情况） */
|
|
|
}
|
|
|
.body-about.body404{
|
|
|
background:#fff;
|
|
|
/* 当父元素有body-about类时，其内部的body404元素背景颜色设置为白色，可能用于特定页面布局区分样式 */
|
|
|
}
|
|
|
.site-name404 {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
letter-spacing: 2px;
|
|
|
font-size: 150px;
|
|
|
line-height: 1;
|
|
|
font-weight: 100;
|
|
|
color: #f35626;
|
|
|
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
-webkit-animation: hue 60s infinite linear;
|
|
|
/* 定义一个类名为site-name404的元素，使其水平居中，文本居中对齐，设置字间距、字体大小、行高、字体粗细等样式属性，文本颜色通过渐变背景和裁剪、填充等设置来实现渐变文字效果，并且添加了一个名为hue的动画，持续60秒，无限循环，线性播放 */
|
|
|
}
|
|
|
.site-name404 h1{
|
|
|
margin: 0 0 10px;
|
|
|
font-size:50px;
|
|
|
line-height:1.2;
|
|
|
/* 针对site-name404内部的h1元素设置外边距、字体大小和行高样式 */
|
|
|
}
|
|
|
.title404 span{
|
|
|
font-size: 15px;
|
|
|
width: 2px;
|
|
|
/* 设置类名为title404内部的span元素的字体大小和宽度样式 */
|
|
|
}
|
|
|
.title404 p{
|
|
|
font-size: 20px;
|
|
|
line-height:1.5;
|
|
|
margin:0;
|
|
|
color:#7b8993;
|
|
|
/* 设置类名为title404内部的p元素的字体大小、行高、外边距和文本颜色样式 */
|
|
|
}
|
|
|
.info404{
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
text-align: center;
|
|
|
width: 100%;
|
|
|
margin-top: -160px;
|
|
|
/* 定义一个类名为info404的元素，绝对定位在页面垂直居中的位置（通过top: 50%和负的外边距来实现精准居中），文本居中对齐，宽度占满整个页面 */
|
|
|
}
|
|
|
.body-about.info404{
|
|
|
margin-top: -180px;
|
|
|
/* 当父元素有body-about类时，其内部的info404元素调整上边距，用于特定页面布局下的垂直位置微调 */
|
|
|
}
|
|
|
#footer404{
|
|
|
margin-top:30px;
|
|
|
font-size:10px;
|
|
|
/* 设置id为footer404的元素，距离上方元素有30px的外边距，字体大小为10px */
|
|
|
}
|
|
|
.index404 {
|
|
|
margin-top: 24px;
|
|
|
display: inline-block;
|
|
|
white-space: nowrap;
|
|
|
cursor: pointer;
|
|
|
letter-spacing: 1px;
|
|
|
font-size: 14px;
|
|
|
-moz-user-select: -moz-none;
|
|
|
-webkit-user-select: none;
|
|
|
-ms-user-select: none;
|
|
|
-o-user-select: none;
|
|
|
user-select: none;
|
|
|
text-shadow: none;
|
|
|
border: 2px solid #7b8993;
|
|
|
line-height: 36px;
|
|
|
text-align: center;
|
|
|
height: 36px;
|
|
|
padding: 0 25px;
|
|
|
border-radius: 25px;
|
|
|
background-color: #fff;
|
|
|
color: #7b8993;
|
|
|
/* 定义类名为index404的元素样式，设置上边距、显示为行内块元素、禁止文本换行、鼠标指针变为手型、字间距、字体大小等诸多样式属性，包括边框、行高、文本对齐、高度、内边距、圆角、背景颜色和文本颜色等，用于呈现一个特定外观和交互效果的按钮样式 */
|
|
|
}
|
|
|
.icon-about{
|
|
|
padding: 10px 0 25px;
|
|
|
/* 定义类名为icon-about的元素的内边距样式，用于布局调整 */
|
|
|
}
|
|
|
.icon-about a{
|
|
|
font-size: 20px;
|
|
|
margin: 5px;
|
|
|
color: #fff;
|
|
|
background-color: #000;
|
|
|
border-radius: 100%;
|
|
|
padding: 6px;
|
|
|
/* 定义类名为icon-about内部的链接元素样式，设置字体大小、外边距、文本颜色、背景颜色、边框圆角和内边距，用于呈现特定外观的图标样式（可能是社交媒体图标之类的元素） */
|
|
|
}
|
|
|
@-webkit-keyframes hue {
|
|
|
from {
|
|
|
-webkit-filter: hue-rotate(0deg);
|
|
|
}
|
|
|
|
|
|
to {
|
|
|
-webkit-filter: hue-rotate(-360deg);
|
|
|
}
|
|
|
/* 定义名为hue的动画关键帧，从初始状态（色相旋转0度）到结束状态（色相旋转-360度），用于实现文本颜色渐变的动画效果 */
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="body404">
|
|
|
<div class="info404">
|
|
|
<header id="header404" class="clearfix">
|
|
|
<div class="site-name404">Time Out</div>
|
|
|
<!-- 创建一个id为header404的头部元素，应用clearfix类（可能用于清除浮动相关布局，不过没看到具体的clearfix样式定义），内部包含一个类名为site-name404的元素，显示文本"Time Out" -->
|
|
|
</header>
|
|
|
<section>
|
|
|
<div class="title404">
|
|
|
<p>I have no secret of success but hard work.</p>
|
|
|
<!-- 在section元素内，有一个类名为title404的div元素，内部包含一个段落元素显示相应的文本内容 -->
|
|
|
</div><a href="javascript:history.back()" class="index404">Go back</a>
|
|
|
<!-- 创建一个链接元素，点击时通过JavaScript的history.back()方法实现返回上一页的功能，应用index404类来呈现相应的样式 -->
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
|
|
</html> |
