1
00:00:00,310 --> 00:00:04,590
歡迎在這節課我們將專注於造型展示頁面回來。

2
00:00:04,620 --> 00:00:07,080
所以，現在我們的節目頁面看起來是這樣的。

3
00:00:07,230 --> 00:00:10,710
我們有一個小酒吧蹩腳這裡與沒有做任何的按鈕。

4
00:00:10,710 --> 00:00:12,910
我們有一個H-1與露營地的名稱。

5
00:00:13,190 --> 00:00:19,290
而且我們有一個形象的描述，我們有一個按鈕來添加一個新的註釋，然後所有的評論都顯示。

6
00:00:19,410 --> 00:00:21,900
每一個小段落。

7
00:00:21,900 --> 00:00:25,230
所以在這裡我們的目標是讓它看起來更像這一點。

8
00:00:25,230 --> 00:00:27,190
所以我有一個側邊欄在這裡。

9
00:00:27,270 --> 00:00:34,250
我們不會有地圖，只是還沒有，但我們會騰出空間地圖，然後我們將有我們的主要內容與描述。

10
00:00:34,380 --> 00:00:41,350
一些文本標題我們不會做的收視率還沒有但我們還必須審查會看起來像這樣的列表。

11
00:00:41,430 --> 00:00:45,360
自己的小容器裡有我有一個小按鈕，槓桿等等。

12
00:00:45,360 --> 00:00:47,240
一般來說它是一點點的風格。

13
00:00:47,310 --> 00:00:50,210
我們可以添加這樣那樣說，許多評論已經如何離開。

14
00:00:50,280 --> 00:00:51,540
所以，這就是我們的目標了。

15
00:00:51,720 --> 00:00:55,170
並開始我們將只專注於引導電網。

16
00:00:55,350 --> 00:00:58,500
請記住，引導電網12台對面。

17
00:00:58,560 --> 00:01:05,500
我們要為這個小邊欄指定三個出的12，然後我們要去為主要內容的添加九歲。

18
00:01:05,760 --> 00:01:10,550
在我們開始之前在實際上改變任何我想指出的是，我在5節我工作了。

19
00:01:10,680 --> 00:01:13,710
所以，如果你想跟著一起所有這些變化將在V，5。

20
00:01:13,800 --> 00:01:17,280
而我這樣做的原因是，我們將不得不做出一個自定義樣式表。

21
00:01:17,340 --> 00:01:21,910
我們將不得不為市民服務目錄和一些其他的東西都是實質性的變化。

22
00:01:22,020 --> 00:01:24,020
所以，我想作一個單獨的版本。

23
00:01:24,270 --> 00:01:30,020
但在此之前，我們做的，我們要做的第一件事就是周圍添加這一切引導容器的容器。

24
00:01:30,150 --> 00:01:40,290
因此，在表明E.J.是要增加一個div類容器，就像這一點，我們將投入一切的裡面。

25
00:01:40,290 --> 00:01:45,270
我會通過增加側邊欄開始，我們只是一些虛擬數據填充它像我們這裡。

26
00:01:45,660 --> 00:02:00,920
因此，DIVX，這需要在類的equals親和該行中我們將有另一個div其中類別可以是列中3個就好這樣。

27
00:02:01,080 --> 00:02:07,670
然後這裡裡面，我們要添加一個段落，我們會得到這段文字，說約阿希姆。

28
00:02:08,460 --> 00:02:17,640
所以這是一個段落，其中類是領先，然後我們只是把你安營扎寨現在我們將最終改變這一點。

29
00:02:17,640 --> 00:02:34,670
但是，是的陣營，然後添加那些小列表中的項目，我們會做與類的div是列表破折號組，然後在這裡，我們要添加一幫盟友每個盟友有一個類列表組項目。

30
00:02:35,610 --> 00:02:44,530
而且裡面我們只是添加一些無效數據，我們就稱它為信息1，然後我要複製這個信息，以信息3。

31
00:02:44,610 --> 00:02:46,340
然後讓我們看看是什麼樣子現在。

