> For the complete documentation index, see [llms.txt](https://zpliu.gitbook.io/booknote/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://zpliu.gitbook.io/booknote/cottonweb/views/404-ye-mian.md).

# 404页面

404页面的配置很简单，只用了一个GIF动图，以及使用elemen-ui的布局；在点击按钮上使用了手动路由。

## 居中布局

* 使用`flex`布局，并且水平对齐方式为`center`
* 设置按钮点击事件

```javascript
    <el-row type="flex" justify="center">
      <el-col :xs="24" :sm="12">
        <div class="four_zero_four_bg">
          <h1 class="text-center">404</h1>
        </div>
        <div class="contant_box_404">
          <h3 class="h2">Look like you're lost</h3>

          <p>the page you are looking for not avaible!</p>

          <el-button type="success" @click="handlegoHome">Go to Home</el-button>
        </div>
      </el-col>
    </el-row>
```

## CSS设置背景

* `text-align :center`用于将`el-col`内的字居中
* `.four_zero_four_bg`设置了GIF图片的显示

```css
.page_404 {
  padding: 40px 0;
  background: #fff;
  font-family: "Arvo", serif;
  text-align: center;
}

.four_zero_four_bg {
  background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
  height: 400px;
  background-position: center;
}
```

## 路由跳转事件

* 当用户点击是，调用`router`中的push函数进行手动路由跳转

```javascript
    handlegoHome() {
      this.$router.push({
        path: "/",
        name: "home"
      });
    }
```

[github源码固定地址](https://github.com/zpliu1126/cottonweb/blob/64dd317860569cc11bd6705489ff936f05689482/src/views/404.vue)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://zpliu.gitbook.io/booknote/cottonweb/views/404-ye-mian.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.