1
00:00:00,660 --> 00:00:06,740
歡迎回來，在這節課我們將使用的是什麼我們到目前為止關於引導學會建立一個小的項目。

2
00:00:06,770 --> 00:00:13,590
這將包括很多我們一直在談論，包括現在扎的超大屏幕和電網系統的組成部分。

3
00:00:13,920 --> 00:00:17,370
我也扔在一個或兩個新的東西，包括這裡的圖標。

4
00:00:17,370 --> 00:00:19,180
我們還沒有看到怎麼辦的，只是還沒有。

5
00:00:19,500 --> 00:00:30,360
而且事實證明這導航欄，我把它的滾動會看到它保持固定頂端，因此它不會滾動，我們有，我們也沒見過，只是還沒有一個固定的導航欄的方式。

6
00:00:30,360 --> 00:00:34,800
然後最後我們改變了一些默認的自舉部件的顏色。

7
00:00:34,800 --> 00:00:37,290
因此，這實際上是灰色的略有不同的色調。

8
00:00:37,380 --> 00:00:40,480
這是藍色的燈罩和導航欄有一些不同的顏色。

9
00:00:40,560 --> 00:00:44,250
因此，我將展示你如何做這一切之前，我們開始編寫任何代碼。

10
00:00:44,320 --> 00:00:52,620
只是要花點時間指出一個事實，即這些圖像大部分是從一個網站叫飛濺一個很好的資源。

11
00:00:52,920 --> 00:00:57,640
所以飛濺提供一束美麗的高解析度的照片，你可以做你想要與任何。

12
00:00:57,750 --> 00:01:00,630
你可以在這裡閱讀許可，但它幾乎任何你想要的。

13
00:01:00,630 --> 00:01:09,390
這是一個創作共用許可等等等等等等我敢肯定，我真的不關心這個，但是這些照片是真的真棒，我用了很多這八人的。

14
00:01:09,390 --> 00:01:11,450
事實上，在我們的畫廊。

15
00:01:11,790 --> 00:01:21,090
並留下一個圖像這是這一個就在這裡，我居然把自己在拍攝的攝影類，這是我所採取的看起來像樣的第一件事。

16
00:01:21,090 --> 00:01:24,780
我認為，即使相比，這些的不看這麼熱。

17
00:01:24,780 --> 00:01:28,650
無論如何，如果你想使用它並不重要，這些完全相同的圖像。

18
00:01:28,740 --> 00:01:30,430
這將在所有使用任何圖像工作。

19
00:01:30,450 --> 00:01:42,570
但是如果你想完全一樣的那些我已經包括了所有曾與該視頻一起上傳，也包括這兩種顏色，我們要使用的深藍色和淺灰色在這個文件中醫學博士畫廊的聯繫。

20
00:01:42,740 --> 00:01:42,990
好。

21
00:01:42,990 --> 00:01:46,790
因此，所有這一切的出路，讓我們現在得到的項目開工。

22
00:01:47,100 --> 00:01:48,740
所以，我有一個空文件庫。

23
00:01:48,750 --> 00:01:49,620
H M湖

24
00:01:49,860 --> 00:01:58,670
我將在我的H D M L骨架在此處添加和我們就稱這個圖片庫，我們需要做的第一件事就是包括引導。

25
00:01:58,800 --> 00:02:06,490
而我只是要複製在CD從舊項目結束，所以我會做，現在。

26
00:02:06,900 --> 00:02:07,640
開始了。

27
00:02:07,710 --> 00:02:09,830
我鏈接到引導CDN。

28
00:02:10,200 --> 00:02:25,990
雖然我在這裡我也將搶白手起家綜援和Jay queery城市，我們在導航欄中課沒有和把那些在底部位置，這樣，當我們添加了導航欄在我們不必去打獵這些文件或腳本標籤。

29
00:02:26,250 --> 00:02:30,250
因此，一個保存和，我們可以做的第一件事就是加入我們的超大屏幕。

30
00:02:30,510 --> 00:02:32,160
這是很好的和容易。

