歡迎回來，在這節課我們將使用的是什麼我們到目前為止關於引導學會建立一個小的項目。
這將包括很多我們一直在談論，包括現在扎的超大屏幕和電網系統的組成部分。
我也扔在一個或兩個新的東西，包括這裡的圖標。
我們還沒有看到怎麼辦的，只是還沒有。
而且事實證明這導航欄，我把它的滾動會看到它保持固定頂端，因此它不會滾動，我們有，我們也沒見過，只是還沒有一個固定的導航欄的方式。
然後最後我們改變了一些默認的自舉部件的顏色。
因此，這實際上是灰色的略有不同的色調。
這是藍色的燈罩和導航欄有一些不同的顏色。
因此，我將展示你如何做這一切之前，我們開始編寫任何代碼。
只是要花點時間指出一個事實，即這些圖像大部分是從一個網站叫飛濺一個很好的資源。
所以飛濺提供一束美麗的高解析度的照片，你可以做你想要與任何。
你可以在這裡閱讀許可，但它幾乎任何你想要的。
這是一個創作共用許可等等等等等等我敢肯定，我真的不關心這個，但是這些照片是真的真棒，我用了很多這八人的。
事實上，在我們的畫廊。
並留下一個圖像這是這一個就在這裡，我居然把自己在拍攝的攝影類，這是我所採取的看起來像樣的第一件事。
我認為，即使相比，這些的不看這麼熱。
無論如何，如果你想使用它並不重要，這些完全相同的圖像。
這將在所有使用任何圖像工作。
但是如果你想完全一樣的那些我已經包括了所有曾與該視頻一起上傳，也包括這兩種顏色，我們要使用的深藍色和淺灰色在這個文件中醫學博士畫廊的聯繫。
好。
因此，所有這一切的出路，讓我們現在得到的項目開工。
所以，我有一個空文件庫。
H M湖
我將在我的H D M L骨架在此處添加和我們就稱這個圖片庫，我們需要做的第一件事就是包括引導。
而我只是要複製在CD從舊項目結束，所以我會做，現在。
開始了。
我鏈接到引導CDN。
雖然我在這裡我也將搶白手起家綜援和Jay queery城市，我們在導航欄中課沒有和把那些在底部位置，這樣，當我們添加了導航欄在我們不必去打獵這些文件或腳本標籤。
因此，一個保存和，我們可以做的第一件事就是加入我們的超大屏幕。
這是很好的和容易。
因此，我們將有一個div，這將是類等於超大屏幕。
然後超大屏幕內將與H1，只是說，圖片庫開始。
在那裡，我們去，我們將保存並讓我們確保這個工程。
因此，它會打開這個文件。
因此，我們有Boucek包括在內。
我們看到的字體變化。
我們看到從超大屏幕這個灰色。
現在，讓我們確保它是一個容器內就像它是在這裡，而不是我們所擁有的在這裡它只是一路之隔的屏幕。
因此，我們將做到這一點的div類的equals容器。
在那裡，我們走，讓我們正確地做到這一點，刷新，我們會回去。
好吧，所以我們有超大屏幕，但加入這一段。
現在，我們會回來的，做的圖標，但是這僅僅是H-1的下方一個段落標記，我們可以節省。
隨意把任何你想要的文字出現，我們正在與超大屏幕做了現在。
因此，讓我們回去，我們現在做的導航欄，我不打算有兩個原因鍵入從頭不夠吧。
其一是，這是相當多的代碼。
這將需要很長的時間。
而這部影片。
但有兩個是我幾乎從來沒有從頭開始鍵入阿克巴的事實。
正如我在NASCAR視頻的大部分時間中提到我的工作流程是，我去引導網站或到我與導航欄中以往所作出的網站，我複製。
而我只是檢查它，我擺脫我不想件。
我在添加一些新的作品。
所以這就是我要在這裡做。
我已經有我在導航欄確實說每個HTML應用足夠一部分。
就是這裡，我只是要複製的，然後我們會調整它一點點。
因此，讓我們在複製它，我會回去和我們只是把這個在文件就是這樣的最頂端。
讓我們來看看我們得到的是新鮮的，我們有導航欄。
這很接近。
我們要在這裡改變品牌。
我們也希望最終改變顏色，我們希望確保它的固定頂端，它是不正確的，但現在，我們將到達那裡。
讓我們回過頭，只是改變品牌。
因此，而不是咖啡我打電話給我的圖像，你可以調用這個任何你想要的。
當然，確保其工作正常。
我會告訴你接下來的事情是一個快速變化，我們可以改變的地方出現，而不是午睡或默認的顏色。
現在，我們可以做，如果酒吧詩歌和我會告訴你是什麼樣子。
現在，我們得到一個黑暗現在還是顏色都被反轉，其中文本是輕，我們得到了一個黑暗的背景。
它仍然不是藍色，我要去為在這裡。
而且字體也不是白色的，但我們會回來解決這個問題。
這是現在非常接近。
現在我們可以專注於網格上的實際圖片庫到這裡。
讓我們通過觀察它的行為的解決方案開始。
因此，它有三個圖像去對面啟動，然後我調整它下降到2個，然後它下降到2個，然後最後在小尺寸它去一個，你可以在這裡看到。
而且我們有一個形象去對面。
讓我們開始通過建立電網這個大尺寸的，我們有三個打算對面。
還記得我們有12個單位的總數。
因此，如果我們要三跨去，我們要他們每個人指定為四個單元。
因此，讓我們設置了僅低於我們的超大屏幕。
儘管如此容器，雖然我們只是做的div類中等於行，那麼這裡面我們必須DIV類的equals，我們希望它是四個單位。
所以我們會做大量列破折號4並按回車鍵，我們可以只把一些文本從這裡開始，然後我就複製了，因為我們希望其中的三個。
我不會擔心固定縮進但因為我們要作出一會兒就好了一個較大的變化。
但是讓我們刷新，我們得到了這三個列去跨越。
所以，我們要做的下一件事就是讓一些圖像將全部啟動，但只是把我的金門大橋照片L和我們要添加圖像標籤，而不是文字。
因此圖像源等於該金門大橋你是生病了，我就粘貼三次和保存。
如果我們回去，我們有一個問題，就是這種形象是巨大的，即使我們有那些三列。
我們的形象是不是裡面住我們的專欄中它不是萎縮下去。
你可以看到我們將做什麼來解決這個問題的就是添加添加一點點引導。
我還沒有向您尚未創建它周圍的這個可愛的小邊，這就是所謂的縮略圖。
所有我們需要做的是寫帶班等於一個div縮略圖，然後什麼形象，我們把裡面的它會被縮小以適合列中。
而且它也是在這裡得到這個小小的邊界，我覺得看起來相當不錯。
因此，要做到這一點，我究竟要擺脫我們與那些只是回到一個單一的圖像，並添加一個div類有等於縮略圖，做到了正常。
我們認為包裝圖像周圍和保存。
現在，如果我們刷新。
你會看到，如果我們得到一個單一的形象，佔用了該網格內的空間適量。
這是列，它周圍有一個小邊框和圖像不巨大的，這是偉大。
所以，我們要確保，如果我們複製這它的工作原理。
因此，這是一個圖像，讓我們重複了三次，看看會發生什麼刷新。
還有我們走。
我們有三個圖像。
我會繼續前進，增加六個英寸
所以，我們有九似總我們在這裡做。
而我們居然沒有增加單獨的行。
我們可以只是把它們都一樣排。
所以複製這三個，我們有這麼遠的時間和保存。
這將給我們九張圖像。
如果我刷新，你會看到，他們會自動換到下一行。
所以我們只需要有一個行並添加那些你知道醫學上號列。
如果我們希望每個圖像佔用四個單元則意味著百分之三排，然後我們需要的圖像三行。
我會回去和更改所有這些，你的精靈形象在視頻的結尾。
我不想讓你看的。
非常有趣的只是複製和粘貼，但讓我們專注於這個網格的其餘部分。
所以，現在只要一擊媒介它關係到一個圖像跨越這不是我們想要的，我們要找的是橫跨在那個中斷點兩個圖像。
然後介質突破點，這是我們有打小，我們還是希望它留在後2。
因此，要解決這個問題在我們，或者去一出，立即在1大破發點或中斷點，然後小的和額外的小住宿。
我們可以回到這裡，我們將改變所有這些你知道選擇並點擊命令d。選擇稱呼他們為大的所有實例，然後我會打左或右箭頭鍵移動光標。
現在我可以同時編輯它們。
而我想做的事情，我可以列中添加6，因為我們希望佩羅，這將正常工作。
如果我回去，刷新你會看到他們住在3％行，然後我打的中位數斷點，他們去2。
但後來我打小就跳轉到一個，並且我們，當我們打小的解決方案，保持在2。
因此，要解決這個問題，而不是做列中六點鐘我們可以做小柱6回去再次刷新這個版本。
我們打擊網上平台。
我們去兩個。
我們打小。
我們住在2，然後我們去額外的小，我們正處在每行1的圖像。
完善。
所以這是我們所有為電網做，我們大部分的功能在這裡完成。
非常非常快得到啟動和運行。
我們要專注於現在的一些顏色，也是圖標。
我們如何使用添加圖標引導，我會向您展示開始。
如果你去的組件有這些字形圖標往上頂，並有一群人從挑選等得到引導。
我們會找到一個我們要使用和我使用的人。
我只是做了搜索，我認為它的攝像頭。
所以在這裡這台相機，我沒有使用相機。
這是略有不同。
我使用的一個是更加復古相機，我會告訴你如何添加英寸
它實際上不是引導的一部分，但讓我們開始隨引導的普通相機。
因此，我們寫克利福德卡恩再與康恩破折號相機去。
如果你滾動往後你能看到他們解釋如何使用它來創建一個跨度，其中一類是等於與精讀，然後字形它可以衝字形圖標的名稱。
因此，讓我們複製這個跨度，我們將做它的H-1裡面只是把它的H-1的開始啟動，我們希望有一個快速的A-桿破折號相機，我們將保存並刷新。
就這樣，你可以在那裡得到一個攝像頭。
如果我們希望我們的空間可以做到這一點通過填充，或者我們可以只添加一個空格在那裡。
而我們得到了一個空間，我們可以做同樣的事情在導航欄中，我用一個被調用的照片去仔細檢查在這裡。
你可以這樣做頁照片畫面上的搜索。
它就在那裡。
它可以去，如果它可以衝照片。
因此，我們將在這裡上到導航欄中的品牌，我們在跨重新粘貼。
然後跨度裡面的類應在點擊圖片，我們會在那兒添加一個空格為好。
我們再回到我們的網站是新鮮的，我們現在有一個小圖片在那裡。
而且我們也有攝像頭。
接下來，讓我們來解決導航欄，我們將通過它固定在頂部，這樣你可以看到現在就開始。
那打盹我們的春聯了。
但在解決它在那裡停留。
要做到這一點那就是我們要添加到我們的導航欄的類。
所以，正確的在這裡，我們希望導航欄短跑衝刺固定頂部和保存。
如果我們是新鮮的，你會看到它的固定在上面。
有一個小問題，它是我們的內容目前是背後一點點，我們希望它有超大屏幕高於正常間距。
我們需要做的是添加填充的一點點我們的身體和它正好是70個像素。
引導程序的文檔會告訴你，如果你忘記填充70像素是我們想要這就是現在四寬度。
因此，我們將去這裡，現在我們將創建一個樣式表，我會打電話給它畫廊Dotsie SS，然後選擇裡面的填充體頂部70像素，然後我們需要添加在鏈接到該樣式表是畫廊CS S.
現在，讓我們確保的工作。
在那裡，我們走了。