1
00:00:00,270 --> 00:00:01,530
歡迎回來。

2
00:00:01,530 --> 00:00:08,580
現在，我們有我們做的待辦事宜列表應用的基本功能是時候讓我們能夠專注於使它看起來是這樣的。

3
00:00:08,880 --> 00:00:11,430
因此，我們絕對有相當長的路要走。

4
00:00:11,550 --> 00:00:14,220
我們只是要在及時出擊這一個作品。

5
00:00:14,280 --> 00:00:17,080
我會嘗試這樣做是最合理的可能的順序。

6
00:00:17,220 --> 00:00:28,740
我們將與一些較大件喜歡的背景顏色和字體確保我們有正確的margin和padding在這裡這個大容器，然後我們將著眼於一些更細微的東西開始。

7
00:00:28,760 --> 00:00:30,460
OK讓我們在這裡開始。

8
00:00:30,480 --> 00:00:33,200
首先我們會做我會做一個完整的畫面。

9
00:00:33,720 --> 00:00:35,670
我們只需按下下來開始。

10
00:00:35,670 --> 00:00:37,120
這是我們的容器div。

11
00:00:37,440 --> 00:00:41,630
我們將添加保證金頂端，使我們有更多的空間在這裡。

12
00:00:41,910 --> 00:00:47,180
因此，我們將回到我們的（C S）S和可關閉或JavaScript現在。

13
00:00:47,670 --> 00:00:52,520
我們div有容器的一個想法，然後我們去選擇，在這裡，你已經完成了。

14
00:00:52,860 --> 00:00:59,550
而非零奧托井的餘量給它一百個像素的頂部和底部。

15
00:00:59,820 --> 00:01:05,690
請記住，我們需要在x，如果我們有零我們不需要X，但如果我們有一些我們做的。

16
00:01:05,880 --> 00:01:07,230
現在讓我們一起來看看。

17
00:01:07,650 --> 00:01:10,100
OK所以現在他們已經開始在同一個地方。

18
00:01:10,200 --> 00:01:12,400
他們有相同的幅度。

19
00:01:12,420 --> 00:01:18,090
我們要做的下一件事就是添加一個背景色為這個容器，這其中有。

20
00:01:18,090 --> 00:01:22,830
這是很難一點點地看到，但是當我刪除的東西它背後顯示了通過。

21
00:01:22,950 --> 00:01:24,570
這是這個顏色就在這裡。

22
00:01:24,630 --> 00:01:25,700
所以這一次。

23
00:01:26,080 --> 00:01:28,190
因此，我們將繼續前進，添加。

24
00:01:28,830 --> 00:01:34,680
因此，而不是容器也說背景和顏色。

25
00:01:34,680 --> 00:01:39,680
我就看出來是F 7 7 7之後。

26
00:01:39,960 --> 00:01:41,210
就這樣。

27
00:01:41,850 --> 00:01:43,570
讓我們檢查如何看起來。

28
00:01:44,000 --> 00:01:44,400
好。

29
00:01:44,490 --> 00:01:50,430
因此，我們有相同的灰色，我們已經在這裡。

30
00:01:50,430 --> 00:01:52,790
這是相同的淺灰色。

31
00:01:52,830 --> 00:01:54,990
我們要做的下一件事就是在邊界的工作。

32
00:01:55,230 --> 00:01:57,460
這實際上沒有邊框。

33
00:01:57,540 --> 00:02:00,840
它擁有的是一個很輕微的箱子的影子。

34
00:02:00,840 --> 00:02:02,870
所以，我們還沒有看到影子盒還。

35
00:02:02,940 --> 00:02:09,820
我會證明這裡進入MT-NW，它只是一個添加陰影效果的方法。

36
00:02:09,870 --> 00:02:19,750
所以，如果我向下滾動，你可以看到這裡有一些不同的盒子陰影，我們將有一個很輕的一個，但如果你身邊這個通知有一個非常輕微的陰影。

