Maison >interface Web >Tutoriel H5 >Exemple de didacticiel : Utiliser HTML5 et CSS3 pour créer une création 404 page_html5 compétences du didacticiel

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

WBOY
WBOYoriginal
2016-05-16 15:47:212249parcourir

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頁面。大家可以嘗試一下哦。

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn