1
00:00:00,330 --> 00:00:05,940
歡迎回來，在這一課，我們要使用引導到一個虛擬的啟動創建一個登陸頁面。

2
00:00:06,070 --> 00:00:08,760
我們的啟動被稱為絕配。

3
00:00:08,760 --> 00:00:09,210
非常有趣。

4
00:00:09,210 --> 00:00:22,430
我知道這是一個人的貓約會應用程序，我會離開它給你解釋什麼人約會的貓科動物是它可能是相對無害它可能只是匹配Sheldrick貓與人類的孤獨可能是別的東西。

5
00:00:22,440 --> 00:00:23,260
我不知道。

6
00:00:23,550 --> 00:00:27,690
讓我們做一個網站的快速瀏覽，並開始給她寫信。

7
00:00:27,690 --> 00:00:29,920
我其實只是指出了一些功能。

8
00:00:29,970 --> 00:00:31,250
沒有太多的在這裡。

9
00:00:31,290 --> 00:00:33,780
我們實際上並沒有這樣迷上了它不會做任何事情。

10
00:00:33,840 --> 00:00:37,770
所以，它真的只是HD mounseers小號但是這一切，我們學過的知識。

11
00:00:38,100 --> 00:00:42,510
因此，我們有足夠的我們的絕配首頁inContact公司的長度。

12
00:00:42,510 --> 00:00:51,030
他們並沒有真正去任何地方註冊並登錄右側的兩個小圖標那裡，我們得到她的漢堡包。

13
00:00:51,180 --> 00:00:52,320
我可以點擊它。

14
00:00:52,380 --> 00:00:55,980
現在所有這些環節都是漢堡包裡面。

15
00:00:55,980 --> 00:01:01,650
然後，我們有保持為中心的大背景圖像，並覆蓋整個背景。

16
00:01:01,740 --> 00:01:09,750
所以在中間，我們有我們開始了完美匹配的名到我們，然後我們有我們的標題上的約會應用人類唯一的飼料。

17
00:01:09,750 --> 00:01:15,420
然後，我們這裡有一個小^ h  -  [R水平規則，然後一個按鈕，開始使用的圖標。

18
00:01:15,810 --> 00:01:26,960
當我縮小這一點，在中間所有入住，這也移動了一點點，這樣我們沒有在移動設備上的某種尷尬的佈局，其中的文本開始網頁下半部。

19
00:01:27,060 --> 00:01:29,690
因此，我們移動了一下，它保持居中。

20
00:01:29,700 --> 00:01:33,900
這真的佈局容易做和引導，但它著陸頁比較有效的。

21
00:01:33,900 --> 00:01:38,180
所有這一切我們已經是一列，佔用了整個寬度。

22
00:01:38,220 --> 00:01:40,850
因此，這列掃過12個單位。

23
00:01:40,860 --> 00:01:48,510
我們不會將其分割成任何部分只是一列12個單位對面，然後我們中心認為柱內的一切。

24
00:01:48,540 --> 00:01:49,860
所以，讓我們開始吧。

25
00:01:49,860 --> 00:01:52,350
我們需要做的第一件事是做一個文件。

26
00:01:52,440 --> 00:01:54,640
我在DML一個叫做索引。

27
00:01:54,720 --> 00:02:10,410
我將在我的正常樣板絕配添加這個，然後在引導加入開始，我將使用一個CDN Bitstrips CDN。

28
00:02:11,490 --> 00:02:14,350
讓我們做的SS和Javascript在這裡。

29
00:02:14,400 --> 00:02:16,860
我們需要的JavaScript任務欄。

30
00:02:17,220 --> 00:02:19,130
因此，我們需要鏈接標記。

31
00:02:19,710 --> 00:02:22,770
然後，我們得到的JavaScript。

32
00:02:22,770 --> 00:02:24,030
收到。

33
00:02:24,090 --> 00:02:32,030
把這個下來這是一個腳本標籤的底部，然後我們設置源等於你。

34
00:02:32,520 --> 00:02:43,390
現在，如果我們打開這個了OK打開控制台，我們有一個小問題，就是我們需要的周杰倫查詢以及在引導的JavaScript命令。

35
00:02:43,450 --> 00:02:46,290
還記得導航欄課前，我們需要導入J.

36
00:02:46,290 --> 00:02:46,750
奎裡。

37
00:02:46,860 --> 00:02:52,500
因此，我們將得到一個CDN了點。

38
00:02:53,730 --> 00:02:55,290
我們會做修改後的版本。

39
00:02:55,290 --> 00:02:57,500
複製網址。

40
00:02:57,600 --> 00:03:04,110
最後，我們回到這裡去，我們必須這樣做之前，掛引導到的JavaScript。

41
00:03:04,440 --> 00:03:09,360
否則，它仍然不知道你的查詢，所以它需要先加載查詢。

42
00:03:09,360 --> 00:03:10,650
現在，讓我們再試一次。

43
00:03:10,870 --> 00:03:11,960
消防刷新。

44
00:03:12,520 --> 00:03:17,490
OK，我們沒有看到任何這是一個好兆頭，因為我們沒有看到任何錯誤。

45
00:03:18,570 --> 00:03:20,850
讓我們在中間文本開頭。

46
00:03:20,850 --> 00:03:22,480
所有這些內容在這裡。

47
00:03:22,620 --> 00:03:35,870
因此，我們需要創建一個容器，然後在容器內，我們需要一個排的div類的ECO容器，然後還有裡面，我們有另一個div我們總是需要該行。

48
00:03:35,930 --> 00:03:47,220
任何時候，我們正在使用的網格系統，然後我們的div將是類等於列破折號大12。

49
00:03:48,240 --> 00:03:50,750
這將跨越跨容器的所有道路。

50
00:03:51,210 --> 00:03:59,330
然後裡面，如果他們將有一個H1將只說完美匹配和保存。

51
00:03:59,520 --> 00:04:02,280
讓我們離開它刷新。

52
00:04:02,580 --> 00:04:06,660
而且這不是真的是我們想要但，這就是因為有我們需要做一些事情。

53
00:04:06,660 --> 00:04:09,010
首先是我們需要居中在該列中的一切。

54
00:04:09,300 --> 00:04:19,190
因此，如果我們考察我們正在處理在這裡你可以看到H1掃過所有的方式，我們只需要居中的裡面。

55
00:04:19,410 --> 00:04:21,680
第二個是，我們需要將它推下來一點。

56
00:04:21,720 --> 00:04:26,250
我們需要添加一些填充或保證金，這樣不正確的去我們的頁面的頂部。

57
00:04:26,250 --> 00:04:28,480
讓我們在內容的其餘部分將啟動。

58
00:04:28,830 --> 00:04:47,730
所以，我們也有人類唯一的貓科動物的約會應用程序，這將只是一個H 3，我們可以真正發揮用，可能是我們想要的任何元素，但我會做到的H-3人類唯一的幾許貓約會應用程序。

59
00:04:48,090 --> 00:04:59,180
然後我們就可以在該水平線，不會看起來像多地增加，但我們會在事後樣式它，那麼我們也將在類中添加一個按鈕，該按鈕。

60
00:04:59,240 --> 00:05:01,680
我們一起來看看。

61
00:05:02,100 --> 00:05:06,010
這是一個引導按鈕的默認，它是一個大按鈕。

62
00:05:06,330 --> 00:05:07,830
我們回去吧。

63
00:05:07,830 --> 00:05:29,320
因此，我們需要PTEN，然後顏色默認，然後LG之間的尺寸大，在這裡我們只添加這是上手文本並保存，讓我們看看我們結束了。

64
00:05:29,340 --> 00:05:30,330
好吧。

65
00:05:30,330 --> 00:05:34,270
因此，我們有我們的內容，現在下一個，但中心網格內。

66
00:05:34,470 --> 00:05:36,920
然後我們將重點放在填充和向下移動。

67
00:05:36,930 --> 00:05:44,720
但是，開始與這個網格內的中心，為了更輕鬆地我將它組一個div裡面所有，這樣我們就不必單獨中心每一件事情。

68
00:05:44,760 --> 00:05:51,430
我們必須居中H-1，然後三，然後按鈕，而我們可以在一個div組，只是中心與一行核實。

69
00:05:51,750 --> 00:06:01,490
讓我們做一個DIV和我給它Cantet的ID，然後我們就會把一切有內部。

70
00:06:01,560 --> 00:06:08,340
因此，H-1歲3 H.R。和按鈕將正確縮進和保存。

71
00:06:08,580 --> 00:06:14,270
所以沒有什麼應該不同，如果我刷新頁面之前，我們做到這一點，讓我們在我們的樣式表添加。

72
00:06:14,340 --> 00:06:18,840
所以我增加了一個鏈接標籤，我會打電話給我的樣式表的應用程序。

73
00:06:18,920 --> 00:06:20,920
SS它還不存在。

74
00:06:21,120 --> 00:06:24,220
所以，我需要把它存下來。

75
00:06:24,230 --> 00:06:27,060
我看到SS在同一目錄下。

76
00:06:27,420 --> 00:06:31,550
讓我們先從一些簡單的像所有的H的是紫色。

77
00:06:31,680 --> 00:06:35,030
只是為了確保它的工作原理確定。

78
00:06:35,400 --> 00:06:37,060
讓我們回到刷新。

79
00:06:37,390 --> 00:06:39,100
安德魯獲得紫色H-1。

80
00:06:39,180 --> 00:06:39,670
大。

81
00:06:39,870 --> 00:06:44,970
所以，現在我們選擇戴夫我們添加了內容的想法，並居中。

82
00:06:45,030 --> 00:06:53,620
因此，擺脫這一點，我們需要一個ID的內容和省略要做的就是文本對齊中心。

83
00:06:54,210 --> 00:06:56,430
我們回去吧。

84
00:06:56,430 --> 00:06:57,110
在那裡，我們走了。

85
00:06:57,120 --> 00:06:59,490
這樣的事情是現在中心對齊。

86
00:06:59,490 --> 00:07:07,440
下一步，我們將推動這個倒有幾分25％在頁面要準確使用填充等於25％。

87
00:07:07,470 --> 00:07:15,270
因此，在這裡我們會做填充前25％。

88
00:07:16,270 --> 00:07:22,870
和而不是給它的像素的硬一些，如果我們把它作為一個百分比它更敏感一點。

89
00:07:22,890 --> 00:07:24,790
所以這是在市中心。

90
00:07:25,230 --> 00:07:29,940
然後，我們25％的變化調整畫面。

91
00:07:29,940 --> 00:07:30,540
大。

92
00:07:30,540 --> 00:07:32,480
現在，讓我們在添加背景圖像。

93
00:07:32,670 --> 00:07:43,280
所以我使用的形象可愛的貓和人的互動會在這裡從這個上，我在我們創建的引導映像格的最後一個視頻介紹飛濺網站。

94
00:07:43,680 --> 00:07:48,300
他們有各種各樣的，你可以沒有任何問題，請使用真正偉大的高質量的圖像。

95
00:07:48,480 --> 00:07:54,110
而我使用的是在這裡我搜索該說明貓的鏈接，以及。

96
00:07:54,450 --> 00:08:00,230
這裡是你阿羅這個形象的，只要右擊複製你微升形象。

97
00:08:00,360 --> 00:08:06,310
現在，讓我們回去，我將它添加到身體的背景圖像。

98
00:08:06,800 --> 00:08:13,830
所以背景，然後給它一個URL這是巨大的你是在那裡。

99
00:08:13,830 --> 00:08:26,010
如果我們離開它，它的形式在這個級別或刷新我們得到了一個巨大的背景圖像和所有我們可以告訴的是，這是某種形式的啟動為指甲。

100
00:08:26,010 --> 00:08:36,060
因此，我們需要調整它的大小要做到這一點，我們使用的背景大小和變化，要重新被覆蓋。

101
00:08:36,060 --> 00:08:39,230
同樣我們越來越近了。

102
00:08:39,270 --> 00:08:44,950
這將使圖像盡可能小，同時仍覆蓋在屏幕的整個寬度和高度。

103
00:08:45,240 --> 00:08:52,240
所以它不會改變寬高比也不會歪斜圖像中任何的方式，但它會在兩個方向上伸展，它更需要。

104
00:08:52,350 --> 00:08:57,060
但是，它需要的最低數額，以適應我們的屏幕上，它仍然不是完美的。

105
00:08:57,210 --> 00:09:01,900
我們希望做的是不改變它的大小，但改變位置。

106
00:09:02,190 --> 00:09:10,280
我們要居中後台定位中心，但保存我們越來越近。

107
00:09:10,290 --> 00:09:13,320
但它仍然不是一個完美的比賽盡可能的圖像會。

108
00:09:13,800 --> 00:09:15,510
而這些變化會晚一點。

109
00:09:15,510 --> 00:09:24,650
現在我要專注於在導航欄中添加和這樣做，​​當你去Boucek文檔並轉至組件和我之前提到了這一點。

110
00:09:25,080 --> 00:09:27,690
我總是這樣做，如果我在一個引導導航欄中加入我。

111
00:09:27,810 --> 00:09:29,850
這只是太多的東西，否則要記住。

112
00:09:30,230 --> 00:09:32,070
而我只是在這裡複製這一權利。

113
00:09:32,370 --> 00:09:39,630
將整個導航到從這裡開始回到我們的應用程序，只是把它的權利在上面。

114
00:09:39,630 --> 00:09:46,110
這肯定不是我們想要的NAF但它包含了我們要刷新的碎片。

115
00:09:46,380 --> 00:09:47,380
這是足夠接近。

116
00:09:47,610 --> 00:09:49,360
所以這是我們要做出一些改變。

117
00:09:49,470 --> 00:09:58,570
第一和最容易的是，我們的解決方案的內容是在一個容器中，因此它不會一路到邊緣像它在這裡。

118
00:09:59,100 --> 00:10:14,250
因此，我們可以回去插圖還是我們只是改變這是DIV級的集裝箱，如果我們回去，現在你可以看到，因為我們在該容器中添加的，我們現在有一些間隔如同我們在這裡的解決方案。

119
00:10:14,250 --> 00:10:16,920
現在，讓我們開始在內華達州的實際內容工作..

120
00:10:17,070 --> 00:10:33,950
所以，最簡單的就是改變它現在只是說回品牌在這裡這條線類肯尼思等於品牌吧，我們將其更改為每固定搭配，節省了品牌。

121
00:10:33,940 --> 00:10:34,990
試試看。

122
00:10:35,490 --> 00:10:37,500
好啊好啊。

123
00:10:37,500 --> 00:10:39,050
現在，讓我們擺脫這種形式。

124
00:10:39,060 --> 00:10:41,150
我們不需要這樣的。

125
00:10:41,310 --> 00:10:45,030
因此，我們的形式沒事這裡開始。

126
00:10:45,030 --> 00:10:50,490
擺脫整個事情刷新。

127
00:10:50,860 --> 00:10:52,560
我們還擺脫下拉列表中。

128
00:10:52,560 --> 00:10:54,570
你並不需要這一點。

129
00:10:54,570 --> 00:10:56,680
這樣開始就在這裡。

130
00:10:56,680 --> 00:11:02,810
這個謊言再次結束還有新鮮。

131
00:11:03,120 --> 00:11:04,540
現在我們有一個鏈接。

132
00:11:04,710 --> 00:11:10,910
因此，我們將與被認為是註冊並記錄它這兩個環節入手。

133
00:11:11,360 --> 00:11:18,110
這是這個環節就在這裡，所以我們可以改變一個是註冊，然後複製它。

134
00:11:18,390 --> 00:11:21,450
用它裡面一個錨標記只是一個盟友。

135
00:11:21,450 --> 00:11:23,840
而這一次將被記錄。

136
00:11:24,750 --> 00:11:26,640
讓我們來看看。

137
00:11:26,700 --> 00:11:27,260
大。

138
00:11:27,270 --> 00:11:29,100
因此，圖標會在年底。

139
00:11:29,100 --> 00:11:30,380
我們有兩個鏈路。

140
00:11:30,450 --> 00:11:32,320
現在，我們在這裡需要三個環節。

141
00:11:32,340 --> 00:11:35,500
我們已經有兩個人，我們將擺脫下拉列表中。

142
00:11:35,610 --> 00:11:38,560
因此我們需要在聯絡家。

143
00:11:38,600 --> 00:11:41,490
因此，一個定位下拉這是在這裡。

144
00:11:41,490 --> 00:11:43,100
類等於下拉列表。

145
00:11:43,140 --> 00:11:49,070
讓我們擺脫它，現在阿克巴的簡化了很多。

146
00:11:49,080 --> 00:11:50,370
現在，我們有兩個不同的長度。

147
00:11:50,390 --> 00:11:53,760
我們實際上將擺脫他們兩人，並從頭開始做。

148
00:11:53,760 --> 00:12:00,120
因此，我們將在一個盟友錨標記添加，然後我們會做三次。

149
00:12:00,120 --> 00:12:02,260
這第一個應該說家。

150
00:12:02,550 --> 00:12:04,100
下一個是什麼。

151
00:12:04,320 --> 00:12:06,530
而最後一個是接觸。

152
00:12:07,020 --> 00:12:08,760
讓我們來看看。

153
00:12:08,760 --> 00:12:11,050
在那裡，我們去三個長度。

154
00:12:11,070 --> 00:12:11,970
一個次要的事情。

155
00:12:11,970 --> 00:12:16,830
家應該是積極和引導這真的很容易。

156
00:12:16,980 --> 00:12:29,390
所有我們要做的就是添加類等於主動向盟友不是錨標記，但母公司的盟友，現在我們結束了家庭作為活動鏈接。

157
00:12:29,400 --> 00:12:29,960
大。

158
00:12:30,200 --> 00:12:37,940
OK所以這是我們的導航欄中，如果我們調整，你會看到，我們已經有這個漢堡包的工作就好了。

159
00:12:38,520 --> 00:12:42,420
我們確實有一個問題，就是我們的背景圖像被搞砸。

160
00:12:42,420 --> 00:12:45,750
我們將介紹，在短短一點點，但我們有漢伯格工作的罰款。

161
00:12:45,750 --> 00:12:47,400
一切看起來都不錯。

162
00:12:47,430 --> 00:12:53,360
現在，讓我們解決的字體讓我用在這裡的字體是利多L.A ..

163
00:12:53,430 --> 00:12:57,900
這是一個從谷歌的字體，所以我會去谷歌的字體和尋找利多。

164
00:12:58,010 --> 00:13:02,720
LA T-o每個去收藏。

165
00:13:03,180 --> 00:13:06,820
讓我們使用它，如果它會得到正常的和大膽。

166
00:13:06,840 --> 00:13:10,050
此外，我們希望我們的H-1要大膽。

167
00:13:10,590 --> 00:13:11,040
好的。

168
00:13:11,070 --> 00:13:16,290
然後我們會添加這個鏈接直接進入她的申請。

169
00:13:16,290 --> 00:13:24,090
往上頂在這裡現在保存輸入應用程序的評估，我們要的字體適用於一切。

170
00:13:24,270 --> 00:13:33,970
所以我要去正文字體家庭內部選擇是利多，讓我們確保它的正確加載。

171
00:13:34,050 --> 00:13:36,780
看看我們刷新。

172
00:13:37,520 --> 00:13:43,990
而我們前面的變化很難看到，因為該文本是黑暗的，但改變你也可以看到它在這裡NFR。

173
00:13:44,160 --> 00:13:44,790
它改變了。

174
00:13:44,790 --> 00:13:47,510
它匹配了我們在這個解決方案。