37
00:02:20,220 --> 00:02:39,020
因此，語法和我們將要使用將擺脫我們的邊界的陰影箱破折號影子0 0 3個像素，然後一種顏色，我們的顏色這將是基本上只是黑色的，但它R.G ..

38
00:02:39,180 --> 00:02:43,260
然後，我們要使它真的很透明。

39
00:02:43,560 --> 00:02:45,380
所以只是勉強明顯。

40
00:02:45,400 --> 00:02:46,890
如果我刷新。

41
00:02:46,890 --> 00:02:52,090
我們現在有沒有邊界，但有解決這個元素有輕微的陰影。

42
00:02:52,710 --> 00:02:53,170
好。

43
00:02:53,250 --> 00:02:55,460
這就是我們要做的容器了。

44
00:02:55,770 --> 00:02:57,480
讓我們來攻擊H-1。

45
00:02:57,480 --> 00:02:59,490
所以這個標題在這裡。

46
00:02:59,580 --> 00:03:04,320
所以這是我們這個時代他我只是認為是H1。

47
00:03:04,320 --> 00:03:06,710
它沒有一個ID或任何東西，這很好。

48
00:03:06,960 --> 00:03:12,120
讓我們去綜援文件，並在背景顏色將啟動。

49
00:03:12,390 --> 00:03:30,010
所以我們會選擇每一個和背景是一個顏色，是2 9 8 0為9，他們會保存和更新，現在我們有藍色正確的陰影。

50
00:03:31,210 --> 00:03:38,890
因此，我們也將改變字體顏色為白色，並迅速告訴你，。

51
00:03:38,970 --> 00:03:39,450
好吧。

52
00:03:39,510 --> 00:03:42,890
慢慢的逐日這裡。

53
00:03:43,050 --> 00:03:51,160
我們要做的下一件事就是給它無餘量，現在我們剛剛擺脫這個空間，我們在這裡過的。

54
00:03:51,420 --> 00:03:53,220
正如你可以在這裡看到沒有餘量。

55
00:03:53,220 --> 00:03:54,440
這是我們的H-1。

56
00:03:54,510 --> 00:03:55,970
有填充在這裡。

57
00:03:56,340 --> 00:03:59,550
因此，文本不走正對著的邊緣像它在這裡。

58
00:03:59,700 --> 00:04:03,330
但是有藍色包裝盒外面沒有餘量。

59
00:04:03,360 --> 00:04:10,130
這是我們的文字輸入，並且也增加了填充，但有周圍沒有任何保證金。

60
00:04:10,200 --> 00:04:13,360
因此，我們將通過添加一些填充圍繞我們的To Do列表開始。

61
00:04:13,370 --> 00:04:24,240
H-1所以在這裡，我們要10個像素添加到頂部和底部20個像素左右和保存。

62
00:04:25,260 --> 00:04:27,150
你可以看到我們越來越近了。

63
00:04:27,480 --> 00:04:29,000
我們需要改變字體大小。

64
00:04:29,070 --> 00:04:30,350
需要更改字體。

65
00:04:30,420 --> 00:04:34,900
我們也將大寫所有這一切，我們可以現在做到這一點。

66
00:04:34,980 --> 00:04:40,010
你應該知道我的最愛之一是文本轉換為大寫。

67
00:04:40,320 --> 00:04:42,480
我只是覺得這很酷。

68
00:04:42,480 --> 00:04:56,840
在那裡，我們去我們得到了所有大寫字體大小必須是24像素，字體大小24 x和保存好，我們會做的最後一件事是確保它是一個正常的字體粗細。

69
00:04:57,020 --> 00:05:00,970
因此，通過默認的H1實際上是粗體，我們不希望出現這種情況。

70
00:05:01,290 --> 00:05:09,310
所以我們會做凡特的方式正常，或者我們也可以這樣寫字體的粗細400。

71
00:05:09,320 --> 00:05:10,290
在那裡，我們走了。

72
00:05:10,350 --> 00:05:17,510
現在，它只是一個改變，這將回來要解決的擺脫這些要點的下一件事字體的問題。

73
00:05:17,510 --> 00:05:20,240
你可以看到，如果我們沒有任何要點在這裡。

