Exemple de didacticiel : Utiliser HTML5 et CSS3 pour créer une création 404 page_html5 compétences du didacticiel

Aujourd'hui, l'éditeur de Script House vous propose une page créative 404 créée avec HTML5 et CSS3. Jetons un coup d'œil aux rendus :

Code d'implémentation

　code html :

　

Copier le code

Le code est le suivant :

< ;/g>












路徑"sword_handle_line" class="st14" d="M453.9,197c2,1.5,2.4,4.3,0.9,6.3l-0.6,0.8c-1.5,2-4.3,2.4 -6.3,0.9" />
路徑id="sword_hilt" class="st5" d="M432.5,197.1l10.6-13.9c1.6-2.2,4.7-2.6,6.9-0.9c2. 2,1.6,2.6,4.7,0.9,6.9lc2. 10.6,13.9 c-1.6,2.2-4.7,2.6-6.9,0.9C431.2,202.4,430.8,199.3,432.5,197.1z" />

css代碼：

複製程式碼程式碼如下：

.me404 {

碼> 高度：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;
.st5 {
填充規則：evenodd;
剪輯規則：evenodd；
填充：#FFFFFF；
描邊：#89949B;
描邊寬度：3;
描邊線帽：圓形；
描邊線連接：圓形🎜> 描邊線帽：圓形；
描邊線連接：圓形;
筆劃斜接限制：10;
}
.st6 {
填充規則：evenodd;
剪輯規則：evenodd;
填充：無；
筆劃： # 89949B;
筆畫寬度：3;
筆畫線帽：圓形；
筆畫線連接：圓形；
筆畫斜接限制：10;
}

透過以上兩種程式碼就可以實現一款很有創意404頁面。大家可以嘗試一下哦。