31
00:02:32,400 --> 00:02:38,470
因此，我們將有一個div，這將是類等於超大屏幕。

32
00:02:38,880 --> 00:02:47,520
然後超大屏幕內將與H1，只是說，圖片庫開始。

33
00:02:47,670 --> 00:02:51,420
在那裡，我們去，我們將保存並讓我們確保這個工程。

34
00:02:51,720 --> 00:02:53,660
因此，它會打開這個文件。

35
00:02:54,060 --> 00:02:55,330
因此，我們有Boucek包括在內。

36
00:02:55,350 --> 00:02:56,780
我們看到的字體變化。

37
00:02:56,820 --> 00:02:58,980
我們看到從超大屏幕這個灰色。

38
00:02:58,980 --> 00:03:07,040
現在，讓我們確保它是一個容器內就像它是在這裡，而不是我們所擁有的在這裡它只是一路之隔的屏幕。

39
00:03:07,320 --> 00:03:12,850
因此，我們將做到這一點的div類的equals容器。

40
00:03:14,010 --> 00:03:21,900
在那裡，我們走，讓我們正確地做到這一點，刷新，我們會回去。

41
00:03:21,900 --> 00:03:25,140
好吧，所以我們有超大屏幕，但加入這一段。

42
00:03:25,140 --> 00:03:33,080
現在，我們會回來的，做的圖標，但是這僅僅是H-1的下方一個段落標記，我們可以節省。

43
00:03:33,090 --> 00:03:38,040
隨意把任何你想要的文字出現，我們正在與超大屏幕做了現在。

44
00:03:38,730 --> 00:03:45,190
因此，讓我們回去，我們現在做的導航欄，我不打算有兩個原因鍵入從頭不夠吧。

45
00:03:45,210 --> 00:03:46,970
其一是，這是相當多的代碼。

46
00:03:47,010 --> 00:03:48,000
這將需要很長的時間。

47
00:03:48,010 --> 00:03:48,840
而這部影片。

48
00:03:48,960 --> 00:03:52,870
但有兩個是我幾乎從來沒有從頭開始鍵入阿克巴的事實。

49
00:03:53,220 --> 00:04:02,580
正如我在NASCAR視頻的大部分時間中提到我的工作流程是，我去引導網站或到我與導航欄中以往所作出的網站，我複製。

50
00:04:02,580 --> 00:04:04,990
而我只是檢查它，我擺脫我不想件。

51
00:04:05,010 --> 00:04:06,530
我在添加一些新的作品。

52
00:04:06,570 --> 00:04:08,020
所以這就是我要在這裡做。

53
00:04:08,160 --> 00:04:14,160
我已經有我在導航欄確實說每個HTML應用足夠一部分。

54
00:04:14,280 --> 00:04:19,570
就是這裡，我只是要複製的，然後我們會調整它一點點。

55
00:04:19,620 --> 00:04:27,220
因此，讓我們在複製它，我會回去和我們只是把這個在文件就是這樣的最頂端。

56
00:04:27,330 --> 00:04:32,770
讓我們來看看我們得到的是新鮮的，我們有導航欄。

57
00:04:33,030 --> 00:04:34,010
這很接近。

58
00:04:34,050 --> 00:04:36,410
我們要在這裡改變品牌。

59
00:04:36,420 --> 00:04:43,020
我們也希望最終改變顏色，我們希望確保它的固定頂端，它是不正確的，但現在，我們將到達那裡。

60
00:04:43,290 --> 00:04:45,500
讓我們回過頭，只是改變品牌。

61
00:04:45,690 --> 00:04:49,980
因此，而不是咖啡我打電話給我的圖像，你可以調用這個任何你想要的。

62
00:04:49,980 --> 00:04:53,970
當然，確保其工作正常。

63
00:04:54,250 --> 00:05:01,690
我會告訴你接下來的事情是一個快速變化，我們可以改變的地方出現，而不是午睡或默認的顏色。

64
00:05:01,700 --> 00:05:06,880
現在，我們可以做，如果酒吧詩歌和我會告訴你是什麼樣子。