74
00:05:20,250 --> 00:05:23,430
這些要點中被認為是默認瀏覽器的風格。

75
00:05:23,510 --> 00:05:25,360
所以我們覆蓋。

76
00:05:25,400 --> 00:05:32,270
我們將選擇UL，他們是內部的，說列表樣式沒有。

77
00:05:32,370 --> 00:05:37,790
如果我們回去和刷新我們現在沒有任何要點。

78
00:05:37,800 --> 00:05:56,240
我要做的另一件事是尊敬你，以及設定的保證金為零，填充為零，它會在這裡刷新，而不是剛上車的好，我們確實有空間的兩側擺脫空間在這裡，我們需要使用的，但是那是謊言不是UL本身。

79
00:05:56,250 --> 00:05:58,440
因此，我們會回來這一點。

80
00:05:58,440 --> 00:06:04,760
現在，讓我們在正確的字體添加這種字體的名稱是散板，它是谷歌的字體的一部分。

81
00:06:04,880 --> 00:06:09,400
所以我有一個開放的這裡我只是做它散板搜索。

82
00:06:09,620 --> 00:06:10,720
現在我們開始。

83
00:06:10,770 --> 00:06:14,230
添加到收藏集，然後使用。

84
00:06:14,510 --> 00:06:16,490
我們會想正常的方式。

85
00:06:16,800 --> 00:06:20,660
我們將添加在大膽也網上平台。

86
00:06:20,660 --> 00:06:25,620
現在，讓我們繼續前進，這個鏈接複製到我們的HMO，我們可以關閉此窗口。

87
00:06:25,980 --> 00:06:37,520
回去的地方，每個團隊在這裡，只是往上頂貼，在保存，然後我們會去我們看到評估和我們將添加一些樣式的身體。

88
00:06:37,740 --> 00:06:44,780
一切都使用這個字體，所以我們只在字體系列添加機器人。

89
00:06:45,530 --> 00:06:46,680
就這樣。

90
00:06:47,390 --> 00:06:53,650
如果我們現在回過頭來刷新我們的H-1是非常有。

91
00:06:53,660 --> 00:06:59,960
除了這個按鈕，我們還沒有在所有的字體一摸一樣的間距所有的好顏色。

92
00:06:59,970 --> 00:07:01,970
和我們的盟友快了。

93
00:07:01,980 --> 00:07:03,060
他們有合適的字體。

94
00:07:03,140 --> 00:07:06,680
我們需要一些的間距和填充問題的工作。

95
00:07:06,690 --> 00:07:10,660
我們將處理接下來的事情是對謊言的背景顏色。

96
00:07:11,250 --> 00:07:12,750
所以每一個其他的謊言。

97
00:07:12,930 --> 00:07:19,280
它從一個白色純白到這個灰色的顏色，我們有作為的一個的背景。

98
00:07:19,470 --> 00:07:24,340
因此，我們可以使用SS到樣式添加到所有其他盟友。

99
00:07:24,380 --> 00:07:25,450
因此，讓我們做這件事情。

100
00:07:25,500 --> 00:07:43,520
我們要做的第一件事是選擇所有的盟友，並給他們的白色背景，所以我們可以做到這一點與F F F或白色或R-GA 255 255到55，然後我們會做所有其他的謊言。

101
00:07:43,740 --> 00:07:50,080
而對於該語法是一個謊言，孩子結束。

102
00:07:50,360 --> 00:07:53,970
而且太和良好定義的每個其它的圖案。

103
00:07:54,140 --> 00:07:58,670
如果我們做了三個，它會說每一個第三，但我們只是想每隔。

104
00:07:59,000 --> 00:08:08,880
而我們會背景顏色，我們用於容器背景並刷新相同F7 F7 F7。

105
00:08:08,880 --> 00:08:16,500
現在很難看到，因為他們是小了點，但現在所有其他的謊言是這個灰色。

106
00:08:16,700 --> 00:08:21,030
所以，在添加一些更多的，你可以看到他們交替完美。

