编写一个404页面(html+css)

极简404页面模板|纯HTML【少量css】 记着点赞 <!DOCTYPE html> <html style="height:100%"> <head> <meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, shrink-to-fit=no" > <tit... 阅读详情

一、功能解释

  • 纯html+css无任何外接素材
  • 页面简洁,可满足平时需求
  • 开发工具是HBuilderX

二、页面展示
在这里插入图片描述
三、代码演示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 - 页面未找到</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4eaf5 100%);
            color: #333;
            text-align: center;
            padding: 20px;
        }

        .container {
            max-width: 600px;
            width: 100%;
        }

        /* 404数字动画 */
        .error-num {
            font-size: 10rem;
            font-weight: 900;
            color: #4a6cf7;
            line-height: 1;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }

        .title {
            font-size: 1.8rem;
            margin: 20px 0;
            color: #444;
        }

        .desc {
            font-size: 1rem;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }

        /* 按钮样式 */
        .btn-group {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 12px 28px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .btn-home {
            background: #4a6cf7;
            color: white;
            border: none;
        }

        .btn-home:hover {
            background: #3a5ce0;
            transform: translateY(-3px);
        }

        .btn-back {
            background: transparent;
            color: #4a6cf7;
            border: 2px solid #4a6cf7;
        }

        .btn-back:hover {
            background: #f0f4ff;
            transform: translateY(-3px);
        }

        /* 移动端适配 */
        @media (max-width: 576px) {
            .error-num {
                font-size: 6rem;
            }
            .title {
                font-size: 1.4rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="error-num">404</div>
        <h1 class="title">页面未找到</h1>
        <p class="desc">你访问的页面不存在、已移动或已删除。请检查链接是否正确,或返回首页继续浏览。</p>
        <div class="btn-group">
            <a href="/" class="btn btn-home">返回首页</a>
            <a href="javascript:history.back()" class="btn btn-back">返回上一页</a>
        </div>
    </div>
</body>
</html>
创意404错误页面HTML模板:集成音乐与互动体验 本文还有配套的精品资源,点击获取 简介:当访问网页失败时,这个特殊的模板提供了有吸引力的互动体验。它基于HTML5编写,融入CSS3和JavaScript技术,具备音频播放、响应式设计、交云动性、SEO优化以及符合Web可访问性标准。本模板通过引入音乐元素,将普通的404错误页面转变为一个动态的用户体验,同时也成为了前端开发技能的一次全面演练。 1. HTML5 ... 阅读详情

相关推荐

60+ HTML 404错误页面模板大全

本文还有配套的精品资源,点击获取 简介:HTML模板是构建用户友好型404错误页面的关键。本集合提供60多个设计各异的404界面模板,帮助设计师和开发者快速创建既美观又符合品牌形象的错误页面。精心设计的404页面不仅可以减少用户困惑,提供有效的导航和搜索功能,还能增强品牌传播和用户体验。模板包括从简洁文本到动态图形等多种样式。虽然部分模板需要自己编写代码实现,但大多数提供了...

weixin_32306683的博客 2077

自适应二次元404页面源码解析:打造沉浸式动漫风格错误页

在网页开发中,404页面不仅是用户访问异常的提示,更是展现网站个性和创意的绝佳机会。本文介绍的**自适应二次元404页面源码**通过HTML+CSS+JS技术栈,结合动漫元素和动态交互,为开发者提供了快速构建主题化错误页的解决方案。

专注于与编程相关的知识内容分享 1831

ZYNQ开发(2)在Linux系统层上PL-PS通过AXI-DMA传输数据详细步骤及注意事项

参考的网络资料 https://github.com/bperez77/xilinx_axidma/tree/master https://gitlab.gnome.org/HosseinBeheshti/UlteraZed7EV/-/tree/master/petalinux/xilinx_axidma https://www.icode9.com/content-3-925319.html https://blog.youkuaiyun.com/weixin_38218267/article/details/1

aizaiyueye的专栏 3448

动态颤抖的眼睛效果404页面源码

源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。动态颤抖的眼睛效果404页面源码,

优快云专家-微编程的博客 305

非root用户如何在CentOS7集群上编译安装OpenFOAM6

本文详细介绍了在CentOS7集群上以非root用户身份编译安装OpenFOAM6的完整流程。通过环境准备、依赖包离线获取、源码编译安装等步骤,解决了集群环境下权限和依赖问题,特别针对OpenMPI和Boost库提供了优化配置建议,帮助用户高效完成安装并优化性能。

weixin_28826961的博客 681

差分分析.

差分分析是一种强大的密码攻击技术,通过研究明文差分与密文差分的关系来破解加密算法。本文系统介绍了差分分析的核心概念和方法: 基础差分分析:通过异或运算抵消密钥影响,利用差分分布表(DDT)寻找高概率差分特征,以FEAL-4为例展示了具体攻击过程。 高级差分技术:包括截断差分分析(关注部分特征)、不可能差分分析(排除概率为0的路径)和飞来去器分析(将算法分段处理)。 自动化搜索方法:介绍了松井算法和MILP(混合整数线性规划)方法,将差分路径搜索转化为数学优化问题。 这些方法展现了差分分析从基础理论到现代应用

weixin_61562383的博客 786

一个好看的404界面

好看的404界面

weixin_51504215的博客 1532

用Raspberry Pi Imager重装树莓派系统

这次在官网无意中看到他们出了一个Raspberry Pi Imager的工具,可以直接完成镜像烧录操作,于是就尝了个鲜。选择“编辑设置”按钮,会弹出具体的设置信息,有三个tab,第一个是General信息,包括用户名、密码、wifi和语言设置;后续的操作就和我当初第一次装树莓派系统的操作差不多,在此就不再赘述,有兴趣的朋友可以看我以前的博文。完成定制化设置后,点击“保存”按钮,软件回到前面的提示框,连续点击两个“是”,开始写入SD。第二个下拉框选择你要安装的OS,点击黄框所在的选项,可以挑选更多OS。

天飓的技术博客 1085

404错误页面简约清新源码 非常好看

404错误页面简约清新源码 非常好看,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。

优快云专家-微编程的博客 274

基于单片机红外线遥控Proteus仿真电路发射接收

*单片机设计介绍,基于单片机红外线遥控Proteus仿真电路发射接收。

2201_75940997的博客 3943

《BiLSTM with Multi-Polarity Orthogonal Attention for Implicit Sentiment Analysis》论文阅读笔记

文章名:《BiLSTM with Multi-Polarity Orthogonal Attention for Implicit Sentiment Analysis》 作者Jiyao Wei a,1, Jian Liaoa,1, Zhenfei Yanga, Suge Wanga,b,∗, Qiang Zhaoa 年份 2019 1 Introduction 目前文本情感分析多分析带...

weixin_39036944的博客 1631

前端如何进行页面优化_如何优化前端页面

这个答案是肯定的,如果你是一个合格的前端开发,你应该清楚,在我们的css定义背景的时候,可以通过坐标来实现对背景进行定位的,既然如此,那么我们可以将这些背景合并起来,这样即可减少http请求数,同时,我们在背景整合的时候,也需要考虑图片质量,同时也需要考虑图片的大小,我在以前有写过相应的博文。不过他这个工具我觉得对于我们需要发布的内容图片还是比较麻烦,但是他可以进行优化,优化图片的目的,最开始已经说了,图片越小,我们的用户下载速度越快,当然对企业的服务器的带宽也可以起到节省的作用。

2301_78256053的博客 845

生存网络与mlr3proba

通过结合生存网络和mlr3proba,可以使用生存网络模型来预测个体在给定时间点发生事件的概率,并使用mlr3proba提供的工具进行模型的训练、评估和选择最佳模型。iii)基本的机器学习(ML)方法,如重新排序和调整。在本文中,我们将只讨论前五种,因为它们在文献中得到了更好的建立,并且它们具有相同的接口,这简化了调优,我们将在下面看到。我们不会为模型指定自定义架构,而是使用默认架构,如果你熟悉PyTorch,那么你可以选择创建自己的架构,如果你愿意的话,通过将其传递给模型中的custom_net参数。

weixin_46587777的博客 1364

4款精美的纯前端404错误页面源码

4款精美的纯前端404错误页面源码 去发现同类优质开源项目:https://gitcode.com/ 本项目包含4款精美的纯前端404错误页面源码,适用于网站错误拦截时的友好展示。这些错误页面源码均不依赖任何第三方库,完全由HTML和CSS构成,易于集成和使用。 特性 纯前端实现,无需后端依赖 丰富的视觉效果,提升用户体验 完全自定义,可轻松调整风格与布局 无需安装,直接使用 使用说明 将下载...

gitblog_06732的博客 452

【点云鸟瞰图BEV】点云鸟瞰图BEV原理与可视化

本节将介绍激光雷达等点云的鸟瞰图生成原理、代码及效果图。 1 BEV视图原理 点云BEV(Bird's Eye View)视图是指点云在垂直于高度方向的平面上的投影。通常,在获得bev视图前,会将空间分割成体素,利用体素对点云进行下采样,然后将每个体素作为一个点进行投影。体素是指将三维空间按照固定尺寸长方体进行划分时的长方体(Δl*Δw*Δh)。 体素投影时可以得到BEV视图的像素点坐标。每个像素点的特征取值则可以通过多种方式得到。 ...

叶子的博客 2万+

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

kangle 自定义404页面

【代码】kangle 自定义404页面。

点滴记忆 342

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

小白从零开始做多模态新生儿疼痛评估系统|第五篇:页面细节调整+页面跳转问题全解决(AI辅助实操)

摘要:本文记录了编程新手在优化HTML页面时遇到的导航栏样式不统一和页面跳转问题。通过AI工具DeepSeek的帮助,成功提取公共CSS样式统一导航栏外观,并解决了页面跳转时的404报错问题。文章详细分享了排查问题的思路和具体操作步骤,包括如何修改a标签href属性、处理路径错误等常见问题,同时提供了借助AI快速解决问题的实用技巧。作者总结出小白开发者的核心经验:不必死记硬背代码,而是要学会清晰描述问题并善用AI工具,从而高效完成前端优化工作。

lmeshy的博客 577

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

HTML+CSS实现酷炫的404错误页面

一、酷炫的404错误页面效果图 二、文件结构展示 使用的开发工具是:Webstorm 三、源码区 1.html文档(index.html) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...

qq_41775769的博客 5528

有趣的HTML实例(二) 404页面

有趣的HTML实例(一) 404页面 一款简单的 HTML+CSS 原生 404页面实例 1、HTML 2、CSS 3、舒适的画面感,科技感,代码效果 4、屏幕闪动

好好读书 25万+

html css制作404页面,CSS3绘制404页面

标题有点噱了...最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.只用的CSS3中的旋转, 效果如下上代码:Error.circle {width: 200px;height: 200px;border-radius: 200px;border: 15px solid #B22727;}.circle > div {color: #B22727;font: bol...

weixin_33380613的博客 1012

纯html 404页面,一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose 之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下:在线预览 源码下载实现的代码。html代码:404ERROR ...

weixin_33188789的博客 4515

纯html css 404,一款纯css3实现的漂亮的404页面_html/css_WEB-ITnose

之前为大家分享了那些创意有趣的404页面, html5和css3打造一款创意404页面, HTML5可爱的404页面动画很逗的机器人。今天再给大家分享一款纯css3实现的漂亮的404页面。效果图如下:在线预览 源码下载实现的代码。html代码:404ERROR Lost? Maybe I can help. Search My Sugg...

weixin_33560311的博客 2616

简洁404页面源码 | 自适应404页面HTML源代码下载

源码 源码下载 源码网 源码自适应 源码图片 页面源码 页面源码下载 错误页源码 php源码 html源码 动漫 源码

1万+

css3 svg制作404页面动画效果HTML源码

css3 svg制作404页面动画效果HTML源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果。

专注于与编程相关的知识内容分享 845

一个简单而又漂亮的404页面源码

推荐一个简单而又漂亮的网站404页面,也是我网站用的。 页面的风格效果: 网站404页面 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq

weixin_40029679的博客 5万+
上一篇: 链表的基本操作(C语言版)
下一篇: 安装Kali(Linux系统)图形化安装+字符界面安装
Chensay.
博客等级 码龄6年 1万+粉丝 122原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值