32
00:02:46,500 --> 00:02:52,480
因此，對於刷新頁面，我們在這裡有一個側邊欄，我會做這些項目中選擇啟動的一個。

33
00:02:52,830 --> 00:02:55,480
而我們要做的就是添加活動就在這裡。

34
00:02:55,650 --> 00:02:58,900
如果我們是新鮮的，我們現在看到其中一個是積極的。

35
00:02:59,460 --> 00:03:07,680
而這僅僅是一個佔位符有東西存在，所以我們不會有很多空白，但是我們再次將在那裡加入真實的數據和地圖，最終。

36
00:03:07,770 --> 00:03:14,590
而就指出來的地圖會在這裡這裡面媒體三欄的最後，但不是現在。

37
00:03:14,940 --> 00:03:16,560
OK所以這是一個酒吧。

38
00:03:16,560 --> 00:03:19,050
現在，我們要在主要內容的補充。

39
00:03:19,290 --> 00:03:28,670
因此，我們需要另一列而這一次是類列中9。

40
00:03:29,130 --> 00:03:41,820
而是還有我們需要有H-1，我們需要有形象，但所有這一切之前，你會發現它實際上都在這些縮略圖，就像我們對網頁中的一個。

41
00:03:41,940 --> 00:03:44,150
其中每一個都是一個縮略圖。

42
00:03:44,190 --> 00:03:50,160
我們將做同樣的事情，整個圖像周圍的標題和評論以及所有這一切。

43
00:03:50,220 --> 00:03:56,930
因此，我們要添加一個div和DIV將有類等於縮略圖。

44
00:03:58,110 --> 00:04:06,140
然後裡面，我們要添加的形象和我還是會的形象，我們已經寫好，只是把它的權利在那裡。

45
00:04:06,180 --> 00:04:08,260
所以這將是我們的露營地的形象。

46
00:04:08,490 --> 00:04:19,500
然後，我們也想一類添加到了自舉給了我們這是圖像Dasch響應。

47
00:04:19,560 --> 00:04:20,420
在那裡，我們走了。

48
00:04:20,490 --> 00:04:23,270
保存。

49
00:04:23,400 --> 00:04:29,570
如果我們看一看我們現在已經和我們刷新至少有圖像，並在正確的地方的內容。

50
00:04:29,610 --> 00:04:33,280
我們在哪裡這是不符合我們希望它佔用雖然問題。

51
00:04:33,320 --> 00:04:38,660
我想，要一路之隔去，我們就必須處理一些定制的C SS底。

52
00:04:38,970 --> 00:04:46,360
現在，我們會回去，並添加這在這兒，我們有我們實際上並沒有在數據庫中的露營場地的名稱，然後每晚的價格。

53
00:04:46,440 --> 00:04:47,830
所以我們就硬編碼。

54
00:04:48,150 --> 00:04:49,400
因此，讓我們做這件事情。

55
00:04:49,860 --> 00:04:57,250
這就是另一個div而這其中有一類標題破折號滿。

56
00:04:57,570 --> 00:05:01,190
然後還有裡面，我們要添加一個H表示。

57
00:05:01,620 --> 00:05:09,540
而且我們要拉這個在右邊，我們班拔等於幾許權利，那麼無論我們把這裡將是價格。

58
00:05:09,750 --> 00:05:15,300
而我就先從$ 9夜這再次從數據庫最終將到來。

59
00:05:15,540 --> 00:05:25,610
如果我們是新鮮的現在，我們得到$ 9夜右側，然後我們想要得到我只是會在這裡複製了在左側的露營地的名稱。

60
00:05:25,650 --> 00:05:45,460
所以我們把它放在右下方，如果我們不加向右拉它會自動進入到左邊儘管這比我腦子裡想的大，我就會把它轉換成一個較小的H和我要去添加一個錨標記的存在，就像這裡面，把營地的名稱錨標籤內。

61
00:05:46,500 --> 00:05:50,370
而背後的想法是，最終我回去。

