在這段視頻中，我們要從頭開始創建這個攝影師組合的網站。
通常我想請你嘗試做你自己，然後給你下一個解決方案的視頻。
然而，這一次，它是一種蓄意代碼。
所以我想請你嘗試沿著代碼，如果你願意，你可以通過一次沿著下一次觀看它，然後代碼。
但這裡的目標是，我們要一起做吧，有另外兩個我們要擺脫這種東西。
第一個是有一個新的屬性，我要告訴叫做浮體和第二件事是我只是想讓你得到一點點經驗，建立的東西，你可能有點自豪。
這看起來有點比一些簡單的事情，只是真的，我們已經迄今所做的鮮豔色彩可怕更好。
因此，這是我們要做的一個最小化的照片博客。
所以，讓我們開始吧。
打開崇高。
我有一個名為照片電網的單個文件HMO。
我將首先告訴你，我們正在使用的圖像或其他人。
因此，這些都是影像九張圖像的每個三張圖片從我在Flickr上找到三個不同的攝影師。
所有的照片都是在Creative Commons許可。
你可以在這裡許可證。
所以，在我們做任何事情，這些圖片你的超文本鏈接，我究竟要擺脫他們，我要在我的老年骨骼的廣告聲浪添加照片的博客，我會做一個快速演示，所以你不要'T必須與這部分一起代碼時，我要補充的div告別一個問好，一個和我要拯救他們，然後我要加我的樣式表中，我打電話的照片SS然後在這裡我要我的風格div的。
所以，我真的要給他們一個內徑叫它之一。
而這同樣是只是為了演示東西，然後給在這裡我要選擇一個和兩個，所有我要做的只是給他們一個不同的背景顏色紅色，然後背景色紫色，然後我要給他們兩個人的所有div和100像素的寬度。
所以，我這樣做，當我在瀏覽器中打開它。
我們有兩個div此起彼伏。
請記住，他們如果我們檢查。
他們基本建立，讓他們拿自己行了塊級元素。
所以，如果我不希望這樣的事情發生這正是我們要為我們希望我們的圖片以構成網格或多個在同一行的圖像格的事情。
如果是的話，如果我想做到這一點與我的div需要使用一個屬性調用浮動或者說是我能完成它的一種方式。
所以在這裡我要做的就是安全浮法留下什麼，會做。
這將需要的元素的所有div出文檔的正常流動。
因此，有棧目前每個單獨的線路。
什麼會發生的是，他們會浮到左邊把它當做重心要離開我們的文檔幾乎英寸
因此這個分區是要上浮並推到左側。
針對這一個。
所以，如果我在這裡新鮮的，你可以看到，他們現在在同一行。
因此，我們打算在我們使用的圖像使用這個原則，使我們可以得到圖像基本上去攻擊彼此，形成一個網格。
所以我現在要擺脫這一切，擺脫，我們有設備的，我要在我們這樣的圖像添加。
所以我打算讓這個全屏幕，只是在那些在包含視頻該文件，這些圖像鏈接粘貼。
而非使9圖像標記像這樣，我使圖像標記，然後複製周圍你然後將其粘貼九次應該是很慢的。
我要去哪裡我使用命令點擊選擇每行的開頭用在這裡的壯美神奇的一點點，然後我只是要輸入圖像信號源等於，然後移動到該行的末尾。
所以我用一個命令右箭頭命令左箭頭它需要開始指揮權去年底，然後我要去的報價，然後右括號結束。
所以這是一個非常容易和快速的方法來包圍所有這些你是精靈作為圖像標籤。
所以，如果我救這一點，他們到了瀏覽器，你會看到當我刷新。
我們現在有九張圖像。
當然沒有集成。
他們佔用了大量的空間。
所以，我們打算現在要做的就是去我們的樣式表，並選擇所有圖像。
而我們可能要在這裡做的第一件事就是只要給他們。
因此，讓我們給他們一個像100像素開始，這將是途徑太少。
但我想你看個究竟，並刷新，你會發現，所有這些圖像現在是在一條線一起，但有它們之間的一些空隙，我們沒有指定。
我們從來沒有設定保證金或填充或任何東西。
那麼，有什麼情況是，居然還有這麼的添加一些白色的空間，它是一個古怪的東西在蒸汽貓頭鷹一點點。
但是，當我們有圖像，而無需其他任何東西有一個空格或只是它們之間添加的一個空格。
因此，如果我們想擺脫的，我們可以使用浮動，並記住，持股量將拿東西出來的文檔流程。
所以，如果我刷新現在你可以看到那些圖像對接起來反對另一個，基本上沒有空間可言它們之間。
然後我們可以回去和我們的自我補充一點空間。
因此，我們顯然不希望他們採取了這個小空間。
我們確實要三跨去，我們希望他們之間的一些利潤率，但我們想控制。
因此，通過浮動它們，我們擺脫了空白的瀏覽器增加了我們，使我們可以在我們自己的自定義間隔使用margin屬性，而不是實際的空白進去了。
所以，現在我們要改變寬度，讓我們開始與30％。
因此請注意，百分比以色列是相對於主體的父元素。
所以，每一個會佔用身體的30％。
而我開始與30的原因就是要確保它們都放在一行或三個契合。
在我的腦海裡，你會看到，我們得到他們三個跨越之間沒有空隙去。
然後，我們有10％的在這裡，因為這是我們正在採取僅佔90％。
因此，我們要使用其他比例實際上分裂保證金和它們之間添加一些間距。
所以，我們已經有一個三乘三格。
我們下一步要做的是使它看起來像這樣。
或者，我們甚至它們之間的間距。
所以我們實際上不得不做數學的一點點。
所以，我已經做到了。
但基本上，如果我們計算這個有一個保證金在這裡一個人也沒有的這裡也保證金。
這裡有三個餘量。
然後在此一個，在這個一五。
而在這一個或六個。
因此，我們有10％，我們需要除以6和10除以六是一點六六。
所以，我們要做的是只說保證金一點六六個百分點。
因此，如果我們回到瀏覽器，並檢查了結果，並刷新你會看到，我們得到與他們之間的間距三個均勻間隔的圖像。
因此，數學只打了一次。
其中每一個都是10％。
因此，他們給只有30％。
而且每一個都有1.6％兩側的餘量。
因此，我們採取雙方都左，右一點六倍二加30％，我們得到了30對這些每一個三點三成。
所以這是三分之一或完全相同幾乎一模一樣，我們四捨五入但這是我們可以在這裡做的最好。
所以33點三成。
這些每個人，我們可以檢查只是為了驗證這一點。
在那裡，我們走了。