65
00:05:06,880 --> 00:05:12,500
現在，我們得到一個黑暗現在還是顏色都被反轉，其中文本是輕，我們得到了一個黑暗的背景。

66
00:05:12,750 --> 00:05:15,660
它仍然不是藍色，我要去為在這裡。

67
00:05:16,030 --> 00:05:19,740
而且字體也不是白色的，但我們會回來解決這個問題。

68
00:05:19,750 --> 00:05:21,650
這是現在非常接近。

69
00:05:21,670 --> 00:05:26,100
現在我們可以專注於網格上的實際圖片庫到這裡。

70
00:05:26,350 --> 00:05:29,640
讓我們通過觀察它的行為的解決方案開始。

71
00:05:29,860 --> 00:05:44,480
因此，它有三個圖像去對面啟動，然後我調整它下降到2個，然後它下降到2個，然後最後在小尺寸它去一個，你可以在這裡看到。

72
00:05:44,720 --> 00:05:47,110
而且我們有一個形象去對面。

73
00:05:47,500 --> 00:05:52,780
讓我們開始通過建立電網這個大尺寸的，我們有三個打算對面。

74
00:05:52,780 --> 00:05:54,850
還記得我們有12個單位的總數。

75
00:05:54,910 --> 00:05:59,730
因此，如果我們要三跨去，我們要他們每個人指定為四個單元。

76
00:06:00,160 --> 00:06:04,420
因此，讓我們設置了僅低於我們的超大屏幕。

77
00:06:04,420 --> 00:06:17,680
儘管如此容器，雖然我們只是做的div類中等於行，那麼這裡面我們必須DIV類的equals，我們希望它是四個單位。

78
00:06:17,770 --> 00:06:30,260
所以我們會做大量列破折號4並按回車鍵，我們可以只把一些文本從這裡開始，然後我就複製了，因為我們希望其中的三個。

79
00:06:30,430 --> 00:06:35,770
我不會擔心固定縮進但因為我們要作出一會兒就好了一個較大的變化。

80
00:06:36,100 --> 00:06:40,170
但是讓我們刷新，我們得到了這三個列去跨越。

81
00:06:40,180 --> 00:06:52,860
所以，我們要做的下一件事就是讓一些圖像將全部啟動，但只是把我的金門大橋照片L和我們要添加圖像標籤，而不是文字。

82
00:06:52,910 --> 00:07:02,620
因此圖像源等於該金門大橋你是生病了，我就粘貼三次和保存。

83
00:07:02,620 --> 00:07:10,310
如果我們回去，我們有一個問題，就是這種形象是巨大的，即使我們有那些三列。

84
00:07:10,360 --> 00:07:14,010
我們的形象是不是裡面住我們的專欄中它不是萎縮下去。

85
00:07:14,010 --> 00:07:19,010
你可以看到我們將做什麼來解決這個問題的就是添加添加一點點引導。

86
00:07:19,030 --> 00:07:24,670
我還沒有向您尚未創建它周圍的這個可愛的小邊，這就是所謂的縮略圖。

87
00:07:24,700 --> 00:07:33,250
所有我們需要做的是寫帶班等於一個div縮略圖，然後什麼形象，我們把裡面的它會被縮小以適合列中。

88
00:07:33,250 --> 00:07:37,090
而且它也是在這裡得到這個小小的邊界，我覺得看起來相當不錯。

89
00:07:37,090 --> 00:07:52,600
因此，要做到這一點，我究竟要擺脫我們與那些只是回到一個單一的圖像，並添加一個div類有等於縮略圖，做到了正常。

90
00:07:52,930 --> 00:07:57,880
我們認為包裝圖像周圍和保存。

91
00:07:57,880 --> 00:08:00,350
現在，如果我們刷新。

92
00:08:01,150 --> 00:08:06,470
你會看到，如果我們得到一個單一的形象，佔用了該網格內的空間適量。

93
00:08:06,730 --> 00:08:12,200
這是列，它周圍有一個小邊框和圖像不巨大的，這是偉大。

94
00:08:12,700 --> 00:08:15,980
所以，我們要確保，如果我們複製這它的工作原理。

