使用 TailwindCSS 制作漂亮的 404 页面-JavaScript中文网-JavaScript教程资源分享门户

当用户在网站上访问一个不存在的页面时，系统会将他们引导到 404 页面。但是，一个简单的 "Page not found" 的错误页面很容易让用户产生不好的体验。因此，设计一个漂亮而有趣的 404 页面是很重要的，因为它可以缓解用户的不适，并增加用户的留存率。

在本文中，我们将学习如何使用 TailwindCSS 制作一个漂亮的 404 页面，为您的用户提供更好的体验。

为什么选择 TailwindCSS？

TailwindCSS 是一个 CSS 框架，它使用大量的语义化类名提供常用 CSS 样式。 TailwindCSS 的一个最大的优点是使用预设类，它使得界面设计十分灵活，同时节省了代码量，可以快速构建漂亮的界面。

与其他 CSS 框架相比，TailwindCSS 的设计重点在于灵活性，使它成为开发人员和设计师的首选框架。因此，我们可以利用 TailwindCSS 的优势，设计一个美丽的 404 页面。

TailwindCSS 的基本使用

在本文中，我们假设你已经安装了 TailwindCSS 并且通过 npm 引入了它。如果您还没有安装，您可以使用以下命令来安装 TailwindCSS。

npm install tailwindcss

在您的 CSS 文件中，您可以使用类似以下的语法

<div class="px-4 py-2 bg-gray-200 text-gray-800 font-bold shadow-md">
 This is a beautiful and lightweight box.
</div>

开始设计 404 页面

让我们来设计一个简单但漂亮的 404 页面。我们将从初始代码中开发一个基本的结构，并将逐步添加样式以获得一个精美而实用的页面，以便您的用户感到愉悦和放心。

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>404 - Page Not Found</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="h-screen w-screen flex justify-center items-center">
      <div class="bg-white rounded-lg shadow p-8">
        <h1 class="text-2xl font-bold mb-2">404 - Page Not Found</h1>
        <h2 class="text-lg mb-4">Oops! Looks like you're lost!</h2>
        <p class="mb-4">The page you are looking for does not exist. Please check the URL or try browsing our site.</p>
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
        Go back
      </button>
      </div>
    </div>
  </body>
</html>

我们创造了一个基本的结构来展示消息 "404 - Page Not Found" 和 "Oops! Looks like you're lost!". 现在，我们将逐步为这个页面添加更多的样式。

添加背景色

让我们给整个页面添加一个漂亮的背景色，这样它会更具吸引力。

<div class="h-screen w-screen flex justify-center items-center bg-blue-100">
  ...
</div>

现在页面已经从白色变成了淡蓝色，看起来更漂亮了。

添加图标

现在我们可以添加一个图标，使页面更加生动。我们将使用一个开源的图标库，叫 Font Awesome。您可以通过添加以下代码片段将 Font Awesome 库添加到您的 HTML 文件中：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

然后我们将添加一个 "Sad Face" 图标：

<i class="fas fa-frown fa-4x text-blue-200 mb-4"></i>

这个代码片段将在页面上显示一个悲伤的图标，图片宽度为四倍的 font-size，颜色为淡蓝色。

格式化字体

让我们现在来格式化我们的字体，以在页面上展示一个更有吸引力的消息。

<h1 class="text-4xl font-bold mb-2">404 - Page Not Found</h1>
<h2 class="text-2xl mb-4">Oops! Looks like you're lost!</h2>
<p class="mb-4">The page you are looking for does not exist. Please check the URL or try browsing our site.</p>

现在，文本已经更大、更加粗体了。您可以随意调整字体大小和样式，以使它们看起来更完美。

更改配色方案

最后，让我们为按钮添加点色彩。更改配色方案是改善页面的重要因素之一。为了给按钮添加更多的魅力，请使用以下代码

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  Go back
</button>

现在按钮变成了漂亮的深红色，并且当您鼠标悬停在按钮上时，它的颜色会有所变化（从深红色到更深的红色）。

完整代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>404 - Page Not Found</title>
    <link rel="stylesheet" href="./styles.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
  </head>
  <body>
    <div class="h-screen w-screen flex justify-center items-center bg-blue-100">
      <div class="bg-white rounded-lg shadow p-8">
        <i class="fas fa-frown fa-4x text-blue-200 mb-4"></i>
        <h1 class="text-4xl font-bold mb-2">404 - Page Not Found</h1>
        <h2 class="text-2xl mb-4">Oops! Looks like you're lost!</h2>
        <p class="mb-4">The page you are looking for does not exist. Please check the URL or try browsing our site.</p>
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
          Go back
        </button>
      </div>
    </div>
  </body>
</html>

现在，我们的 404 页面已经制作完成！如果您想要更多的灵活性和更多的自定义选项，您可以根据自己的需要编辑代码。但如果您遵循了上述指南，您应该能够轻松地为您的用户创建一个漂亮的 404 页面。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67ce9f93e46428fe9e91503c

使用 TailwindCSS 制作漂亮的 404 页面