2014年聖誕節倒數網頁的製作流程_html5教學技巧

　　2014年的聖誕節即將來臨之季。愛編程小編跟大家分享一款2014年聖誕節倒數網頁，當天的日期卡有抖動的效果。一起看下效果圖：

　　滑鼠點擊5號前

　　滑鼠點擊5號後

　　實作的程式碼。

　　html代碼：

XML/HTML Code複製內容到剪貼簿

1. h1>  
2.         聖誕快樂h1>h1
>
3. h1>    ul
>
4.           li
5. > 🎜>> 🎜>>              div >
6.                    1div
7. div        li> 🎜>
>
8.  🎜>>          li
9. > 🎜>> 🎜>>              div >
10.                    2div        
11. li> 🎜>> 🎜>>
12.           li> 🎜>
>
13.  🎜>>              div 🎜>>  
                3
14. div        li
>
15.  🎜>> 🎜>>          
li> 🎜>> 🎜>> 
16.             div 🎜>>                   4div
17.         li> 🎜>>
 🎜>
18. >          
li>
19.  🎜>> 🎜>> 
20.             div 🎜>>                   5div
21.         li> 🎜>>
 🎜>
22. >          
li>
23.  🎜>> 🎜>>              
24. div 🎜>>                   6div        
li
25. > 🎜>> 🎜>> 
        
26. li> 🎜>> 🎜>
>
27.               div 🎜>>
28.                    7div        li> 🎜>
>
29.  🎜>>          li
30. > 🎜>> 🎜>>              
31. div 🎜>>  
                8
32. div        li> 🎜>> 🎜>>
 
33.         li> 🎜>>
34.  🎜>>              div
 🎜>
35. >                   9div
36.         li> 🎜>> 🎜>> 
37.         li> 🎜>>
38.  🎜>>              div 🎜>>                   10
39. divdivdiv
40. divdivdiv
41.         li>
42.  🎜>> 🎜>>          li> 🎜>>
 🎜>
43. >              div 🎜>
>
44.                    11div
45. divdivdiv
46. div        li> 🎜>> 🎜>>
 
47.         li> 🎜>>
48.  🎜>>              div
 🎜>
49. >                   12div
50. divdivdivdiv
51.         li> 🎜>>
 🎜>
52. >          li>
53.  🎜>> 🎜>>              
54. div 🎜>>                   13divdiv
55. divdivdiv
divdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>>              div 🎜>>                   14divdivdivdivdivdivdiv        li> 🎜>>
56.  🎜>>          li
>
57.  🎜>> 🎜>>              div 🎜>>  
58.                 15divdiv
59. divdivdiv
60. divdivdiv
61.         li> 🎜>> 🎜>> 
62.         li> 🎜>>
 🎜>
63. >              div 🎜>
>
64.                    16div
65. divdivdivdivdiv
66. divdiv
        
67. li> 🎜>> 🎜>
>
68.           li>
 🎜>
69. > 🎜>>              div 🎜>>  
70.                 17divdiv
71. divdivdiv
72. divdiv        
73. li> 🎜>> 🎜>>          li
> 🎜>> 🎜>>              div 🎜>>                   18divdivdivdivdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>>              div 🎜>>  
74.                 19divdiv
75. divdivdiv
76.         li>
 🎜>
77. > 🎜>>          li> 🎜>> 🎜>
>
78.               div 🎜>>
79.                    20div
80. divdivdiv
81.         li> 🎜>> 🎜>>          
82. li> 🎜>> 🎜>>
83.               div 🎜>>
  
84.                 21div
div
85. divdivdivdiv
div
86.         li
>
87.  🎜>> 🎜>>          
li> 🎜>> 🎜>> 
88.             div 🎜>>                   22div
89. divdivdiv
90. divdiv
91.         li> 🎜>>
 🎜>>          li> 🎜>> 🎜>>              div 🎜>>                   23divdivdivdivdivdiv        li> 🎜>> 🎜>>          li> 🎜>> 🎜>> 
92.             div 🎜>>                   24div
93. divdivdiv
94. divdivdiv
95.         li>
96.  🎜>> 🎜>>          li> 🎜>>
 🎜>
97. >              div 🎜>
>
98.                    25div
99. divdivdiv
100. divdivdiv        
li
101. > 🎜>> 🎜>> 
    

ul>

  

    