62
00:05:50,380 --> 00:05:56,040
這應該是實際的露營地或公園服務頁面，我們可以去預訂的東西的鏈接。

63
00:05:56,130 --> 00:05:58,050
現在它只是鏈接到沒有出路的。

64
00:05:58,410 --> 00:05:59,020
好。

65
00:05:59,160 --> 00:06:00,350
因此，我們有英寸

66
00:06:00,360 --> 00:06:01,370
我們有一個價格。

67
00:06:01,470 --> 00:06:03,660
現在，讓我們添加描述回。

68
00:06:04,230 --> 00:06:14,060
所以這將只是一個段落標記，然後我們將在我們的描述是露營地的描述正確的有加。

69
00:06:14,640 --> 00:06:29,750
而且這將是一個有點給人留下深刻印象，因為我們沒有一個大的訂閱現在，所以我們可能想要做的就是去看看一些Lorem存有數據庫，我只是要偷這個，我會複製這一點，回去的種子文件。

70
00:06:29,940 --> 00:06:34,700
然後，而不是我們的種子的文件，我會改變他們三個的描述。

71
00:06:34,720 --> 00:06:37,990
只是讓同樣的事情，而不是等等等等等等。

72
00:06:38,130 --> 00:06:42,380
我們現在有Lorem存有較長一點，我們可以節省。

73
00:06:42,660 --> 00:06:48,430
然後讓這個進入我們必須重新啟動服務器，因為將接收數據庫中生效。

74
00:06:48,720 --> 00:06:52,340
然後讓我們回過頭來求助於露營地的頁面。

75
00:06:52,440 --> 00:06:54,090
我們有三個露營地。

76
00:06:54,090 --> 00:06:58,330
不過，他們現在有一個更合理的描述一些文字。

77
00:06:58,680 --> 00:07:00,050
好大。

78
00:07:00,060 --> 00:07:02,240
現在讓我們什麼，我們需要去努力看看。

79
00:07:02,250 --> 00:07:03,730
有一些小的事情。

80
00:07:03,880 --> 00:07:08,580
我們將留在回顧數獨，現在的明星，我們將繼續前進到的意見。

81
00:07:08,970 --> 00:07:22,630
讓我們回到顯示，E.J.是的文件，我們可以關閉掉的種子，現在我們要做的就是添加一個井給類以及列中九裡，因為我們希望它是在同一列在這裡。

82
00:07:22,680 --> 00:07:24,350
佔用空間是相同的。

83
00:07:24,750 --> 00:07:31,800
因此，要做到這一點只是去這裡縮略圖所以這和字幕後，就在這裡，這是縮略圖。

84
00:07:31,880 --> 00:07:34,770
所以，正確的，他們要添加的div類。

85
00:07:34,870 --> 00:07:37,060
等於好。

86
00:07:37,410 --> 00:07:43,560
然後那去打開它，裡面這是它會做循環通過添加註釋。

87
00:07:43,680 --> 00:07:55,150
但我會在按鈕添加你按鈕的槓桿啟動，我們只要做一個簡單的股利和股利這將有一類文本破折號權。

88
00:07:55,320 --> 00:08:02,940
然後裡面有我們要在這裡添加我們的錨標記，我們已經創造了新的註釋。

89
00:08:03,300 --> 00:08:05,090
只要把這裡。

90
00:08:05,820 --> 00:08:12,350
這是一個漫長的，但請記住它是有一個類Button按鈕的成功，它使綠色錨標記。

91
00:08:12,490 --> 00:08:14,620
但裁判是一個很長的一部分。

92
00:08:14,790 --> 00:08:22,290
這將大幅削減露營地露營ID斜線評論斜線新的，但保存和刷新。

93
00:08:22,680 --> 00:08:23,030
好。

94
00:08:23,040 --> 00:08:27,750
所以你可以看到我們現在，讓我們在邊境漂亮的灰色背景良好。

95
00:08:27,750 --> 00:08:29,960
這就是我們要在評論中補充。

96
00:08:30,120 --> 00:08:34,170
因此，我們需要做的下一個就是通過意見循環，我們已經有了完成。

