1
00:00:00,630 --> 00:00:05,120
在這段視頻中，我們要從頭開始創建這個攝影師組合的網站。

2
00:00:05,310 --> 00:00:11,550
通常我想請你嘗試做你自己，然後給你下一個解決方案的視頻。

3
00:00:11,640 --> 00:00:14,050
然而，這一次，它是一種蓄意代碼。

4
00:00:14,070 --> 00:00:20,650
所以我想請你嘗試沿著代碼，如果你願意，你可以通過一次沿著下一次觀看它，然後代碼。

5
00:00:20,850 --> 00:00:26,940
但這裡的目標是，我們要一起做吧，有另外兩個我們要擺脫這種東西。

6
00:00:26,940 --> 00:00:37,190
第一個是有一個新的屬性，我要告訴叫做浮體和第二件事是我只是想讓你得到一點點經驗，建立的東西，你可能有點自豪。

7
00:00:37,200 --> 00:00:43,160
這看起來有點比一些簡單的事情，只是真的，我們已經迄今所做的鮮豔色彩可怕更好。

8
00:00:43,170 --> 00:00:47,210
因此，這是我們要做的一個最小化的照片博客。

9
00:00:47,280 --> 00:00:49,160
所以，讓我們開始吧。

10
00:00:49,230 --> 00:00:50,610
打開崇高。

11
00:00:50,880 --> 00:00:54,330
我有一個名為照片電網的單個文件HMO。

12
00:00:54,960 --> 00:01:00,480
我將首先告訴你，我們正在使用的圖像或其他人。

13
00:01:00,480 --> 00:01:08,390
因此，這些都是影像九張圖像的每個三張圖片從我在Flickr上找到三個不同的攝影師。

14
00:01:08,700 --> 00:01:10,920
所有的照片都是在Creative Commons許可。

15
00:01:10,920 --> 00:01:13,030
你可以在這裡許可證。

16
00:01:13,050 --> 00:01:46,750
所以，在我們做任何事情，這些圖片你的超文本鏈接，我究竟要擺脫他們，我要在我的老年骨骼的廣告聲浪添加照片的博客，我會做一個快速演示，所以你不要'T必須與這部分一起代碼時，我要補充的div告別一個問好，一個和我要拯救他們，然後我要加我的樣式表中，我打電話的照片SS然後在這裡我要我的風格div的。

17
00:01:46,770 --> 00:01:53,890
所以，我真的要給他們一個內徑叫它之一。

18
00:01:54,270 --> 00:02:27,630
而這同樣是只是為了演示東西，然後給在這裡我要選擇一個和兩個，所有我要做的只是給他們一個不同的背景顏色紅色，然後背景色紫色，然後我要給他們兩個人的所有div和100像素的寬度。

19
00:02:27,630 --> 00:02:32,430
所以，我這樣做，當我在瀏覽器中打開它。

20
00:02:33,540 --> 00:02:36,970
我們有兩個div此起彼伏。

21
00:02:36,990 --> 00:02:39,020
請記住，他們如果我們檢查。

22
00:02:39,480 --> 00:02:44,280
他們基本建立，讓他們拿自己行了塊級元素。

23
00:02:44,280 --> 00:02:54,490
所以，如果我不希望這樣的事情發生這正是我們要為我們希望我們的圖片以構成網格或多個在同一行的圖像格的事情。

24
00:02:54,540 --> 00:03:01,690
如果是的話，如果我想做到這一點與我的div需要使用一個屬性調用浮動或者說是我能完成它的一種方式。

25
00:03:01,740 --> 00:03:06,780
所以在這裡我要做的就是安全浮法留下什麼，會做。

26
00:03:06,780 --> 00:03:11,390
這將需要的元素的所有div出文檔的正常流動。

27
00:03:11,580 --> 00:03:14,730
因此，有棧目前每個單獨的線路。

28
00:03:15,000 --> 00:03:23,090
什麼會發生的是，他們會浮到左邊把它當做重心要離開我們的文檔幾乎英寸

29
00:03:23,280 --> 00:03:26,380
因此這個分區是要上浮並推到左側。

30
00:03:26,400 --> 00:03:27,580
針對這一個。

31
00:03:27,990 --> 00:03:32,200
所以，如果我在這裡新鮮的，你可以看到，他們現在在同一行。

32
00:03:32,280 --> 00:03:41,840
因此，我們打算在我們使用的圖像使用這個原則，使我們可以得到圖像基本上去攻擊彼此，形成一個網格。

33
00:03:41,970 --> 00:03:49,910
所以我現在要擺脫這一切，擺脫，我們有設備的，我要在我們這樣的圖像添加。

34
00:03:50,280 --> 00:03:57,040
所以我打算讓這個全屏幕，只是在那些在包含視頻該文件，這些圖像鏈接粘貼。

35
00:03:57,810 --> 00:04:08,230
而非使9圖像標記像這樣，我使圖像標記，然後複製周圍你然後將其粘貼九次應該是很慢的。

36
00:04:08,490 --> 00:04:22,730
我要去哪裡我使用命令點擊選擇每行的開頭用在這裡的壯美神奇的一點點，然後我只是要輸入圖像信號源等於，然後移動到該行的末尾。

37
00:04:22,800 --> 00:04:35,380
所以我用一個命令右箭頭命令左箭頭它需要開始指揮權去年底，然後我要去的報價，然後右括號結束。

38
00:04:35,400 --> 00:04:40,550
所以這是一個非常容易和快速的方法來包圍所有這些你是精靈作為圖像標籤。