107
00:08:21,020 --> 00:08:25,370
現在，讓我們解決的謊言，也是填充的高度的問題。

108
00:08:25,760 --> 00:08:36,540
要做的第一件事就是給他們的40個像素，因此所有的盟友高度40×的高度，我們會回去刷新。

109
00:08:36,950 --> 00:08:39,000
行，所以它們佔用的空間適量。

110
00:08:39,000 --> 00:08:42,620
現在，如果我們比較這些字體有一些問題。

111
00:08:42,620 --> 00:08:44,600
同時，我們也需要增加一些填充。

112
00:08:44,970 --> 00:08:51,570
接下來將會使我們的文本垂直居中改變對所在行高屬性。

113
00:08:51,570 --> 00:08:55,050
眼下該行基本上是這麼高。

114
00:08:55,080 --> 00:09:09,510
我們要讓它佔據整個40像素顯示你行高40×，並且不會改變，它只是改變了行的大小字體的大小。

115
00:09:09,540 --> 00:09:10,880
它現在40個像素。

116
00:09:10,880 --> 00:09:13,850
因此，該行佔據了這整個地區。

117
00:09:14,150 --> 00:09:21,020
接下來的次要的是我們有純黑色的顏色和我使用的顏色是不完全的黑色。

118
00:09:21,060 --> 00:09:22,820
這是稍輕。

119
00:09:23,070 --> 00:09:33,530
因此，我們將設置顏色，它是六六六刷新，然後我們去下一個，讓我們將輸入。

120
00:09:33,540 --> 00:09:35,260
因此，我們有你需要做一些事情。

121
00:09:35,490 --> 00:09:39,660
其中第一個是確保它佔用的空間的適量。

122
00:09:39,770 --> 00:09:45,740
所以這個輸入大得多，它不只是填充或保證金的字體大小較大。

123
00:09:45,750 --> 00:09:47,420
我們有一個新的背景顏色為好。

124
00:09:47,750 --> 00:09:49,700
還有的，當我們點擊邊框。

125
00:09:49,740 --> 00:09:54,610
因此，讓我們對所有這些工作，我們將通過只是在一個更大的字體大小增加開始。

126
00:09:54,840 --> 00:10:05,420
因此，我們將選擇輸入字體大小，我們將設置字體大小為18像素。

127
00:10:05,960 --> 00:10:14,570
雖然我們在這裡，我們會做的背景顏色以及背景顏色和它的同F 7 7 7 1/2。

128
00:10:14,730 --> 00:10:16,350
就這樣。

129
00:10:16,760 --> 00:10:18,040
讓我們刷新。

130
00:10:18,770 --> 00:10:19,510
好。

131
00:10:19,700 --> 00:10:21,180
我們越來越近。

132
00:10:21,170 --> 00:10:29,880
我們要做的下一件事就是添加一個寬度，並且我們打算給它100％的寬度。

133
00:10:29,880 --> 00:10:33,590
所以現在它一定會跨越容器方式的一部分。

134
00:10:33,600 --> 00:10:36,820
如果我們刷新現在去所有的方式。

135
00:10:37,050 --> 00:10:39,200
但是，我們有一些小的問題。

136
00:10:39,210 --> 00:10:42,970
我們要照顧的第一件事是一些填充在裡面。

137
00:10:43,400 --> 00:10:50,320
所以，我們要添加填充頂部13像素13像素的側面上的權利。

138
00:10:50,370 --> 00:10:54,960
在底部13的像素和在左邊的20個像素。

139
00:10:54,950 --> 00:10:56,250
所以你可以看到這一點。

140
00:10:56,550 --> 00:10:58,770
我們有頂部和底部是13。

141
00:10:59,000 --> 00:11:01,550
而在左邊有有20個像素。

142
00:11:01,590 --> 00:11:07,430
所以，如果我是鮮我們現在有一個更大的投入，佔用的空間適量。

143
00:11:07,590 --> 00:11:11,670
我們確實有一個問題，就是輸入的是現在太長。

