<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>宇航员404丢失</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- 菜单 -->
<div class="hamburger-menu">
<button class="burger" data-state="closed">
<span></span>
<span></span>
<span></span>
</button>
</div>
<nav data-state="closed">
<ul>
<li><a href="http://www.liuchenyang.top">首页</a></li>
<li><a href="/">在线服务</a></li>
<li><a href="/">关于我们</a></li>
<li><a href="/">联系我们</a></li>
</ul>
</nav>
<!-- 可以隐藏 -->
<main>
<div class="container">
<div class="row">
<div class="col-md-6 align-self-center">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" style="visibility: visible;">
<g>
<defs>
<clippath id="GlassClip">
<path d="M380.857,346.164c-1.247,4.651-4.668,8.421-9.196,10.06c-9.332,3.377-26.2,7.817-42.301,3.5s-28.485-16.599-34.877-24.192c-3.101-3.684-4.177-8.66-2.93-13.311l7.453-27.798c0.756-2.82,3.181-4.868,6.088-5.13c6.755-0.61,20.546-0.608,41.785,5.087s33.181,12.591,38.725,16.498c2.387,1.682,3.461,4.668,2.705,7.488L380.857,346.164z"></path>
</clippath>
<clippath id="cordClip">
<rect width="800" height="600"></rect>
</clippath>
</defs>
<g id="planet" transform="matrix(0.9994,-0.0336,0.0336,0.9994,-3.315,19.1486)" style="transform-origin: 0px 0px;">
<circle fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="572.859" cy="108.803" r="90.788"></circle>
<circle id="craterBig" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="548.891" cy="62.319" r="13.074" transform="matrix(1,0,0,1,2.892,0)" style="transform-origin: 0px 0px;"></circle>
<circle id="craterSmall" fill="none" stroke="#0E0620" stroke-width="3" stroke-miterlimit="10" cx="591.743" cy="158.918" r="7.989" transform="matrix(1,0,0,1,-2.892,0)" style="transform-origin: 0px 0px;"></circle>
<path id="ring" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M476.562,101.461c-30.404,2.164-49.691,4.221-49.691,8.007c0,6.853,63.166,12.408,141.085,12.408s141.085-5.555,141.085-12.408c0-3.378-15.347-4.988-40.243-7.225"></path>
<path id="ringShadow" opacity="0.5" fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M483.985,127.43c23.462,1.531,52.515,2.436,83.972,2.436c36.069,0,68.978-1.19,93.922-3.149"></path>
</g>
<g id="stars">
<g id="starsBig">
<g transform="matrix(0.9977,-0.0677,0.0677,0.9977,-16.1382,35.6621)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="518.07" y1="245.375" x2="518.07" y2="266.581"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="508.129" y1="255.978" x2="528.01" y2="255.978"></line>
</g>
<g transform="matrix(0.9991,0.0412,-0.0412,0.9991,10.1093,-6.1496)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="154.55" y1="231.391" x2="154.55" y2="252.598"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="144.609" y1="241.995" x2="164.49" y2="241.995"></line>
</g>
<g transform="matrix(0.9989,-0.0471,0.0471,0.9989,-6.3996,15.236)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="320.135" y1="132.746" x2="320.135" y2="153.952"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="310.194" y1="143.349" x2="330.075" y2="143.349"></line>
</g>
<g transform="matrix(0.9978,-0.0669,0.0669,0.9978,-32.5879,14.511)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="200.67" y1="483.11" x2="200.67" y2="504.316"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="210.611" y1="493.713" x2="190.73" y2="493.713"></line>
</g>
</g>
<g id="starsSmall">
<g transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="432.173" y1="380.52" x2="432.173" y2="391.83"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="426.871" y1="386.175" x2="437.474" y2="386.175"></line>
</g>
<g transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="489.555" y1="299.765" x2="489.555" y2="308.124"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="485.636" y1="303.945" x2="493.473" y2="303.945"></line>
</g>
<g transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="231.468" y1="291.009" x2="231.468" y2="299.369"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="227.55" y1="295.189" x2="235.387" y2="295.189"></line>
</g>
<g transform="matrix(1,0,0,1,0,0)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="244.032" y1="547.539" x2="244.032" y2="555.898"></line>
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="247.95" y1="551.719" x2="240.113" y2="551.719"></line>
</g>
<g transform="matrix(0.998,0,0,0.9982,0.3727,0.7401)" style="transform-origin: 0px 0px;">
<line fill="none" stroke="#0E0620" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" x1="186.359" y1="406.967" x2="186.359" y2="415.326"></line>
<line fill="none" stroke=
Nginx 404页面美化
需积分: 0 32 浏览量
更新于2024-12-13
收藏 2.59MB ZIP 举报
Nginx作为一款高性能的HTTP和反向代理服务器，常被用作静态内容的提供者、负载均衡器以及HTTP缓存。其配置简单，资源占用少，效率高，因此在多种服务器环境中广泛使用。Nginx的404错误页面是当用户请求的页面不存在时显示的页面。默认情况下，Nginx提供一个非常基础的404错误页面，对用户体验并不友好。美化Nginx的404页面，可以提升用户在遇到页面不存在时的体验。
美化Nginx的404页面通常涉及到对Nginx配置文件的修改，以及对HTML、CSS和JavaScript的编写。以下是一些美化Nginx 404页面的方法和步骤：
1. 自定义404页面：首先需要在Nginx服务器的站点配置目录下创建一个自定义的404.html文件。这个文件可以包含任何自定义的内容，比如网站的logo、美观的布局和设计、友好的错误提示信息等。
2. 修改Nginx配置：在Nginx的配置文件中（通常是nginx.conf或位于/etc/nginx/sites-available/目录下的特定站点配置文件），需要指定404错误页面的位置。这可以通过修改error_page指令来实现，如下所示：
error_page 404 /404.html;
location = /404.html {
internal;
}
这段配置将404错误映射到服务器上的/404.html文件，并且通过internal指令确保这个页面只能通过内部请求访问，防止外部直接通过URL访问到404页面。
3. 设计和布局：对于404页面的设计，可以发挥创意，使其在视觉上与网站的其他页面保持一致，同时又要有明显的区别以指出发生了错误。常见的设计元素包括使用404提示、图形、动画以及提供返回首页或者其他重要页面的链接。此外，适当的幽默或诙谐语句也能缓解用户的失望情绪。
4. 使用CSS和JavaScript：通过CSS可以改善页面的外观，提供更加吸引人的视觉效果。JavaScript可以用来添加一些动态效果，比如动画，甚至可以通过AJAX技术在用户触发某些操作时异步加载内容。不过，在错误页面中使用过多的JavaScript需要谨慎，以免造成用户体验的下降。
5. 测试和部署：在对404页面进行美化后，需要进行充分的测试，确保在各种情况下都能正确显示，并且不会因为新设计的页面而影响服务器的性能。测试通过后，就可以将新设计的404页面部署到服务器上，供所有遇到404错误的用户使用。
通过上述方法，可以将Nginx的404页面从一个简单的错误提示转变为一个既美观又实用的页面，以提升用户的整体体验，这在品牌营销和网站维护中尤为重要。
404页面美化.zip （75个子文件） 
404页面美化 01 assets js 
particlesapp_bubble.js 3KB particles.js 42KB jquery.app.js 2KB jquery.min.js 85KB css main.css 172KB google.css 4KB library.css 440KB fonts 
themify.svg 229KB FontAwesome.otf 132KB materialdesignicons-webfont.woff2 107KB fontawesome-webfont.eot 162KB materialdesignicons-webfont.woff 141KB dripicons-v2.eot 40KB materialdesignicons-webfont.ttf 286KB materialdesignicons-webfont.svg 2.11MB dripicons-v2.ttf 39KB fontawesome-webfont.woff 96KB dripicons-v2.woff 25KB fontawesome-webfont.woff2 75KB google 6xKodSZaM9iE8KbpRA_pgHYYQML_B48.woff2 7KB 6xKtdSZaM9iE8KbpRA_hJVQNcOM.woff2 18KB 6xKodSZaM9iE8KbpRA_pkHEYQML_B48.woff2 7KB 6xKodSZaM9iE8KbpRA_pkHEYT8L_.woff2 19KB 6xKodSZaM9iE8KbpRA_pkHEYQcL_B48.woff2 18KB 6xKodSZaM9iE8KbpRA_p2HcYT8L_.woff2 19KB 6xKodSZaM9iE8KbpRA_pgHYYT8L_.woff2 19KB 6xKtdSZaM9iE8KbpRA_hK1QN.woff2 19KB 6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2 7KB 6xKodSZaM9iE8KbpRA_p2HcYQcL_B48.woff2 18KB 6xKodSZaM9iE8KbpRA_p2HcYQML_B48.woff2 7KB 6xKodSZaM9iE8KbpRA_pgHYYQcL_B48 (1).woff2 18KB materialdesignicons-webfont.eot 286KB fontawesome-webfont.svg 434KB fontawesome-webfont.ttf 162KB themify.woff 55KB themify.eot 77KB themify.ttf 77KB dripicons-v2.svg 97KB
404.html 2KB 09 assets js bootstrap.min.js 37KB modernizr.custom.js 15KB jquery-2.1.1.min.js 82KB scripts.js 676B jquery.nicescroll.min.js 58KB css bootstrap.min.css 115KB respons.css 966B dmaku.main.css 3KB images 
guardian.gif 79KB 404.html 3KB 03 assets css dandelion.css 62KB images 
blueprint.png 111B error-pin.png 2KB error-hanger.png 60KB carbon.png 131B 404.html 1KB 07 404.html 9KB 10 assets css style.css 14KB 404.html 3KB 11 assets js gsap.min.js 56KB script.js 2KB css style.css 4KB bootstrap.min.css 138KB 404.html 19KB 04 assets images 404.png 26KB 404.html 2KB 08 assets css main-cf95bf42d5.css 195KB images 404_bg.png 74KB 404.html 735B 06 assets images 404.png 21KB 404.html 2KB
06.zip 22KB 05 assets images 404.png 92KB 404.html 2KB 02 assets images 404.png 14KB 404.html 2KB2019-08-13 上传
2009-09-20 上传
5星 · 资源好评率100%156 浏览量
189 浏览量
2022-05-25 上传
2017-10-26 上传
108 浏览量
186 浏览量
187 浏览量
2010-12-02 上传
166 浏览量
153 浏览量
119 浏览量
164 浏览量
2018-11-04 上传
2018-09-24 上传
128 浏览量
150 浏览量
2013-07-09 上传
5星 · 资源好评率100%105 浏览量
2021-08-06 上传
181 浏览量
186 浏览量
124 浏览量
5星 · 资源好评率100%2016-04-30 上传
186 浏览量
2025-03-23 上传
1344 浏览量
资源评论
A-刘晨阳
- 粉丝: 12w+
最新资源
- 电子商务平台商家入驻协议.doc
- 双三相永磁同步电机模型预测控制及其双dq轴系研究 v2.0
- 数据库定义表之间关系(带图).doc
- 项目管理员如何提升沟通技巧.doc
- 原创-智能家居安防产品营销策划方案.doc
- 软件自动化测试工具介绍.pptx
- 厦门软件园现场临时用电施工组织设计.doc
- COMSOL多物理场声学模型用于三维管道缺陷无损检测的技术解析
- 网络课堂系统建设方案.docx
- 可编程逻辑器件基础.ppt
- BMW汽车经销商IDCC网络内容营销培训.ppt
- 农业机械化及其自动化培养方案.doc
- 20000m3d城市污水处理厂综合设计(含11个CAD作图图纸)--优秀毕业设计.doc
- 为Solaris服务器配置款安全的防火墙.doc
- 基于单片机电子密码锁的课程设计.docx
- 2023年浙江省大学生第四届电子商务竞赛复赛报到与答辩须知.doc