39
00:04:40,920 --> 00:04:46,340
所以，如果我救這一點，他們到了瀏覽器，你會看到當我刷新。

40
00:04:46,530 --> 00:04:47,960
我們現在有九張圖像。

41
00:04:48,090 --> 00:04:49,680
當然沒有集成。

42
00:04:49,890 --> 00:04:53,890
他們佔用了大量的空間。

43
00:04:54,060 --> 00:05:01,230
所以，我們打算現在要做的就是去我們的樣式表，並選擇所有圖像。

44
00:05:01,230 --> 00:05:05,520
而我們可能要在這裡做的第一件事就是只要給他們。

45
00:05:06,090 --> 00:05:13,280
因此，讓我們給他們一個像100像素開始，這將是途徑太少。

46
00:05:13,710 --> 00:05:26,360
但我想你看個究竟，並刷新，你會發現，所有這些圖像現在是在一條線一起，但有它們之間的一些空隙，我們沒有指定。

47
00:05:26,430 --> 00:05:29,780
我們從來沒有設定保證金或填充或任何東西。

48
00:05:29,790 --> 00:05:36,040
那麼，有什麼情況是，居然還有這麼的添加一些白色的空間，它是一個古怪的東西在蒸汽貓頭鷹一點點。

49
00:05:36,050 --> 00:05:42,870
但是，當我們有圖像，而無需其他任何東西有一個空格或只是它們之間添加的一個空格。

50
00:05:43,140 --> 00:05:51,540
因此，如果我們想擺脫的，我們可以使用浮動，並記住，持股量將拿東西出來的文檔流程。

51
00:05:51,570 --> 00:05:59,800
所以，如果我刷新現在你可以看到那些圖像對接起來反對另一個，基本上沒有空間可言它們之間。

52
00:06:00,150 --> 00:06:04,120
然後我們可以回去和我們的自我補充一點空間。

53
00:06:04,170 --> 00:06:07,020
因此，我們顯然不希望他們採取了這個小空間。

54
00:06:07,020 --> 00:06:13,700
我們確實要三跨去，我們希望他們之間的一些利潤率，但我們想控制。

55
00:06:14,160 --> 00:06:27,320
因此，通過浮動它們，我們擺脫了空白的瀏覽器增加了我們，使我們可以在我們自己的自定義間隔使用margin屬性，而不是實際的空白進去了。

56
00:06:28,920 --> 00:06:33,670
所以，現在我們要改變寬度，讓我們開始與30％。

57
00:06:33,720 --> 00:06:39,180
因此請注意，百分比以色列是相對於主體的父元素。

58
00:06:39,180 --> 00:06:41,910
所以，每一個會佔用身體的30％。

59
00:06:41,910 --> 00:06:46,830
而我開始與30的原因就是要確保它們都放在一行或三個契合。

60
00:06:46,830 --> 00:06:52,120
在我的腦海裡，你會看到，我們得到他們三個跨越之間沒有空隙去。

61
00:06:52,260 --> 00:06:58,370
然後，我們有10％的在這裡，因為這是我們正在採取僅佔90％。

62
00:06:58,470 --> 00:07:06,790
因此，我們要使用其他比例實際上分裂保證金和它們之間添加一些間距。

63
00:07:07,020 --> 00:07:09,460
所以，我們已經有一個三乘三格。

64
00:07:09,650 --> 00:07:12,550
我們下一步要做的是使它看起來像這樣。

65
00:07:12,750 --> 00:07:15,000
或者，我們甚至它們之間的間距。

66
00:07:15,180 --> 00:07:17,870
所以我們實際上不得不做數學的一點點。

67
00:07:18,060 --> 00:07:18,860
所以，我已經做到了。

68
00:07:18,870 --> 00:07:26,210
但基本上，如果我們計算這個有一個保證金在這裡一個人也沒有的這裡也保證金。

69
00:07:26,570 --> 00:07:28,430
這裡有三個餘量。

70
00:07:28,600 --> 00:07:32,400
然後在此一個，在這個一五。

71
00:07:32,670 --> 00:07:34,910
而在這一個或六個。

72
00:07:34,920 --> 00:07:45,570
因此，我們有10％，我們需要除以6和10除以六是一點六六。

73
00:07:45,570 --> 00:07:52,810
所以，我們要做的是只說保證金一點六六個百分點。

74
00:07:52,950 --> 00:08:01,900
因此，如果我們回到瀏覽器，並檢查了結果，並刷新你會看到，我們得到與他們之間的間距三個均勻間隔的圖像。

75
00:08:01,950 --> 00:08:04,850
因此，數學只打了一次。

76
00:08:05,070 --> 00:08:06,570
其中每一個都是10％。

77
00:08:06,570 --> 00:08:07,980
因此，他們給只有30％。

78
00:08:08,160 --> 00:08:12,370
而且每一個都有1.6％兩側的餘量。

79
00:08:12,390 --> 00:08:22,920
因此，我們採取雙方都左，右一點六倍二加30％，我們得到了30對這些每一個三點三成。

80
00:08:22,920 --> 00:08:29,330
所以這是三分之一或完全相同幾乎一模一樣，我們四捨五入但這是我們可以在這裡做的最好。

81
00:08:29,530 --> 00:08:30,800
所以33點三成。

82
00:08:30,810 --> 00:08:35,200
這些每個人，我們可以檢查只是為了驗證這一點。

83
00:08:35,670 --> 00:08:36,670
在那裡，我們走了。