チュートリアルの例: html5 と css3 を使用してクリエイティブ 404 page_html5 チュートリアルを作成する

今日は、Script House の編集者が HTML5 と CSS3 で作成したクリエイティブな 404 ページをお届けします。レンダリングを見てみましょう:

実装コード

htmlコード:

コードをコピーします

コードは次のとおりです:

M175.4,109.4l6 .3-10.8h-12.5L175.4,109.4z" />



















C163.3,304.6,165,300.3, 165,296z" />

















g>









;/g>

　　css代码：

复制代码

代码如下:

.me404 {
width: 1000px;
height: 480px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -400px;
margin-top: -240px;
}
.st0 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #E8EBED;
}
.st1 {
fill: #FFFFFF;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st2 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #DBDFE1;
}
.st3 {
fill: #FFFFFF;
}
.st4 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #E8EBED;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st5 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: #FFFFFF;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.st6 {
fill-rule: evenodd;
clip-rule: evenodd;
fill: none;
stroke: #89949B;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}

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