97
00:08:34,170 --> 00:08:38,500
但是，而不是只是讓為每一個我們真正要作出一個單獨的行一個段落。

98
00:08:38,760 --> 00:08:42,880
所以，我會告訴你是什麼樣子時，它複製此或削減它。

99
00:08:43,020 --> 00:08:49,140
我們可以刪除這個額外的一段，我們打算把這一權利的文字後權。

100
00:08:49,440 --> 00:08:51,850
而且，我們都是這麼做的。

101
00:08:52,090 --> 00:09:03,830
因此，我們有我們的循環，然後我們通過每個註釋將環和我們要在這裡為每一個DIV類的div類排等於行內添加。

102
00:09:04,750 --> 00:09:14,040
然後裡面的每一個我們要添加另一個div類的equals列媒體12並保存。

103
00:09:14,110 --> 00:09:21,850
如果我們看一看我們這裡有什麼我們最終的用戶名電子郵件用戶名的斜線我們稱之為的作者。

104
00:09:22,090 --> 00:09:30,760
然後在右邊有這一次10天前這將只是硬編碼，然後現在實際的評論隨之而來的。

105
00:09:30,750 --> 00:09:41,350
因此，為了使這項工作，我們需要做一些文字，然後做一些事情右邊拉右邊的文本右側，然後我們需要在實際的評論本身添加一個段落。

106
00:09:41,350 --> 00:09:43,890
所以讓我們嘗試去在這裡了。

107
00:09:43,950 --> 00:09:45,900
我們有自己的專欄中12。

108
00:09:46,290 --> 00:09:49,800
和這裡面我們要開始只需添加評論作者。

109
00:09:50,130 --> 00:09:51,770
因此，讓我們只想補充一點，就在那裡。

110
00:09:52,200 --> 00:09:57,520
然後，低於我們要在跨度增加，這將是在右邊。

111
00:09:57,580 --> 00:09:59,770
因此，我們將添加古典拉權利。

112
00:09:59,970 --> 00:10:03,340
然後在這裡我們就添加十天前現在。

113
00:10:03,510 --> 00:10:05,300
乾脆硬代碼英寸

114
00:10:05,400 --> 00:10:09,520
然後，他們想要做的最後一件事是實際顯示註釋文本。

115
00:10:09,680 --> 00:10:22,770
所以我要在這裡得到這個註釋文本，我們就會把它自己的段落，我們已經在這裡一樣，除了我們內部要在這裡移動列裡面，就像我們的作者和10天去。

116
00:10:22,770 --> 00:10:29,680
我們希望他們能在同一列在一起，但現在保存並返回。

117
00:10:29,700 --> 00:10:31,340
看看我們得到的。

118
00:10:31,360 --> 00:10:31,980
好吧。

119
00:10:31,980 --> 00:10:33,050
所以我們有一個評論。

120
00:10:33,070 --> 00:10:33,930
而已。

121
00:10:33,930 --> 00:10:36,580
但是你可以看到，我們有一個按鈕，添加一個新評論。

122
00:10:36,580 --> 00:10:37,980
請確保它的工作原理。

123
00:10:38,770 --> 00:10:40,450
和註釋顯示在這裡。

124
00:10:40,470 --> 00:10:41,600
我們缺少的評級。

125
00:10:41,670 --> 00:10:44,460
因此，它看起來有點有點怪，但對於現在的罰款。

126
00:10:44,700 --> 00:10:48,460
我們可能想要做的就是添加一個或兩個以上的評論。

127
00:10:48,450 --> 00:10:52,600
所以還是回到這裡，就讓我們多用一些Lorem存有。

128
00:10:52,600 --> 00:10:57,100
所以我只是要複製這個部分，並在其中添加作為註釋。

129
00:10:57,270 --> 00:11:02,440
只是使用那些在這裡筆者將露營。

130
00:11:02,520 --> 00:11:03,600
爺爺。

131
00:11:03,820 --> 00:11:05,000
提交。

132
00:11:05,720 --> 00:11:06,090
好。

