简单的404静态html页面

原创于 2025-07-08 15:51:27 发布 · 1.7k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#html #前端

该文章已生成可运行项目，

404静态html页面，可以添加各种提示语，例如：系统升级中、页面不存在等等！

样式如下，颜色可自己通过css代码进行调节。

1、html代码

page-404.html文件

<!DOCTYPE html>
<!-- 编码格式，防止乱码 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>404</title>
	
<!-- 404图标的css样式 -->
<style>
    .page-404 {
        max-width: 700px;
        margin: 50px auto;
        text-align: center;
    }

    .page-404 h1 {
        font-size: 22px;
        color: #333333;
        margin: 0 0 30px;
    }

    .page-404 a {
        display: inline-block;
        font-size: 14px;
        color: #ffffff;
        height: 38px;
        line-height: 38px;
        padding: 0 20px;
        border-radius: 4px;
        background-color: #52c41a;
        text-decoration: none;
    }

    .page-404 a:hover {
        opacity: .8;
    }

    .page-404 svg {
        display: block;
        width: 100%;
        height: auto;
        max-width: 300px;
        margin: 0 auto;
    }
</style>
	
</head>



	<body>
		<section class="page-404">
			<!-- <a href="{SITE_URL}">返回网站首页</a> -->
			
			<!-- 404图标 其中fill为颜色属性，可自行调节 -->
			<svg t="1657115709491" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="2516" width="300" height="300">
				<path
					d="M260.266667 789.333333c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333H38.4c-12.8 0-29.866667-8.533333-34.133333-21.333333-4.266667-17.066667-4.266667-29.866667 4.266666-42.666667l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4H298.666667v59.733333c0 21.333333-17.066667 38.4-38.4 38.4z m-145.066667-179.2h106.666667V469.333333l-106.666667 140.8zM913.066667 742.4c-21.333333 0-38.4-17.066667-38.4-38.4v-59.733333h-183.466667c-12.8 0-29.866667-8.533333-34.133333-21.333334-8.533333-12.8-4.266667-29.866667 4.266666-38.4l221.866667-294.4c8.533333-12.8 25.6-17.066667 42.666667-12.8 17.066667 4.266667 25.6 21.333333 25.6 38.4v256h34.133333c21.333333 0 38.4 17.066667 38.4 38.4s-17.066667 38.4-38.4 38.4h-34.133333v59.733334c0 17.066667-17.066667 34.133333-38.4 34.133333zM768 567.466667h106.666667V426.666667L768 567.466667zM533.333333 597.333333c-46.933333 0-85.333333-25.6-119.466666-68.266666-29.866667-38.4-42.666667-93.866667-42.666667-145.066667 0-55.466667 17.066667-106.666667 42.666667-145.066667 29.866667-42.666667 72.533333-68.266667 119.466666-68.266666 46.933333 0 85.333333 25.6 119.466667 68.266666 29.866667 38.4 42.666667 93.866667 42.666667 145.066667 0 55.466667-17.066667 106.666667-42.666667 145.066667-34.133333 46.933333-76.8 68.266667-119.466667 68.266666z m0-362.666666c-55.466667 0-98.133333 68.266667-98.133333 149.333333s46.933333 149.333333 98.133333 149.333333c55.466667 0 98.133333-68.266667 98.133334-149.333333s-46.933333-149.333333-98.133334-149.333333z"
					fill="#978CFF" p-id="2517"></path>
				<path d="M354.133333 691.2a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z"
					fill="#E3E5FC" p-id="2518"></path>
				<path d="M8.533333 832a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z"
					fill="#E3E5FC" p-id="2519"></path>
				<path
					d="M661.333333 797.866667a162.133333 21.333333 0 1 0 324.266667 0 162.133333 21.333333 0 1 0-324.266667 0Z"
					fill="#E3E5FC" p-id="2520"></path>
			</svg>
			
				<!-- 提示语 其中color为颜色属性，可自行调节 -->
				<taro-text-core class="xpx-phone-call" style="color: rgb(151 140 255);font-size: 20;">
				尊敬的用户您好，本系统正在进行升级维护，给您带来的不便，敬请谅解。
				</taro-text-core>
				
		</section>
	</body>

</html>

2、nginx配置

如果需要，可以进行nginx配置，访问直接返回404页面。

server {
    listen       8080;
    server_name  _;


    location / {
        root   /usr/share/nginx/html/temp/;		# 设置根目录
        try_files $uri $uri/ /page-404.html;	# 先尝试访问请求的URI对应的文件（$uri）如果找不到，则返回这里配置的文件
        index  page-404.html;					# 默认访问文件
    }

}

本文章已经生成可运行项目