本篇文章，主要讲解一下如何创建一个精美404页面
页面效果图
HTML+CSS部分（index.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页丢失了哦！</title> </head> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .frem{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; background: url('http://175.178.184.206/usr/themes/handsome/gifs.gif'); background-position: center; background-repeat: no-repeat; } .frem p{ position: absolute; top: 3rem; font-size: 7rem; color: #00000063; } .frem h2{ position: absolute; bottom: 8rem; font-size: 34px; } .frem h5{ position: absolute; bottom: 6rem; color: #9c9c9c; } .frem a{ position: absolute; bottom: 1rem; background: linear-gradient(45deg, #2a98ff, #09ff00); padding: 12px; color: white; text-decoration: none; font-size: 20px; border-radius: 13px; } </style> <body> <div class="frem"> <p>404</p> <h2>看起来你迷路了</h2> <h5>你所寻找的页面已丢失!</h5> <a href="http://wyz-math.cn">返回首页</a> </div> </body> </html>
