404错误页面制作

最新推荐文章于 2023-11-16 21:26:51 发布

JadeDu_

最新推荐文章于 2023-11-16 21:26:51 发布

阅读量197

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/JadeDu_/article/details/111052884

版权

笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

404错误页面

在这里插入图片描述

html部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/index.css">
    <title>404错误页面</title>
    
</head>
    <body>
     <div class="error-page">
         <div class="content">
                <h1 data-text="404">404</h1>
                <h4 data-text="OPPS! Page not found! ">Opps! Page not found!</h4>
                <p>sorry, the page you're looking for doesn't exist. if you think something is broken, report a problem.</p>
                <div class="btns">
                 <a href="#">return home</a>
                 <a href="#">report problem</a>
                </div>
         </div>
      </div>
    </body>

css部分

 1. {
        padding: 0;
        margin: 0;
        outline: none;
        /* outine none去掉元素周围边框 */
        box-sizing: border-box;
        /* 把元素的内边距和边框都塞到盒子里，不让盒子变形 */
        font-family: 'Poppins', sans-serif;
        /* 两种都是非衬线字体，特点机械统一线条
        正文内通常使用serif字体，标题表格内采用醒目的sansserif  */
    }
    body {
        background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
        /* css重复渐变背景 */
        height: 100vh;
        background-size: 200;
    }
     .error-page {
        position: absolute;
        /* 针对父级元素 */
        top: 10%;
        left: 17%;
        right: 17%;
        bottom: 20%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 1);
    }
      .error-page .content {  
        max-width: 600px;  
        text-align: center;
      }
      .content h1 {  
        font-size: 18vw;  
        line-height: 1em;  
        position: relative;
      }
      .content h1:after {  
        position: absolute;  
        content: attr(data-text);  
        top: 0;  
        left: 0;  
        right: 0;  
        background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ac, #9b59b6);
        background-size: 400%;  
        -webkit-background-clip: text;  
        background-clip: text;  
        -webkit-text-fill-color: transparent;  
        text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);  
        animation: animate 10s ease-in-out infinite;
      }
      @keyframes animate {  
        0% {     
         background-position: 0 0;  
        }   
        25% {    
         background-position: 100% 0;  
        }  
        50% {    
         background-position: 100% 100%;  
        }  
        75% {    
         background-position: 0 100%;  
        }  
        100% {   
         background-position: 0 0;  
        }  
        }
      .content h4 {  
        margin-bottom: 20px;  
        text-transform: uppercase;  
        color: #000;  
        max-width: 600px;  
        font-size: 2em;  
        position: relative;
      }
      .content h4:after {  
        position: absolute;   
        content: attr(data-text);  
        top: 0;   
        left: 0;  
        right: 0;  
        text-shadow: 1px 1px 2px rgba(225, 225, 255,0.4);   
        -webkit-background-clip-: text;   
        background-clip: text;  
        -webkit-text-fill-color: transparent;
      }
      .content p {  
        font-size: 1.2em;  
        color: #0d0d0d;
      }
      .content .btns {  
        margin: 25px 0;  
        display: inline-flex;
      }
      .content .btns  a {  
        display: inline-block;  
        margin: 0 10px;  
        text-decoration: none;  
        border: 2px solid #69a6ce;  
        color: #69a6ce;  
        font-weight: 500;  
        padding: 10px 25px;  
        border-radius: 25px;  
        text-transform: uppercase;  
        transition: all 0.3s ease;
      }
      .content .btns  a:hover {  
        color: #fff;  
        background: #69a6ce;
      }

注意事项以及没遇到过的样式

*{} 通配符选择器，选中页面中所有标签自动给所有元素加样式删除默认元素的内外边距影响
margin: 0和padding: 0指所有标签的默认内外边距都为0，防止接下来移动位置有偏差
字体类型：poppins ,sans-serif为艺术性创意字体为非衬线字体
box-sizing:border-box 把元素的内外边距塞到盒子里不让盒子变形。
position：absolute子元素相对于父级元素body上下左右分别移动四个百分比数字
给父相添加flex属性以后align-items center子元素沿着侧轴排列这里的侧轴指y轴 justify-content center子元素沿着主轴x轴排列即父元素里的子元素全部垂直居中
box shadow设置盒子外面的阴影
max-width和width即父元素宽度比较哪个显示哪个
text-align ：center content内块级元素行内快元素行内元素内文本都居中
h1的伪类绝对定位是根据父级元素h1 相对定位
content:attr 不把内容在css里写死从页面中获取动态内容在这个页面中闪烁的404就是指动态内容
属性 animation 属性值ease-in-out动画以低速开始和结束属性值animate必需的定义animation名称
text-fill-color设置所有元素的颜色如果有color前者覆盖后者
text-transform：uppercase单词转化成大写
background-clip文字透明效果
display :inline-block行内元素转化为行内块元素可以设置宽高
@keyframes用来改变动画的轨迹和效果百分之多少分别表示动画运行到一部分时的背景图位置

JadeDu_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
404错误页面制作

404错误页面html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/index.css"> <ti
复制链接

扫一扫