Contoh tutorial: Gunakan html5 dan css3 untuk mencipta kemahiran tutorial 404 page_html5 yang kreatif

Hari ini, editor Script House akan membawakan anda halaman 404 kreatif yang dibuat dengan HTML5 dan CSS3. Mari lihat pemaparan:

Kod pelaksanaan

　kod html:

　

Salin kod

Kod tersebut adalah seperti berikut:

triforce">

L193.8,70.2z M175.2.4-107. l18.5,32L175 .4,102.2z" />





"ltrock" i d="M93. 4,367.5H89 M104,367.5h144l-11,17.2c-0.9,1.4-2.5,2.3-4.2,2.3H203c-1.6,0-3,0.7-4,2l-40,52" /> 🎜>



C207.1,267.3,207.6,266.9,208.1,26 />


="


< "lengan monyet" 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-5.2 -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
C104.3,0.3 165,296z" />

















id="number_4">
















< Polygon-ID = „sword_blade“ class = „st1“ Punkte = „437,199 446,187,3 387,3,138,9 366,3,136,7 372,2,154“ />

　　css代码：

复制代码

代码如下:

.me404 {
width: 1000px;
Höhe: 480px;
Position: absolut;
oben: 50%;
links: 50%;
Rand links: -400px;
Rand oben: -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 {
Füllregel: gerade ungerade;
Clipregel: gerade ungerade;
Füllung: #E8EBED;
Strich: #89949B;
Strichbreite : 3;
Stroke-Linecap: Round;
Stroke-Linejoin: Round;
Stroke-Miterlimit: 10;
}
.st5 {
Fill-Rule: Evenodd;
Clip-Regel: gerade ungerade;
Füllung: #FFFFFF;
Strich: #89949B;
Strichbreite: 3;
Strichzeilenkappe: rund;
Strichzeilenverbindung: rund ;
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页面。大家可以尝试一下哦.