144
00:11:11,790 --> 00:11:27,710
當我們說，隨著應該是100％的，與實際上只是內容並沒有包括填充，並沒有包括這意味著，我們的投入去早已過了div的結束，而不是搞亂保證金與填充。

145
00:11:27,770 --> 00:11:33,820
我的意思是，以顯示改變它是一種稱為框的大小屬性的另一種方式。

146
00:11:33,840 --> 00:11:41,400
因此，與塊大小，你有幾個不同的選擇，但它基本上控制盒是如何大小的方塊模式。

147
00:11:41,390 --> 00:11:44,100
而我們要改變它邊境Dasch框。

148
00:11:44,270 --> 00:11:52,740
什麼這樣做我就看它說的寬度和高度的屬性包括填充和邊界，但不是保證金。

149
00:11:52,800 --> 00:12:05,170
因此，如果我們將其更改為邊框框，我會做，現在我們進入這裡只需添加盒上漿整理箱，並保存它之前，我繼續前進。

150
00:12:05,310 --> 00:12:10,250
我要指出這是我們都希望有前綴的屬性之一。

151
00:12:10,250 --> 00:12:15,170
所以Web Kit和Mozy的是萬盎司，並從微軟的混亂。

152
00:12:15,540 --> 00:12:16,850
我不打算這樣做了。

153
00:12:16,910 --> 00:12:18,250
這將是在溶液中的代碼。

154
00:12:18,410 --> 00:12:20,330
但它只是需要很長時間打字了。

155
00:12:20,660 --> 00:12:25,940
因此，它的工作只是它是如何在Chrome至少我現在刷新。

156
00:12:26,040 --> 00:12:32,180
我們的框，包括在邊界填充，但它不包括餘量。

157
00:12:32,180 --> 00:12:34,820
因此，我們結束了一個完美的結合。

158
00:12:34,880 --> 00:12:39,220
接下來我要給字體顏色，當我鍵入在那裡。

159
00:12:39,620 --> 00:12:41,130
因此，所有我們需要做的。

160
00:12:41,330 --> 00:12:49,920
我將只取從H-1相同的顏色，並深入到我們的投入，只是說，顏色是那種顏色。

161
00:12:49,910 --> 00:12:54,400
如果我們現在刷新，我們開始鍵入我們走吧。

162
00:12:54,410 --> 00:12:56,290
現在，讓我們關注的影響。

163
00:12:56,580 --> 00:13:03,860
當我們點擊被稱為輸入聚焦你可以在這裡看到我們得到它周圍的邊框。

164
00:13:03,920 --> 00:13:05,060
因此，我們需要對這項工作。

165
00:13:05,120 --> 00:13:08,050
現在，我們有默認焦點效果。

166
00:13:08,120 --> 00:13:17,590
因此，有該輸入冒號焦點就像懸停偽選擇的選擇。

167
00:13:17,650 --> 00:13:21,510
當我們把重點放在輸入這些細胞才會運行。

168
00:13:21,920 --> 00:13:27,310
所以我打算讓白色的背景，當我們重點關注一下。

169
00:13:27,570 --> 00:13:47,180
我還打算給它的三個像素的實心藍色邊框，我們一直與我們會給它不是一個輪廓的輪廓是指這個惱人的亮點，我們從瀏覽器本身得到的。

170
00:13:47,180 --> 00:13:56,610
現在，如果我們專注於我們的輸入得到這個新的藍色邊框，我們也改變背景顏色所以它的灰色現在是白色的。

171
00:13:57,570 --> 00:14:02,850
所以這就是我們所需要的投入做，雖然我們應該去補充一點，我們這裡有佔位符文本。

172
00:14:03,030 --> 00:14:10,620
所以，我會去索引HTL和旁邊的輸入或輸入將添加佔位符屬性。

173
00:14:10,910 --> 00:14:12,270
這可能是你想要的。

174
00:14:12,470 --> 00:14:13,460
我就讓它匹配。

175
00:14:13,490 --> 00:14:18,800
所以這是添加新辦和刷新。

176
00:14:18,840 --> 00:14:19,490
在那裡，我們走了。