133
00:11:06,100 --> 00:11:08,420
所以，我們現在及彼我們的意見就好了。

134
00:11:08,430 --> 00:11:09,550
這是工作。

135
00:11:09,540 --> 00:11:11,610
我確實有，我們要添加一些空間。

136
00:11:11,610 --> 00:11:17,520
如果你看看我們在這裡有一個真正的微弱線我不知道你會在屏幕上投露面。

137
00:11:17,520 --> 00:11:23,890
還有，在添加一些間距真的昏線和所有我們需要做的，使這項工作是增加的H河

138
00:11:24,370 --> 00:11:33,210
因此，這是我們剛剛加入一個水平線，如果我們刷新我們現在有一些空間，還有按鈕這段文字正確的之後。

139
00:11:33,260 --> 00:11:38,680
你有一個按鈕，我們已經顯示在短期內我們的所有意見。

140
00:11:38,730 --> 00:11:40,310
我們為什麼不建的用戶名。

141
00:11:40,620 --> 00:11:52,950
因此，我們將回到這裡，我們已經有了這一點，他們擺脫它，但我們會回去再加入一個強大的標籤，與作者和他們就會給你一個小更容易看到。

142
00:11:52,950 --> 00:11:53,770
在那裡，我們走了。

143
00:11:53,830 --> 00:11:57,470
仍然不是很大，但不夠好現在。

144
00:11:57,540 --> 00:12:00,060
所以這實際上是所有我們需要現在做引導。

145
00:12:00,240 --> 00:12:01,390
但是，我們仍然沒有完成。

146
00:12:01,470 --> 00:12:09,900
如果我們回頭看看成品ISH版本，你會看到圖像佔據整個縮略圖，只是沒有這樣做。

147
00:12:10,050 --> 00:12:15,000
即使我做了點使用它不是實際的圖像本身完全相同的圖像。

148
00:12:15,120 --> 00:12:16,820
這個問題歸結為我們的造型。

149
00:12:17,080 --> 00:12:22,890
我們希望做的是去告訴這個圖像佔用100％的與容器。

150
00:12:23,160 --> 00:12:29,150
所以，我會告訴你我們就可以檢查它，這是這裡的檢查一個偉大的使用。

151
00:12:29,350 --> 00:12:36,260
這裡我們可以選擇它，然後在這裡我們可以在一個風格的100％的增加。

152
00:12:36,270 --> 00:12:37,060
還有我們走。

153
00:12:37,120 --> 00:12:39,540
所以，這是我們想要做一件事。

154
00:12:39,610 --> 00:12:45,320
目前仍然是一個非常細微的差別是有一個小空間，在那裡，我們沒有在這一個。

155
00:12:45,470 --> 00:12:56,670
而要擺脫所有我們想要做的是進入實際的縮略圖，選擇縮略圖是在這裡，我們打算給該填充為零。

156
00:12:57,580 --> 00:13:02,700
現在，如果我們就來看看它看起來，我們希望它看起來或者幾乎看起來是這樣的時候的樣子。

157
00:13:02,730 --> 00:13:05,350
我們要在這裡添加一些間距為好。

158
00:13:05,350 --> 00:13:09,740
你可以看到有一些間距在這裡完成，我們可以解決這個問題現在。

159
00:13:09,820 --> 00:13:19,560
同時通過檢查它，記住，我們實際上並沒有修復它，我們只是測試它在瀏覽器中，然後我們會回去，實際上使我們自己的樣式表這些變化。

160
00:13:19,570 --> 00:13:24,760
因此，我們希望做的是加入填充在標題馬駒也就是這個盒子在這裡一點點。

161
00:13:24,990 --> 00:13:31,220
而我們要的是PADAM在左，右頂部和底部，這將是9至10個像素。

162
00:13:31,230 --> 00:13:35,370
所以我們只是做填充9的X.

163
00:13:35,760 --> 00:13:36,510
還有我們走。

164
00:13:36,540 --> 00:13:38,240
我們結束了一個很好的間距那裡。