Home  >  Article  >  Web Front-end  >  Example tutorial: Use html5 and css3 to create a creative 404 page_html5 tutorial skills

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

WBOY
WBOYOriginal
2016-05-16 15:47:212236browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn