Example tutorial: Use html5 and css3 to create a creative 404 page_html5 tutorial skills

Today, the editor of Script House will bring you a creative 404 page created with HTML5 and CSS3. Let’s take a look at the renderings:

Implementation code

　html code:

　

Copy code

The code is as follows:

< polygon id="sword_blade" class="st1" points="437,199 446,187.3 387.3,138.9 366.3,136.7 372.2,154 " />

　　css代码:

复主代码

代码如下:

.me404 {
너비: 1000px;
높이: 480px;
위치: 절대;
위쪽: 50%;
왼쪽: 50%;
여백-왼쪽: -400px;
여백-상단: -240px;
}
.st0 {
채우기 규칙: evenodd;
클립 규칙: evenodd;
채우기: #E8EBED;
}
.st1 {
채우기: # FFFFFF;
스트로크: #89949B;
스트로크 너비: 3;
스트로크 라인 캡: 라운드;
스트로크 라인 조인: 라운드;
스트로크 마이터 제한: 10;
}
.st2 {
채우기 규칙: evenodd;
클립 규칙: evenodd;
채우기: #DBDFE1;
}
.st3 {
채우기: #FFFFFF;
}
.st4 {
채우기 규칙: evenodd;
클립 규칙: evenodd;
채우기: #E8EBED;
획: #89949B;
획 너비 : 3;
스트로크 라인 캡: 라운드;
스트로크 라인 조인: 라운드;
스트로크 마이터 제한: 10;
}
.st5 {
채우기 규칙: evenodd;
클립 규칙: 짝수;
채우기: #FFFFFF;
획: #89949B;
획 너비: 3;
스트로크 라인 캡: 라운드;
스트로크 라인 조인: 라운드 ;
스트로크 마이터 제한: 10;
}
.st6 {
채우기 규칙: evenodd;
클립 규칙: evenodd;
채우기: 없음;
스트로크: #89949B;
스트로크 너비: 3;
스트로크 라인 캡: 라운드;
스트로크 라인 조인: 라운드;
스트로크 마이터 제한: 10;
}

일반적으로 过以上两种代码就可以实现一款很有创will404页面。大家可以尝试一下哦。