|
|
<!-- saved from url=(0043)http://hi.baidu.com/com/error/?from=oldblog -->
|
|
|
<!-- 这看起来像是浏览器保存页面时添加的注释信息，用于标记页面原始的来源网址等相关信息，不过一般对页面功能无实质影响 -->
|
|
|
<HTML>
|
|
|
|
|
|
<HEAD>
|
|
|
<!-- 设置页面的标题为“nav”，该标题通常会显示在浏览器的标题栏中，方便用户识别当前页面的主题或功能 -->
|
|
|
<TITLE>nav</TITLE>
|
|
|
<!-- 引入一个图标文件（img目录下的windows.ico图标），设置为页面的图标（favicon），
|
|
|
rel属性表示关联关系，type属性指定图标文件的类型，用于在浏览器的标签页、书签栏等地方显示该图标，增强页面辨识度 -->
|
|
|
<link rel="stylesheet Icon" type=" image/x-icon" href="img/windows.ico">
|
|
|
<!-- 这可能是某种状态标识注释，写着“STATUS OK”，或许是开发过程中用于标记页面相关状态的说明，实际对页面展示和功能没有直接作用 -->
|
|
|
<!--STATUS OK-->
|
|
|
<!-- 设置HTML页面的元信息（META），通过http-equiv属性指定等效的HTTP头部字段，这里设置Content-Type表示内容类型，
|
|
|
content属性具体定义了类型为“text/html”（即HTML格式页面）以及字符编码为“utf-8”，确保页面能正确显示字符，避免乱码 -->
|
|
|
<META http-equiv=Content-Type content="text/html; charset=utf-8">
|
|
|
|
|
|
<style>
|
|
|
.mod-page-body {
|
|
|
// 设置元素的高度为自动，根据内容自适应高度，同时设置了一些浏览器兼容性相关的属性，
|
|
|
// _height属性（可能针对特定浏览器）设置为100%，min-height设置最小高度为100%，zoom:1常用于解决IE浏览器下的一些布局问题，触发hasLayout属性
|
|
|
height: auto;
|
|
|
_height: 100%;
|
|
|
min-height: 100%;
|
|
|
zoom: 1;
|
|
|
}
|
|
|
|
|
|
.mod-page-body.mod-page-main.x-page-container {
|
|
|
// 设置内边距为0，外边距为0，同样zoom:1用于浏览器兼容性处理，用于清除浮动等布局相关问题，使该容器元素内部布局更规整
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
zoom: 1
|
|
|
}
|
|
|
|
|
|
.mod-page-body {
|
|
|
// 设置元素内文字颜色为#454545这种深灰色，并且再次添加zoom:1用于浏览器兼容性相关的布局处理
|
|
|
color: #454545;
|
|
|
zoom: 1
|
|
|
}
|
|
|
|
|
|
.mod-page-body.mod-page-main {
|
|
|
// 设置该元素的顶部内边距为50px，用于调整内部内容与顶部的距离，使页面布局更美观
|
|
|
padding-top: 50px
|
|
|
}
|
|
|
|
|
|
.mod-page-body.mod-page-main {
|
|
|
// 设置该元素的底部内边距为85px，类似顶部内边距的作用，调整内容与底部的距离，方便后续布局其他元素（如底部版权等信息）
|
|
|
padding-bottom: 85px
|
|
|
}
|
|
|
|
|
|
.wordwrap {
|
|
|
// 设置文字的换行规则，word-break: break-all表示允许单词内换行，
|
|
|
// word-wrap: break-word表示如果单词过长则强制换行，保证文字在容器内合理显示，避免溢出
|
|
|
word-break: break-all;
|
|
|
word-wrap: break-word
|
|
|
}
|
|
|
|
|
|
.pre.wordwrap {
|
|
|
// 对于<pre>元素应用.wordwrap类时，设置其空白符处理方式为pre-wrap，
|
|
|
// 即保留空白符的同时也能根据容器宽度自动换行，方便显示格式化的文本内容
|
|
|
white-space: pre-wrap
|
|
|
}
|
|
|
|
|
|
.clearfix:after {
|
|
|
// 使用:after伪元素，添加一个内容为空的字符（'\20'，可能是空格之类的占位，不同浏览器有不同处理方式），
|
|
|
// 并设置为块级元素，高度为0，用于清除浮动，确保父元素能正确包含浮动的子元素，维持布局的正常显示
|
|
|
content: '\20';
|
|
|
display: block;
|
|
|
height: 0;
|
|
|
clear: both
|
|
|
}
|
|
|
|
|
|
.clearfix {
|
|
|
// 为应用.clearfix类的元素添加zoom:1属性，同样用于解决特定浏览器（如IE）下的布局问题，触发hasLayout属性，配合:after伪元素实现清除浮动等布局效果
|
|
|
zoom: 1
|
|
|
}
|
|
|
|
|
|
.grid-98 {
|
|
|
// 设置元素超出部分隐藏，使其不会显示在容器外面，并且设置水平方向上居中（margin: 0 auto），
|
|
|
// 内边距设置为0，用于布局一个宽度固定且水平居中的容器，方便页面内容的整体排版
|
|
|
overflow: hidden;
|
|
|
margin: 0 auto;
|
|
|
padding: 0
|
|
|
}
|
|
|
|
|
|
.grid-98 {
|
|
|
// 明确设置该元素的宽度为980px，结合前面的居中设置等，常用于构建页面的主体内容区域宽度，适配常见的屏幕分辨率等情况
|
|
|
width: 980px
|
|
|
}
|
|
|
|
|
|
.mod-footer {
|
|
|
// 设置底部元素（.mod-footer）的内边距，上内边距为30px，下内边距为15px，左右内边距为0，
|
|
|
// 同时设置宽度为100%铺满整个父元素宽度，高度为40px，用于定义底部区域的大小和内部内容的布局空间
|
|
|
padding: 30px 0 15px 0;
|
|
|
width: 100%;
|
|
|
height: 40px;
|
|
|
// 设置相对定位（position: relative），用于后续调整其内部元素的位置等，
|
|
|
// margin-top: -85px将元素向上移动85px，可能是为了使其与上面的内容重叠一部分，实现特定的布局效果，
|
|
|
// clear: both用于清除浮动，避免受到上面浮动元素的影响，保证在底部正确显示，zoom:1用于浏览器兼容性布局处理
|
|
|
position: relative;
|
|
|
margin-top: -85px;
|
|
|
clear: both;
|
|
|
zoom: 1
|
|
|
}
|
|
|
|
|
|
.mod-footer.hidden-box {
|
|
|
// 设置行高为0，高度为0，并且超出部分隐藏，可能用于隐藏一些不需要显示但又在HTML结构中存在的元素，或者用于创建一些空白占位等布局用途
|
|
|
line-height: 0;
|
|
|
height: 0;
|
|
|
overflow: hidden
|
|
|
}
|
|
|
|
|
|
.mod-footer.footer-box {
|
|
|
// 设置文本居中对齐，定义字体为Arial和宋体（simsun，针对中文显示），字体大小为12px，用于规范底部版权等文字的显示样式
|
|
|
text-align: center;
|
|
|
font-family: Arial, simsun;
|
|
|
font-size: 12px
|
|
|
}
|
|
|
|
|
|
.mod-footer.footer-box.copy-box {
|
|
|
// 设置文字颜色为#959595这种浅灰色，行高为12px，高度为12px，超出部分隐藏，用于设置版权相关文字的样式和显示效果
|
|
|
color: #959595;
|
|
|
line-height: 12px;
|
|
|
height: 12px;
|
|
|
overflow: hidden
|
|
|
}
|
|
|
|
|
|
.mod-footer.footer-box.inner-box {
|
|
|
// 设置底部其他相关元素（.inner-box）的底部外边距为10px，行高为14px，高度为14px，超出部分隐藏，颜色为#3FA7CB这种蓝色，
|
|
|
// 用于区分不同的底部文字内容，调整其显示布局和样式
|
|
|
margin-bottom: 10px;
|
|
|
line-height: 14px;
|
|
|
height: 14px;
|
|
|
overflow: hidden;
|
|
|
color: #3FA7CB
|
|
|
}
|
|
|
|
|
|
.mod-footer.hidden-box {
|
|
|
// 再次出现相同的样式设置，可能是重复定义或者用于覆盖之前的设置，作用与前面的.hidden-box样式中关于隐藏元素的设置相同
|
|
|
line-height: 0;
|
|
|
height: 0;
|
|
|
overflow: hidden
|
|
|
}
|
|
|
|
|
|
.mod-page-body
|
|
|
</style>
|
|
|
<STYLE type=text/css>
|
|
|
.mod-notfound {
|
|
|
// 设置元素的右边框为1px的实线，颜色为#444444这种深灰色，同理设置上边框、左边框和下边框，
|
|
|
// 背景颜色设置为#F0F0F0浅灰色，高度为380px，文本居中对齐，并且设置边框圆角为10px，用于创建一个具有特定样式的、带边框和圆角的容器元素，
|
|
|
// 可能用于显示特定的提示信息等内容，比如这里可能是用于展示页面出错或未找到相关内容的提示区域样式
|
|
|
BORDER-RIGHT: #444444 1px solid;
|
|
|
BORDER-TOP: #444444 1px solid;
|
|
|
MARGIN-TOP: 10px;
|
|
|
BACKGROUND: #F0F0F0;
|
|
|
BORDER-LEFT: #444444 1px solid;
|
|
|
BORDER-BOTTOM: #444444 1px solid;
|
|
|
HEIGHT: 380px;
|
|
|
TEXT-ALIGN: center;
|
|
|
border-radius: 10px
|
|
|
}
|
|
|
</STYLE>
|
|
|
</HEAD>
|
|
|
<META content="MSHTML 6.00.6000.17117" name=GENERATOR>
|
|
|
</HEAD>
|
|
|
|
|
|
<BODY bgcolor="#f0f0f0">
|
|
|
<!-- 创建一个<SECTION>元素，应用类名.mod-page-body，用于划分页面的主体内容区域，结合前面定义的相关样式来控制该区域的布局和显示效果 -->
|
|
|
<SECTION class=mod-page-body>
|
|
|
<!-- 在<SECTION>元素内创建一个<DIV>元素，应用多个类名（mod-page-main wordwrap clearfix），
|
|
|
用于放置主要的页面内容，其中“wordwrap”类控制文字换行，“clearfix”类用于清除浮动等布局处理 -->
|
|
|
<DIV class="mod-page-main wordwrap clearfix">
|
|
|
<!-- 在上述<DIV>元素内再创建一个<DIV>元素，应用类名.x-page-container，可能作为更具体的页面内容容器，方便后续进一步布局子元素 -->
|
|
|
<DIV class=x-page-container>
|
|
|
<!-- 创建一个<DIV>元素，应用类名.mod-notfound grid-98，结合前面定义的样式，它具有特定的边框、背景、高度等样式，
|
|
|
并且宽度为980px，水平居中，用于展示特定的内容，这里可能是在页面出现某种情况（如未找到对应内容）时显示相关提示及图片等 -->
|
|
|
<DIV class="mod-notfound grid-98">
|
|
|
<!-- 在该<DIV>元素内插入一张图片，应用类名.img-notfound，设置图片的高度为300px，宽度为786px，图片来源路径为./img/nav.jpg -->
|
|
|
<IMG class=img-notfound height=300 src="./img/nav.jpg" width=786>
|
|
|
<!-- 创建一个段落元素<P>，设置字体大小为18px，行高为50px，里面包含一段文字“推開窗 回到夢裡的故鄉”，用于显示特定的提示性文字内容 -->
|
|
|
<P style="FONT-SIZE: 18px; LINE-HEIGHT: 50px">推開窗 回到夢裡的故鄉</P>
|
|
|
</DIV>
|
|
|
</DIV>
|
|
|
</DIV>
|
|
|
</SECTION>
|
|
|
<!-- 创建一个<FOOTER>元素，应用类名.mod-footer mod-cs-footer，用于构建页面的底部区域，结合前面定义的底部样式来显示版权等相关信息 -->
|
|
|
<FOOTER class="mod-footer mod-cs-footer">
|
|
|
<!-- 在<FOOTER>元素内创建一个<DIV>元素，应用类名.clearfix hidden-box，可能用于清除浮动或者作为隐藏的布局占位元素等用途 -->
|
|
|
<DIV class="clearfix hidden-box"></DIV>
|
|
|
<!-- 再创建一个<DIV>元素，应用类名.footer-box，用于放置底部具体的文字内容，按照前面定义的.footer-box样式进行显示 -->
|
|
|
<DIV class=footer-box>
|
|
|
<!-- 在.footer-box内又创建一个<DIV>元素，应用类名.copy-box，用于显示版权相关的文字，按照.copy-box样式设置显示效果，
|
|
|
这里显示“©2017 酒店管理系统”，表示版权归属及系统名称等信息 -->
|
|
|
<DIV class=copy-box>©2017 酒店管理系统</DIV>
|
|
|
</DIV>
|
|
|
</FOOTER>
|
|
|
|
|
|
</BODY>
|
|
|
|
|
|
</HTML> |