95
00:08:16,060 --> 00:08:22,430
因此，這是一個圖像，讓我們重複了三次，看看會發生什麼刷新。

96
00:08:22,780 --> 00:08:23,610
還有我們走。

97
00:08:23,710 --> 00:08:25,380
我們有三個圖像。

98
00:08:25,380 --> 00:08:27,290
我會繼續前進，增加六個英寸

99
00:08:27,360 --> 00:08:29,790
所以，我們有九似總我們在這裡做。

100
00:08:30,490 --> 00:08:32,830
而我們居然沒有增加單獨的行。

101
00:08:33,040 --> 00:08:35,110
我們可以只是把它們都一樣排。

102
00:08:35,200 --> 00:08:40,420
所以複製這三個，我們有這麼遠的時間和保存。

103
00:08:40,480 --> 00:08:42,730
這將給我們九張圖像。

104
00:08:42,730 --> 00:08:46,950
如果我刷新，你會看到，他們會自動換到下一行。

105
00:08:47,230 --> 00:08:52,390
所以我們只需要有一個行並添加那些你知道醫學上號列。

106
00:08:52,480 --> 00:08:58,720
如果我們希望每個圖像佔用四個單元則意味著百分之三排，然後我們需要的圖像三行。

107
00:08:58,780 --> 00:09:02,150
我會回去和更改所有這些，你的精靈形象在視頻的結尾。

108
00:09:02,160 --> 00:09:03,600
我不想讓你看的。

109
00:09:03,630 --> 00:09:08,580
非常有趣的只是複製和粘貼，但讓我們專注於這個網格的其餘部分。

110
00:09:08,580 --> 00:09:21,420
所以，現在只要一擊媒介它關係到一個圖像跨越這不是我們想要的，我們要找的是橫跨在那個中斷點兩個圖像。

111
00:09:21,700 --> 00:09:28,730
然後介質突破點，這是我們有打小，我們還是希望它留在後2。

112
00:09:28,750 --> 00:09:39,310
因此，要解決這個問題在我們，或者去一出，立即在1大破發點或中斷點，然後小的和額外的小住宿。

113
00:09:39,460 --> 00:09:53,970
我們可以回到這裡，我們將改變所有這些你知道選擇並點擊命令d。選擇稱呼他們為大的所有實例，然後我會打左或右箭頭鍵移動光標。

114
00:09:53,990 --> 00:09:55,840
現在我可以同時編輯它們。

115
00:09:56,020 --> 00:10:04,350
而我想做的事情，我可以列中添加6，因為我們希望佩羅，這將正常工作。

116
00:10:04,410 --> 00:10:11,920
如果我回去，刷新你會看到他們住在3％行，然後我打的中位數斷點，他們去2。

117
00:10:12,280 --> 00:10:20,820
但後來我打小就跳轉到一個，並且我們，當我們打小的解決方案，保持在2。

118
00:10:20,830 --> 00:10:33,390
因此，要解決這個問題，而不是做列中六點鐘我們可以做小柱6回去再次刷新這個版本。

119
00:10:33,730 --> 00:10:34,680
我們打擊網上平台。

120
00:10:34,680 --> 00:10:35,590
我們去兩個。

121
00:10:35,800 --> 00:10:36,750
我們打小。

122
00:10:36,760 --> 00:10:43,530
我們住在2，然後我們去額外的小，我們正處在每行1的圖像。

123
00:10:43,810 --> 00:10:44,620
完善。

124
00:10:44,910 --> 00:10:49,060
所以這是我們所有為電網做，我們大部分的功能在這裡完成。

125
00:10:49,170 --> 00:10:51,050
非常非常快得到啟動和運行。

126
00:10:51,220 --> 00:10:55,570
我們要專注於現在的一些顏色，也是圖標。

127
00:10:55,870 --> 00:10:58,890
我們如何使用添加圖標引導，我會向您展示開始。

128
00:10:59,080 --> 00:11:07,670
如果你去的組件有這些字形圖標往上頂，並有一群人從挑選等得到引導。