p id id id id id id>留言🎜>>       p>   css3代碼： C/C 代碼將內容複製到剪貼簿

1. 身體{   
2.   背景： url("xmas.jpg");   
3.   顏色：#fff；   
4.   字體系列： 'Oleo Script'，草書；   
5.   內邊距：20px；   
6.   字體粗細：400；   
7. }   
8.   
9. h1 {   
10.   邊距：0；   
11.   字體大小：75px；   
12.   高：75px；  
13.   文字對齊：居中；   
14.   字體粗細：400；   
15. }   
16.   
17. ul {   
18.   邊距：0 自動 30px 自動；  
19.   填充：0；   
20.   列表樣式類型：無；   
21.   最大寬度：900px；   
22.   寬度：100%；   
23.   文字對齊：居中；   
24.   使用者選擇：無；   
25. }   
26.   
27. 李{   
28.   字體粗細：400；   
29.   背景顏色：#fff；   
30.   box-sizing：邊框框；   
31.   邊框半徑：6px；   
32.   顯示：內聯-塊；   
33.   顏色：#111；   
34.   遊標：指針；   
35.   字體大小：26px；   
36.   內邊距：15px；   
37.   邊距：25px 12px；   
38.   寬度：130px；   
39.   高度：130px；   
40.   行高：100px；   
41.   文字對齊：居中；   
42.   職位：親屬；   
43.   垂直對齊：上；   
44.   使用者選擇：無；   
45.   視角：800 像素；   
46.   轉換：全部 0.4 秒緩入；   
47. }   
48.   
49. ul li:最後一個孩子 {   
50.   
51.   背景尺寸：封面；     
52.   顯示：塊；   
53.   明確：兩者；   
54.   邊距： 20px 自動 0 自動；   
55.   寬度：200px；   
56.    高度：275 像素；  
57. }   
58.   
59. ul li:last-child .door {   
60.   字體大小：100px；   
61.   寬度：200px；   
62.   高度：275px；   
63.   高：240px；  
64. }  
66. ul li:last-child .revealed {
67. 行の高さ: 123px;   
68. }
70. .door {
71. ユーザー選択: なし。   
72. カラー:#fff;   
73. font-size: 70px;   
74. 位置: 絶対。   
75. トップ:0;   
76. 左:0;   
77. 背景色: #91c1cc;   
78. box-sizing: border-box;   
79. border-top: 2px #eee 破線;   
80. border-right: 2px #eee 破線;   
81. border-bottom: 2px #eee 破線;   
82. border-left: 1px #eee solid;   
83. border-radius: 6px;   
84. パディング:15px;   
85. 幅: 130ピクセル;   
86. 高さ:130px;   
87. 変換元: 0 40%;    
88. トランジション: すべて 0.4 秒 イーズインアウト。   
89. transform-style: preserve-3d;   
90. }
92. .current .door {
93. 背景色: #7EAD44;   
94. }
96. .current .door.open{
97. カラー: #7EAD44;   
98. }
100. .revealed {
101. ユーザー選択: なし。   
102. }
104. #message {
105. box-sizing: border-box;   
106. カラー: #222;   
107. 表示: なし。   
108. font-size: 24px;   
109. パディング: 20px;   
110. 背景: #eddecb;   
111. 最大幅: 500ピクセル;   
112. 幅: 100%;   
113. border-radius: 15px;   
114. マージン: 0 自動;   
115. }
117. .open {
118. box-shadow: 14px 0px 15px -1px rgba(0,0,0,0.2);   
119. カラー: #91c1cc;   
120. transform: rotate3d(0, 1, 0, -98deg);   
121. }
123. .jiggle {
124. アニメーション: 揺れ 0.2秒 無限;   
125. 変換: 回転(-1度);   
126. }
128. @keyframes jiggle {
129. 0% {
130. transform: rotate(-1deg);   
131. }  
132. 50% {
133. transform: rotate(1deg);   
134. }
135. }
137. @media screen and (min-width: 480px) {
138. li {
139. マージン:25px 20px;   
140. }
141. }
144. @media screen and (min-width: 768px) {
145. ボディ {
146. background-size:150px;   
147. }
149. p {
150. 右: 6%;   
151. トップ: 20%;   
152. 下: 自動;    
153. margin-left: auto;   
154. 左: 自動;   
155. }
156. }