社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 设计令人愉快的维护中页面 HTML 和 CSS

设计令人愉快的维护中页面 HTML 和 CSS

DDD
发布： 2024-12-27 13:57:15
原创
319 人浏览过

Designing a Delightful Under Maintenance Page HTML and CSS

在 Web 开发中，精心设计的“维护中页面 HTML”对于向用户有效传达网站停机时间至关重要。即使主站点无法访问，它也能确保透明度，同时保持用户参与度。本文深入探讨了使用 HTML 和 CSS 设计此类页面的细微差别，确保它们具有视觉吸引力、响应灵敏且功能齐全。

为什么维护中的页面 HTML 很重要

沟通的重要性

网站的停机可能是由于服务器升级、内容更新或安全补丁造成的。 “正在维护页面 Html”会通知用户这一情况，并向他们保证该网站很快就会恢复。这可以培养信任并保持用户忠诚度，最大限度地减少因意外不可用而造成的潜在挫败感。

例如，如果电子商务网站在促销期间出现故障，清晰简洁的维护页面可以通知客户网站何时恢复上线，从而减轻客户的不满。

提升用户体验

精心设计的维护中页面 HTML 不仅仅是通知用户，即使在停机期间，它也能增强他们的体验。主要优点包括：

-** 提供预计的停机时间**：让用户了解网站何时可以恢复。

  • 提供替代联系方式：包括社交媒体链接或支持联系方式。
  • 展示创造力：利用动画或幽默将可能令人沮丧的体验变成积极的体验。

维护页面的基本元素

出色的维护页面将功能与美观结合起来。以下是基本要素：

清晰的消息传递

https://layakcoder.com/under-maintenance-page-html/ 的主要目的是清晰地传达信息。避免使用行话并使用简单、令人放心的语言。示例包括：

  • “我们很快就会回来！”
  • “网站正在维护中。感谢您的耐心等待。”

品牌与设计

与您网站的品牌保持一致，以强化您的身份。合并：

  • 徽标：帮助用户立即识别您的网站。
  • 配色方案：使用您的品牌颜色使页面与您的整体设计保持一致。
  • 版式：使用与您的网站一致的字体以获得一致的外观。

联系信息

为用户提供与您联系的替代方式，例如：

  • 电子邮件地址：用于紧急查询。
  • 社交媒体链接：让用户保持最新状态。
  • 支持表格：用于其他沟通选项。

附加功能

  • 倒计时器：指示维护剩余的确切时间。
  • 互动元素：博客文章、常见问题解答或公告的链接可以保持用户的参与度。

设计维护页面的分步指南

让我们使用 HTML 和 CSS 创建一个简单而优雅的“维护中页面 HTML”。

第 1 步：HTML 结构

以下是“维护中”页面 HTML 的基本结构：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <!-- Bootstrap -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css?family=Lato:400,900&display=swap"
      rel="stylesheet"
    />
    <!-- Material ui icons - google web fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
    <!-- CSS -->
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div>



<p>This simple structure includes a header, a message, and a contact link.</p>

<h2>
  
  
  Step 2: Adding CSS for Styling
</h2>

<p>Here’s the CSS to style your maintenance page:<br>
</p>

<pre class="brush:php;toolbar:false">*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%; /* 1rem = 10px */
}

body{
    font-family: "Lato", sans-serif;
    font-weight: 400;
    line-height: 1.7;
    color: #777;

}

.main-title{
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 8rem;
    text-shadow: 
    1px 0px 1px #ccc, 0px 1px 1px #eee, 
    2px 1px 1px #ccc, 1px 2px 1px #eee,
    3px 2px 1px #ccc, 2px 3px 1px #eee,
    4px 3px 1px #ccc, 3px 4px 1px #eee,
    5px 4px 1px #ccc, 4px 5px 1px #eee,
    6px 5px 1px #ccc, 5px 6px 1px #eee,
    7px 6px 1px #ccc;
}

.main-title h1{
    font-size: 7rem;
    text-transform: uppercase;
    font-weight: 800;
    color: #555;
}

.main-title h2{
    font-size: 4rem;
    font-weight: 300;
    text-transform: uppercase;
}

.svg-img{
   display: block;
   margin: auto;
}

svg{
    display: block;
   margin: auto;
}

#clock{
    animation: clockHand 5s infinite linear;


    transform-box: fill-box;
    transform-origin: bottom;
}

#leftTree, #righTree{
    animation: tree 2s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#man{
    animation: manBody 1s ease-in-out infinite alternate;
    transform-box: fill-box;
    transform-origin: bottom;
}

#pc-circle{
    fill: #6ace66;
    stroke-width: 4;
    animation: change-light 4s linear infinite alternate;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35px;
    line-height: 35px;
    background-color: #f5f5f5;
    font-size: 1.3rem;
}