129
00:11:08,320 --> 00:11:11,840
我們會找到一個我們要使用和我使用的人。

130
00:11:12,100 --> 00:11:14,710
我只是做了搜索，我認為它的攝像頭。

131
00:11:14,710 --> 00:11:17,920
所以在這裡這台相機，我沒有使用相機。

132
00:11:18,040 --> 00:11:19,310
這是略有不同。

133
00:11:19,330 --> 00:11:23,080
我使用的一個是更加復古相機，我會告訴你如何添加英寸

134
00:11:23,080 --> 00:11:28,680
它實際上不是引導的一部分，但讓我們開始隨引導的普通相機。

135
00:11:28,810 --> 00:11:32,040
因此，我們寫克利福德卡恩再與康恩破折號相機去。

136
00:11:32,160 --> 00:11:43,450
如果你滾動往後你能看到他們解釋如何使用它來創建一個跨度，其中一類是等於與精讀，然後字形它可以衝字形圖標的名稱。

137
00:11:43,480 --> 00:11:58,200
因此，讓我們複製這個跨度，我們將做它的H-1裡面只是把它的H-1的開始啟動，我們希望有一個快速的A-桿破折號相機，我們將保存並刷新。

138
00:11:58,600 --> 00:12:01,060
就這樣，你可以在那裡得到一個攝像頭。

139
00:12:01,410 --> 00:12:07,350
如果我們希望我們的空間可以做到這一點通過填充，或者我們可以只添加一個空格在那裡。

140
00:12:08,260 --> 00:12:16,970
而我們得到了一個空間，我們可以做同樣的事情在導航欄中，我用一個被調用的照片去仔細檢查在這裡。

141
00:12:16,980 --> 00:12:22,780
你可以這樣做頁照片畫面上的搜索。

142
00:12:22,890 --> 00:12:24,080
它就在那裡。

143
00:12:24,260 --> 00:12:26,890
它可以去，如果它可以衝照片。

144
00:12:27,730 --> 00:12:32,890
因此，我們將在這裡上到導航欄中的品牌，我們在跨重新粘貼。

145
00:12:33,120 --> 00:12:41,420
然後跨度裡面的類應在點擊圖片，我們會在那兒添加一個空格為好。

146
00:12:41,460 --> 00:12:45,880
我們再回到我們的網站是新鮮的，我們現在有一個小圖片在那裡。

147
00:12:46,360 --> 00:12:47,930
而且我們也有攝像頭。

148
00:12:48,150 --> 00:12:54,740
接下來，讓我們來解決導航欄，我們將通過它固定在頂部，這樣你可以看到現在就開始。

149
00:12:54,790 --> 00:12:56,470
那打盹我們的春聯了。

150
00:12:56,950 --> 00:12:59,210
但在解決它在那裡停留。

151
00:12:59,640 --> 00:13:04,460
要做到這一點那就是我們要添加到我們的導航欄的類。

152
00:13:04,480 --> 00:13:11,800
所以，正確的在這裡，我們希望導航欄短跑衝刺固定頂部和保存。

153
00:13:12,120 --> 00:13:16,570
如果我們是新鮮的，你會看到它的固定在上面。

154
00:13:16,570 --> 00:13:25,800
有一個小問題，它是我們的內容目前是背後一點點，我們希望它有超大屏幕高於正常間距。

155
00:13:25,810 --> 00:13:32,770
我們需要做的是添加填充的一點點我們的身體和它正好是70個像素。

156
00:13:32,770 --> 00:13:39,320
引導程序的文檔會告訴你，如果你忘記填充70像素是我們想要這就是現在四寬度。

157
00:13:39,490 --> 00:14:01,850
因此，我們將去這裡，現在我們將創建一個樣式表，我會打電話給它畫廊Dotsie SS，然後選擇裡面的填充體頂部70像素，然後我們需要添加在鏈接到該樣式表是畫廊CS S.

158
00:14:01,920 --> 00:14:03,760
現在，讓我們確保的工作。

159
00:14:03,790 --> 00:14:04,330
在那裡，我們走了。