Beispiel-Tutorial: Verwenden Sie HTML5 und CSS3, um eine kreative 404-Seite zu erstellen_HTML5-Tutorial-Fähigkeiten

Heute präsentiert Ihnen der Herausgeber von Script House eine kreative 404-Seite, die mit HTML5 und CSS3 erstellt wurde. Werfen wir einen Blick auf die Renderings:

Implementierungscode

　HTML-Code:

　

Code kopieren

Der Code lautet wie folgt:

< ;/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 {
largeur : 1000 px ;
hauteur : 480px;
position : absolue;
haut : 50%;
gauche : 50%;
marge-gauche : -400px;
marge-haut : -240px;
}
.st0 {
fill-rule : pairimpair ;
clip-rule : pairimpair ;
fill : #E8EBED;
}
.st1 {
fill : # FFFFFF;
trait : #89949B;
trait-largeur : 3;
trait-linecap : rond;
trait-lignejoin : rond;
trait-miterlimit : 10 ;
}
.st2 {
fill-rule : pairodd ;
clip-rule : pairodd;
fill : #DBDFE1;
}
.st3 {
fill : #FFFFFF ;
}
.st4 {
fill-rule: pairodd;
clip-rule: pairodd;
fill: #E8EBED;
trait: #89949B;
trait-largeur : 3;
Stroke-linecap: round;
Stroke-linejoin: round;
Stroke-miterlimit: 10;
}
.st5 {
fill-rule: pairodd;
clip-rule : pairodd ;
fill : #FFFFFF;
trait : #89949B;
trait-largeur : 3 ;
trait-linecap : rond ;
trait-linejoin : rond ;
trait-miterlimit : 10 ;
}
.st6 {
fill-rule : pair impair ;
clip-rule : pair impair ;
remplissage : aucun ;
trait : #89949B;
trait-largeur : 3;
trait-linecap : rond;
trait-linejoin : rond;
trait-miterlimit : 10 ;
}

过以上两种代码就可以实现一款很有创意404页面。大家可以尝试一下哦。