예제 튜토리얼: html5 및 css3을 사용하여 창의적인 404 page_html5 튜토리얼 기술 만들기

오늘은 Script House의 편집자가 HTML5와 CSS3로 만든 창의적인 404 페이지를 여러분께 선보일 것입니다. 렌더링을 살펴보겠습니다.

구현 코드

　html 코드:

　

코드 복사

코드는 다음과 같습니다.

<경로 ID= "zelda_highlight" 클래스= "st3" d="M150.6,66.6h12.5l-6.3,10.8L150.6,66.6z M193.8,77.4l6.3-10.8h-12.5L193.8,77.4z
M175.4,109.4l6 .3-10.8h-12.5L175.4,109.4z" />

















<경로 id= "monkey-arm" class="st5" d="M164.3,344.1c-0.9-0.3-1.8-0.2-2.5,0.2c-0.3-0.2-0.6-0.3-0.9-0.4c-0.8-0.3-1.5- 0.5-2.3-0.5
c-0.1,0-0.2-0.1-0.3-0.3c-2.4-11.4-1.1-27.6,0.3-43.8c0-0.1,1.2-5.7-2.6-7.2c-5.2-2.1 -5.5,2.5-5.5,2.7c-0.5,4.8-3.6,39,1.1,51.4
c0,0.1,0,0.2,0,0.3c-0.4,0.5-0.7,1-0.9,1.7c- 1.5,3.9,0.7,8.3,4.8,9.9c4.1,1.6,8.7-0.3,10.1-4.2c0.5-1.3,0.6-2.7,0.3-4
c0-0.1,0-0.2,0.1- 0.2c0.5-0.7,0.9-1.6,0.5-2.9C166.2,345.5,165.4,344.4,164.3,344.1z" />

<경로 클래스 ="st12" d="M165,296c0-4.3-1.8-10.8-6-12c-12.5-3.5-12.4,11.1-12.4,11.1s10.8-1.4,16.7,9.6
C163.3,304.6,165,300.3, 165,296z" />
























< ;/g>















< 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页面。大家可以尝试一下哦。