歡迎回來，在這一課，我們要使用引導到一個虛擬的啟動創建一個登陸頁面。
我們的啟動被稱為絕配。
非常有趣。
我知道這是一個人的貓約會應用程序，我會離開它給你解釋什麼人約會的貓科動物是它可能是相對無害它可能只是匹配Sheldrick貓與人類的孤獨可能是別的東西。
我不知道。
讓我們做一個網站的快速瀏覽，並開始給她寫信。
我其實只是指出了一些功能。
沒有太多的在這裡。
我們實際上並沒有這樣迷上了它不會做任何事情。
所以，它真的只是HD mounseers小號但是這一切，我們學過的知識。
因此，我們有足夠的我們的絕配首頁inContact公司的長度。
他們並沒有真正去任何地方註冊並登錄右側的兩個小圖標那裡，我們得到她的漢堡包。
我可以點擊它。
現在所有這些環節都是漢堡包裡面。
然後，我們有保持為中心的大背景圖像，並覆蓋整個背景。
所以在中間，我們有我們開始了完美匹配的名到我們，然後我們有我們的標題上的約會應用人類唯一的飼料。
然後，我們這裡有一個小^ h - [R水平規則，然後一個按鈕，開始使用的圖標。
當我縮小這一點，在中間所有入住，這也移動了一點點，這樣我們沒有在移動設備上的某種尷尬的佈局，其中的文本開始網頁下半部。
因此，我們移動了一下，它保持居中。
這真的佈局容易做和引導，但它著陸頁比較有效的。
所有這一切我們已經是一列，佔用了整個寬度。
因此，這列掃過12個單位。
我們不會將其分割成任何部分只是一列12個單位對面，然後我們中心認為柱內的一切。
所以，讓我們開始吧。
我們需要做的第一件事是做一個文件。
我在DML一個叫做索引。
我將在我的正常樣板絕配添加這個，然後在引導加入開始，我將使用一個CDN Bitstrips CDN。
讓我們做的SS和Javascript在這裡。
我們需要的JavaScript任務欄。
因此，我們需要鏈接標記。
然後，我們得到的JavaScript。
收到。
把這個下來這是一個腳本標籤的底部，然後我們設置源等於你。
現在，如果我們打開這個了OK打開控制台，我們有一個小問題，就是我們需要的周杰倫查詢以及在引導的JavaScript命令。
還記得導航欄課前，我們需要導入J.
奎裡。
因此，我們將得到一個CDN了點。
我們會做修改後的版本。
複製網址。
最後，我們回到這裡去，我們必須這樣做之前，掛引導到的JavaScript。
否則，它仍然不知道你的查詢，所以它需要先加載查詢。
現在，讓我們再試一次。
消防刷新。
OK，我們沒有看到任何這是一個好兆頭，因為我們沒有看到任何錯誤。
讓我們在中間文本開頭。
所有這些內容在這裡。
因此，我們需要創建一個容器，然後在容器內，我們需要一個排的div類的ECO容器，然後還有裡面，我們有另一個div我們總是需要該行。
任何時候，我們正在使用的網格系統，然後我們的div將是類等於列破折號大12。
這將跨越跨容器的所有道路。
然後裡面，如果他們將有一個H1將只說完美匹配和保存。
讓我們離開它刷新。
而且這不是真的是我們想要但，這就是因為有我們需要做一些事情。
首先是我們需要居中在該列中的一切。
因此，如果我們考察我們正在處理在這裡你可以看到H1掃過所有的方式，我們只需要居中的裡面。
第二個是，我們需要將它推下來一點。
我們需要添加一些填充或保證金，這樣不正確的去我們的頁面的頂部。
讓我們在內容的其餘部分將啟動。
所以，我們也有人類唯一的貓科動物的約會應用程序，這將只是一個H 3，我們可以真正發揮用，可能是我們想要的任何元素，但我會做到的H-3人類唯一的幾許貓約會應用程序。
然後我們就可以在該水平線，不會看起來像多地增加，但我們會在事後樣式它，那麼我們也將在類中添加一個按鈕，該按鈕。
我們一起來看看。
這是一個引導按鈕的默認，它是一個大按鈕。
我們回去吧。
因此，我們需要PTEN，然後顏色默認，然後LG之間的尺寸大，在這裡我們只添加這是上手文本並保存，讓我們看看我們結束了。
好吧。
因此，我們有我們的內容，現在下一個，但中心網格內。
然後我們將重點放在填充和向下移動。
但是，開始與這個網格內的中心，為了更輕鬆地我將它組一個div裡面所有，這樣我們就不必單獨中心每一件事情。
我們必須居中H-1，然後三，然後按鈕，而我們可以在一個div組，只是中心與一行核實。
讓我們做一個DIV和我給它Cantet的ID，然後我們就會把一切有內部。
因此，H-1歲3 H.R。和按鈕將正確縮進和保存。
所以沒有什麼應該不同，如果我刷新頁面之前，我們做到這一點，讓我們在我們的樣式表添加。
所以我增加了一個鏈接標籤，我會打電話給我的樣式表的應用程序。
SS它還不存在。
所以，我需要把它存下來。
我看到SS在同一目錄下。
讓我們先從一些簡單的像所有的H的是紫色。
只是為了確保它的工作原理確定。
讓我們回到刷新。
安德魯獲得紫色H-1。
大。
所以，現在我們選擇戴夫我們添加了內容的想法，並居中。
因此，擺脫這一點，我們需要一個ID的內容和省略要做的就是文本對齊中心。
我們回去吧。
在那裡，我們走了。
這樣的事情是現在中心對齊。
下一步，我們將推動這個倒有幾分25％在頁面要準確使用填充等於25％。
因此，在這裡我們會做填充前25％。
和而不是給它的像素的硬一些，如果我們把它作為一個百分比它更敏感一點。
所以這是在市中心。
然後，我們25％的變化調整畫面。
大。
現在，讓我們在添加背景圖像。
所以我使用的形象可愛的貓和人的互動會在這裡從這個上，我在我們創建的引導映像格的最後一個視頻介紹飛濺網站。
他們有各種各樣的，你可以沒有任何問題，請使用真正偉大的高質量的圖像。
而我使用的是在這裡我搜索該說明貓的鏈接，以及。
這裡是你阿羅這個形象的，只要右擊複製你微升形象。
現在，讓我們回去，我將它添加到身體的背景圖像。
所以背景，然後給它一個URL這是巨大的你是在那裡。
如果我們離開它，它的形式在這個級別或刷新我們得到了一個巨大的背景圖像和所有我們可以告訴的是，這是某種形式的啟動為指甲。
因此，我們需要調整它的大小要做到這一點，我們使用的背景大小和變化，要重新被覆蓋。
同樣我們越來越近了。
這將使圖像盡可能小，同時仍覆蓋在屏幕的整個寬度和高度。
所以它不會改變寬高比也不會歪斜圖像中任何的方式，但它會在兩個方向上伸展，它更需要。
但是，它需要的最低數額，以適應我們的屏幕上，它仍然不是完美的。
我們希望做的是不改變它的大小，但改變位置。
我們要居中後台定位中心，但保存我們越來越近。
但它仍然不是一個完美的比賽盡可能的圖像會。
而這些變化會晚一點。
現在我要專注於在導航欄中添加和這樣做，​​當你去Boucek文檔並轉至組件和我之前提到了這一點。
我總是這樣做，如果我在一個引導導航欄中加入我。
這只是太多的東西，否則要記住。
而我只是在這裡複製這一權利。
將整個導航到從這裡開始回到我們的應用程序，只是把它的權利在上面。
這肯定不是我們想要的NAF但它包含了我們要刷新的碎片。
這是足夠接近。
所以這是我們要做出一些改變。
第一和最容易的是，我們的解決方案的內容是在一個容器中，因此它不會一路到邊緣像它在這裡。
因此，我們可以回去插圖還是我們只是改變這是DIV級的集裝箱，如果我們回去，現在你可以看到，因為我們在該容器中添加的，我們現在有一些間隔如同我們在這裡的解決方案。
現在，讓我們開始在內華達州的實際內容工作..
所以，最簡單的就是改變它現在只是說回品牌在這裡這條線類肯尼思等於品牌吧，我們將其更改為每固定搭配，節省了品牌。
試試看。
好啊好啊。
現在，讓我們擺脫這種形式。
我們不需要這樣的。
因此，我們的形式沒事這裡開始。
擺脫整個事情刷新。
我們還擺脫下拉列表中。
你並不需要這一點。
這樣開始就在這裡。
這個謊言再次結束還有新鮮。
現在我們有一個鏈接。
因此，我們將與被認為是註冊並記錄它這兩個環節入手。
這是這個環節就在這裡，所以我們可以改變一個是註冊，然後複製它。
用它裡面一個錨標記只是一個盟友。
而這一次將被記錄。
讓我們來看看。
大。
因此，圖標會在年底。
我們有兩個鏈路。
現在，我們在這裡需要三個環節。
我們已經有兩個人，我們將擺脫下拉列表中。
因此我們需要在聯絡家。
因此，一個定位下拉這是在這裡。
類等於下拉列表。
讓我們擺脫它，現在阿克巴的簡化了很多。
現在，我們有兩個不同的長度。
我們實際上將擺脫他們兩人，並從頭開始做。
因此，我們將在一個盟友錨標記添加，然後我們會做三次。
這第一個應該說家。
下一個是什麼。
而最後一個是接觸。
讓我們來看看。
在那裡，我們去三個長度。
一個次要的事情。
家應該是積極和引導這真的很容易。
所有我們要做的就是添加類等於主動向盟友不是錨標記，但母公司的盟友，現在我們結束了家庭作為活動鏈接。
大。
OK所以這是我們的導航欄中，如果我們調整，你會看到，我們已經有這個漢堡包的工作就好了。
我們確實有一個問題，就是我們的背景圖像被搞砸。
我們將介紹，在短短一點點，但我們有漢伯格工作的罰款。
一切看起來都不錯。
現在，讓我們解決的字體讓我用在這裡的字體是利多L.A ..
這是一個從谷歌的字體，所以我會去谷歌的字體和尋找利多。
LA T-o每個去收藏。
讓我們使用它，如果它會得到正常的和大膽。
此外，我們希望我們的H-1要大膽。
好的。
然後我們會添加這個鏈接直接進入她的申請。
往上頂在這裡現在保存輸入應用程序的評估，我們要的字體適用於一切。
所以我要去正文字體家庭內部選擇是利多，讓我們確保它的正確加載。
看看我們刷新。
而我們前面的變化很難看到，因為該文本是黑暗的，但改變你也可以看到它在這裡NFR。
它改變了。
它匹配了我們在這個解決方案。