Le processus de production du compte à rebours de Noël 2014 webpage_html5 compétences du didacticiel

La période de Noël 2014 approche. L'éditeur d'iCoding partage avec vous une page Web du compte à rebours de Noël 2014. La carte de date du jour a un effet instable. Jetons un coup d'œil aux rendus :

Cliquez avec la souris avant le chiffre 5

Après avoir cliqué sur le n°5

Code d'implémentation.

　code html :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <h1>  
2.         Joyeux Noëlh1>  
3.     <ul>  
4.         <li>  
5.             <div classe="porte" >  
6.                 1div>  
7.         li>  
8.         <li>  
9.             <div classe="porte" >  
10.                 2div>  
11.         li>  
12.         <li>  
13.             <div classe="porte" >  
14.                 3div>  
15.         li>  
16.         <li>  
17.             <div classe="porte" >  
18.                 4div>  
19.         li>  
20.         <li>  
21.             <div classe="porte" >  
22.                 5div>  
23.         li>  
24.         <li>  
25.             <div classe="porte" >  
26.                 6div>  
27.         li>  
28.         <li>  
29.             <div classe="porte" >  
30.                 7div>  
31.         li>  
32.         <li>  
33.             <div classe="porte" >  
34.                 8div>  
35.         li>  
36.         <li>  
37.             <div classe="porte" >  
38.                 9div>  
39.         li>  
40.         <li>  
41.             <div classe="porte" >  
42.                 10div>  
43.         li>  
44.         <li>  
45.             <div classe="porte" >  
46.                 11div>  
47.         li>  
48.         <li>  
49.             <div classe="porte" >  
50.                 12div>  
51.         li>  
52.         <li>  
53.             <div classe="porte" >  
54.                 13div>  
55.         li>  
56.         <li>  
57.             <div classe="porte" >  
58.                 14div>  
59.         li>  
60.         <li>  
61.             <div classe="porte" >  
62.                 15div>  
63.         li>  
64.         <li>  
65.             <div classe="porte" >  
66.                 16div>  
67.         li>  
68.         <li>  
69.             <div classe="porte" >  
70.                 17div>  
71.         li>  
72.         <li>  
73.             <div classe="porte" >  
74.                 18div>  
75.         li>  
76.         <li>  
77.             <div classe="porte" >  
78.                 19div>  
79.         li>  
80.         <li>  
81.             <div classe="porte" >  
82.                 20div>  
83.         li>  
84.         <li>  
85.             <div classe="porte" >  
86.                 21div>  
87.         li>  
88.         <li>  
89.             <div classe="porte" >  
90.                 22div>  
91.         li>  
92.         <li>  
93.             <div classe="porte" >  
94.                 23div>  
95.         li>  
96.         <li>  
97.             <div classe="porte" >  
98.                 24div>  
99.         li>  
100.         <li>  
101.             <div classe="porte" >  
102.                 25div>  
103.         li>  
104.     ul>  
105.     <p id="message" >  
106.     p>  

　　css3代码：

Code C/C复制内容到剪贴板