@keyframes clockHand{
    from{
        transform: rotateZ(0deg);
    }
    from{
        transform: rotateZ(-360deg);
    }
}

@keyframes manBody{
    from{
        transform: rotateX(0deg);
    }
    to{
        transform: rotateX(10deg);
    }
}

@keyframes tree{
    from{
        transform: rotateZ(10deg);
    }
    to{
        transform: rotateZ(-20deg);
    }
}

@keyframes change-light {
    0% {
        stroke: #cd61f8;
      }
      25% {
        stroke: #6ace66;
      }
      75% {
        stroke: #2995c0;
      }
      100% {
        stroke: #e92949;
      }
  }

  /* Media Queries */

  @media (min-width: 640px){
    .main-title h1{
        font-size: 5rem;
        text-transform: uppercase;
        font-weight: 700;
        color: #555;
    }

    .main-title h2{
        font-size: 3rem;
        font-weight: 300;
        text-transform: uppercase;
    }


    }

    @media (min-width: 768px){
        .main-title h1{
            font-size: 6rem;
            text-transform: uppercase;
            font-weight: 800;
            color: #555;
        }

        .main-title h2{
            font-size: 4rem;
            font-weight: 300;
            text-transform: uppercase;
        }


    }

    @media (min-width: 1024px){

        .main-title h1{
            font-size: 7rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

    }

    @media (min-width: 1200px){

        .main-title h1{
            font-size: 8rem;
            text-transform: uppercase;
            font-weight: 900;
            color: #555;
        }

        .main-title h2{
            font-size: 5rem;
            font-weight: 300;
            text-transform: uppercase;
        }

        .main-title{
            text-align: center;
            margin-top: 4rem;
            margin-bottom: 4rem;
        }


    }
登录后复制

这种设计确保页面干净、专业且具有视觉吸引力。

第三步：添加动画

为了使您的页面充满活力和吸引力，您可以添加动画。例如淡入效果：

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.container {
    animation: fadeIn 2s ease-in-out;
}
登录后复制

第四步：响应式设计

使用媒体查询确保页面在所有设备上看起来都很棒：

@media (max-width: 768px) {
    body {
        padding: 20px;
    }

    .container {
        width: 90%;
    }
}
登录后复制

使用高级功能增强页面

倒计时器

倒计时器增加了互动性并设定了明确的期望。以下是使用 JavaScript 实现的方法：

<p>



<h2>
  
  
  要避免的常见错误
</h2>

<p>*<em>页面超载<br>
*</em><br>
避免添加过多的元素或繁重的脚本，否则会降低页面速度。保持简单和轻量。</p>

<p>*<em>缺少关键信息<br>
*</em><br>
始终包含以下内容：</p>
登录后复制
  • 预计返回时间：让用户知道网站何时恢复上线。
  • 其他联系方式：确保用户能够联系到您。

*忽略辅助功能
*
确保所有用户都可以访问您的页面。使用：

  • 文本和背景之间的适当对比度。
  • 图像的 Alt 属性。
  • 键盘导航。

*现实世界的例子和灵感
*
幽默与创造力

像 GitHub 和 Twitter 这样的公司经常在他们的动画维护页面中使用幽默。例如：

  • “我们正在修复一些错误。没有真正的错误受到伤害！”
  • “马上回来。我们正在让事情变得很棒！”

互动功能

一些网站包含小游戏或有趣的动画来让用户娱乐。

结论

设计有效的“维护中页面 HTML”对于在停机期间维持用户信任至关重要。通过整合清晰的消息传递、响应式设计以及动画和倒计时器等引人入胜的元素，您可以将潜在的负面体验转变为积极的体验。

精心制作的动画维护页面展示了专业精神，并确保用户感到受到重视，即使主站点暂时不可用。无论您选择极简主义方法还是交互式设计，都要注重清晰度、可访问性和用户参与度

以上是设计令人愉快的维护中页面 HTML 和 CSS的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：dev.to
上一篇：如何在 JavaScript 中高效清空数组？ 下一篇：如何保持 Chrome 扩展程序的 Service Worker 持久存在？
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
function_exists()无法判定自定义函数 function test()    {        return true;    }    if (function_exists('TEST')) {        ech...
来自于 2024-04-29 11:01:01
0
3
2311
google 浏览器 手机版显示的怎么实现 老师您好，google 浏览器怎么变成手机版样式的？
来自于 2024-04-23 00:22:19
0
11
2446
子窗口操作父窗口，输出没反应 前两句可执行，最后一句没法应
来自于 2024-04-19 15:37:47
0
1
2062
父窗口没有输出 document.onclick = function(){ window.opener.document.write('我是子窗口的输出');                  ...
来自于 2024-04-18 23:52:34
0
1
1949
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
2012
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板