1. corps {   
2.   arrière-plan : url("xmas.jpg");   
3.   couleur : #fff;   
4.   font-family : 'Oleo Script', cursive ;   
5.   remplissage : 20 px ;   
6.   poids de la police : 400 ;   
7. }   
8.   
9. h1 {   
10.   marge : 0 ;   
11.   taille de police : 75 px ;   
12.   hauteur de ligne : 75 px ;   
13.   text-align : center ;   
14.   poids de la police : 400 ;   
15. }   
16.   
17. ul {   
18.   marge :0 auto 30px auto ;   
19.   remplissage : 0 ;   
20.   list-style-type:aucun;   
21.   largeur maximale : 900 px ;   
22.   largeur : 100 % ;   
23.   text-align : center ;   
24.   sélection par l'utilisateur : aucun ;   
25. }   
26.   
27. li {   
28.   poids de la police : 400 ;   
29.   couleur de fond : #fff ;   
30.   box-sizing : border-box ;   
31.   bordure-rayon : 6 px ;   
32.   affichage : en ligne-bloc ;   
33.   couleur : #111 ;   
34.   curseur:pointeur ;   
35.   taille de la police : 26 px ;   
36.   remplissage : 15 px ;   
37.   marge : 25px 12px ;   
38.   largeur : 130 px ;   
39.   hauteur : 130 px ;   
40.   hauteur de ligne : 100 px ;   
41.   text-align:center;   
42.   position : relative ;   
43.   vertical-align:top;   
44.   sélection par l'utilisateur : aucun ;   
45.   perspective : 800 px ;   
46.   transition : tous les 0,4 s sont faciles à entrer ;   
47. }   
48.   
49. ul li:dernier-enfant {   
50.   
51.   background-size:cover;     
52.   affichage:bloc;   
53.   clear : les deux ;   
54.   marge : 20 px auto 0 auto ;   
55.   largeur : 200 px ;   
56.   hauteur : 275 px ;   
57. }   
58.   
59. ul li:dernier-enfant .door {   
60.   taille de la police : 100 px ;   
61.   largeur : 200 px ;   
62.   hauteur : 275 px ;   
63.   hauteur de ligne : 240 px ;   
64. }  
65.   
66. ul li:last-child .revealed {   
67.   高：123px；  
68. }   
69.   
70. .門{   
71.   使用者選擇：無；   
72.   顏色：#fff；   
73.   字體大小：70px；   
74.   位置：絕對；   
75.   上方：0；   
76.   左：0；   
77.   背景顏色：#91c1cc；   
78.   box-sizing：邊框框；   
79.   邊框上方： 2px #eee 虛線；   
80.   右框：2px #eee 虛線；   
81.   邊框底部： 2px #eee 虛線；   
82.   左邊框：1px #eee solid；   
83.   邊框半徑：6px；   
84.   內邊距：15px；   
85.   寬度：130px；   
86.   高度：130px；   
87.   轉換源： 0 40%；    
88.   轉換：全部 0.4 秒緩入；   
89.   轉換樣式： preserve-3d；  
90. }   
91.   
92. .目前 .door {   
93.   背景顏色：#7EAD44；   
94. }   
95.   
96. .目前.door.open{   
97.   顏色： #7EAD44；   
98. }   
99.   
100. .揭露 {   
101.   使用者選擇：無；   
102. }   
103.   
104. #訊息 {   
105.   box-sizing：邊框框；   
106.   顏色： #222；   
107.   顯示：無；   
108.   字體大小：24px；   
109.   內邊距：20px；   
110.   背景：#eddecb；   
111.   最大寬度：500px；   
112.   寬度：100%；   
113.   邊框半徑：15px；   
114.   邊距：0 自動；   
115. }   
116.   
117. .open {   
118.   盒子陰影：14px 0px 15px -1px rgba(0,0,0,0.2);   
119.   顏色： #91c1cc；   
120.   轉換：rotate3d(0, 1, 0, -98deg);   
121. }   
122.   
123. .jiggle {   
124.   動畫：搖晃 0.2 秒無限；   
125.   轉換：旋轉（-1deg）；   
126. }   
127.   
128. @keyframes 抖動 {   
129.   0% {   
130.         轉換：旋轉（-1deg）；   
131.   }  
132.   50% {   
133.       轉換：旋轉（1deg）；   
134.   }   
135. }   
136.   
137. @media 螢幕和（最小寬度：480px）{   
138.   李 {   
139.     邊距：25px 20px；   
140.   }   
141. }   
142.   
143.   
144. @media 螢幕和（最小寬度：768px）{   
145.     身體 {   
146.         背景大小：150px；   
147.     }   
148.        
149.     p {   
150.         右：6%；  
151.          上方：20%；  
152.         底部：自動；    
153.         左邊距：自動；   
154.         左：自動；   
155.     }   
156. }