1 00:00:00,420 --> 00:00:05,520 Bentornata in questa lezione, finiremo per completare lo stile della pagina di presentazione del campeggio alla 2 00:00:05,520 --> 00:00:06,550 fine dell'ultimo video. 3 00:00:06,630 --> 00:00:08,540 Ho citato alcuni dei cambiamenti che dobbiamo apportare. 4 00:00:08,640 --> 00:00:10,970 Questo non può essere risolto con puro bootstrap. 5 00:00:10,980 --> 00:00:13,050 Abbiamo bisogno di aggiungere alcuni stili personalizzati. 6 00:00:13,050 --> 00:00:18,570 Quindi abbiamo bisogno di cambiare la larghezza di questa immagine qui in modo che occupi il 100 percento della miniatura. 7 00:00:18,750 --> 00:00:21,050 Volevamo aggiungere qualche padding qui. 8 00:00:21,120 --> 00:00:25,050 dovrebbe essere il punto in cui abbiamo il padding e puoi vedere che l'immagine occupa l'intero contenitore. 9 00:00:25,050 --> 00:00:25,880 Questo è come 10 00:00:26,280 --> 00:00:31,810 E per ottenere ciò, potremmo andare in mostra a ogni Sì e aggiungere un tag di stile qui. 11 00:00:32,280 --> 00:00:34,050 Ma non è davvero una grande idea. 12 00:00:34,050 --> 00:00:39,840 Quindi, invece, aggiungeremo nel nostro primo foglio di stile personalizzato e per fare quel lavoro creeremo una directory 13 00:00:39,840 --> 00:00:42,960 pubblica proprio come abbiamo fatto in una lezione precedente. 14 00:00:43,110 --> 00:00:48,790 Quindi renderò la directory pubblica e poi creerò un'altra directory all'interno del pubblico. 15 00:00:48,870 --> 00:00:55,350 in primo piano e Javascript e faremo clic su enter e quindi faremo un singolo file 16 00:00:55,350 --> 00:01:00,810 all'interno di stylesheets in stile sosh pubblico fogli e chiameremo Dotsie SS così simile. 17 00:01:00,810 --> 00:01:09,210 Questo sarà chiamato fogli di stile, quindi fogli di stile public slash e ne avremo un altro alla fine per il 18 00:01:09,210 --> 00:01:10,000 nostro javascript 19 00:01:10,470 --> 00:01:11,260 OK. 20 00:01:11,520 --> 00:01:13,040 Ora vogliamo aprirlo. 21 00:01:13,380 --> 00:01:19,830 Quindi apriremo quel file su fogli di stile principali e usciamo aggiungendo qualcosa di veramente ovvio qui 22 00:01:19,830 --> 00:01:26,790 come impostare il colore di sfondo affinché il corpo sia viola e salvato e quindi dobbiamo andare avanti 23 00:01:26,790 --> 00:01:28,140 e ottenere questo collegamento. 24 00:01:28,140 --> 00:01:36,790 Quindi nel caso dell'app dobbiamo aggiungere una riga qui dove facciamo un'app dot usare Express che è statica. 25 00:01:37,380 --> 00:01:41,790 E poi quello che abbiamo fatto l'ultima volta è stato solo aggiungere in pubblico, ma in realtà c'è 26 00:01:41,790 --> 00:01:44,380 un modo leggermente migliore di farlo che non volevo mostrare subito. 27 00:01:44,400 --> 00:01:50,370 Ma intendo mostrarlo ora tutto ciò che dobbiamo fare è aggiungere un underscore underscore nome caro 28 00:01:50,880 --> 00:01:57,050 nome directory più slash public dir name si riferisce alla directory che questo script stava girando. 29 00:01:57,180 --> 00:01:58,630 Quindi lascia che ti mostri come si presenta. 30 00:01:58,800 --> 00:02:07,920 Se faccio solo una console ma registro underscore underscore al tuo nome proprio così e salvare 31 00:02:07,920 --> 00:02:10,190 e riavviare il server. 32 00:02:12,000 --> 00:02:13,440 Notate cosa ottengo qui. 33 00:02:13,530 --> 00:02:19,560 Questo è il nome della directory dell'intero spazio di lavoro del percorso in modo lussureggiante di camp slash v 5. 34 00:02:19,710 --> 00:02:26,940 Quindi aggiungendo il nome di dir e la barra pubblica siamo solo più sicuri perché se potenzialmente in qualche modo questo ha cambiato la 35 00:02:26,940 --> 00:02:30,390 directory corrente è successo qualcosa di strano che non ci aspettavamo. 36 00:02:30,450 --> 00:02:36,210 Che speriamo non lo faccia mai, ma se lo facesse il tuo nome sarà sempre la directory in cui vive 37 00:02:36,210 --> 00:02:36,650 la sceneggiatura. 38 00:02:36,900 --> 00:02:41,240 Quindi siamo solo più sicuri e aggiungiamo slash pubblici ed è solo il modo più convenzionale 39 00:02:41,250 --> 00:02:41,860 di farlo. 40 00:02:42,060 --> 00:02:43,820 Non vedremo alcuna differenza. 41 00:02:43,860 --> 00:02:44,920 Quindi salveremo. 42 00:02:44,930 --> 00:02:50,140 Possiamo sbarazzarci di questo e ciò che abbiamo fatto è stato aggiunto nella nostra mente semplice. 43 00:02:50,190 --> 00:02:52,390 SS Ma non ci siamo ancora collegati. 44 00:02:52,530 --> 00:02:54,500 Quindi abbiamo servito l'elenco pubblico. 45 00:02:54,600 --> 00:02:59,460 Ora stiamo servendo tutto in quella directory che è in realtà solo un singolo foglio di stile di cartelle 46 00:02:59,460 --> 00:03:01,540 e un singolo file potrebbe finire con noi. 47 00:03:01,620 --> 00:03:05,510 Ma ora andiamo a collegarci a quel file e facciamolo sul file di intestazione. 48 00:03:05,580 --> 00:03:14,920 Quindi andrò alle visualizzazioni di C9 che tagliano l'hetter di Parshall e poi salgono in testa dopo il bootstrap. 49 00:03:14,980 --> 00:03:22,200 Aggiungerò un altro tag link e questo sarà H ref uguale a slash stylesheets taglia 50 00:03:24,660 --> 00:03:31,330 CS principale e poi aggiungeremo anche in fila qui per essere foglio di stile. 51 00:03:31,950 --> 00:03:32,500 OK. 52 00:03:32,850 --> 00:03:38,340 Quindi ora ci siamo collegati al nostro foglio di stile che stiamo ora servendo dalla directory pubblica. 53 00:03:38,340 --> 00:03:40,680 E proviamo se ha funzionato. 54 00:03:40,740 --> 00:03:45,350 Sarà su ogni singola pagina perché ogni pagina che include l'intestazione parziale. 55 00:03:45,630 --> 00:03:46,380 Proviamo questo. 56 00:03:46,380 --> 00:03:48,450 Stiamo andando alla nostra pagina di destinazione. 57 00:03:48,450 --> 00:03:48,980 Eccoci. 58 00:03:48,990 --> 00:03:55,230 È tutto viola e se andiamo a vedere il nostro campeggio C'è anche uno sfondo viola totalmente da te 59 00:03:55,230 --> 00:03:56,510 se vuoi mantenerlo viola. 60 00:03:56,610 --> 00:03:57,620 Ho intenzione di cambiare di nuovo. 61 00:03:57,750 --> 00:04:03,210 Ma aggiungerò lo stile che abbiamo vinto e quegli stili influenzeranno le miniature. 62 00:04:03,210 --> 00:04:07,050 Quindi queste sono le miniature così come questa miniatura. 63 00:04:07,080 --> 00:04:13,170 Faremo in modo che l'immagine occupi il 100 percento della larghezza, quindi sia sulla pagina dello spettacolo che sulla pagina 64 00:04:13,170 --> 00:04:18,000 dell'indice che vogliamo che accada, così possiamo tornare indietro e cambiare e valutare in modo approssimativo. 65 00:04:18,180 --> 00:04:21,750 Quindi inizieremo selezionando tutte le immagini all'interno delle miniature. 66 00:04:21,900 --> 00:04:25,300 Quindi abbiamo bisogno di una miniatura perché è una classe di bootstrap. 67 00:04:25,550 --> 00:04:31,290 E poi tag immagine con lo spazio tra di loro che è tutti i tag immagine all'interno di miniature. 68 00:04:31,290 --> 00:04:36,180 E poi vogliamo solo impostare la larghezza in modo che sia 100 percento proprio così. 69 00:04:36,300 --> 00:04:42,420 E se salviamo e aggiorniamo e andiamo a una pagina di spettacolo puoi vedere che la nostra immagine ora occupa il 100 70 00:04:42,420 --> 00:04:43,510 percento di questa miniatura. 71 00:04:43,860 --> 00:04:48,210 Quindi abbiamo bisogno di risolvere questo problema di imbottitura che è davvero facile da risolvere e 72 00:04:48,210 --> 00:04:51,820 dove vogliamo liberarci di quella spaziatura per farlo dobbiamo selezionare la miniatura stessa. 73 00:04:51,870 --> 00:04:56,350 Il div thumbnail e sbarazzarsi del padding e basta impostare su zero. 74 00:04:56,490 --> 00:05:01,580 Quindi il riempimento della miniatura del punto 0. 75 00:05:01,890 --> 00:05:02,930 Salviamo 76 00:05:03,120 --> 00:05:05,260 Tieni d'occhio questa imbottitura lì. 77 00:05:05,280 --> 00:05:06,130 Ora è andato. 78 00:05:06,510 --> 00:05:11,230 E se torniamo alla nostra pagina indice, puoi vedere che anche questi sono a filo. 79 00:05:11,280 --> 00:05:12,980 Non abbiamo nemmeno imbottiture. 80 00:05:13,320 --> 00:05:17,100 Personalmente preferisco senza l'imbottitura qui senza spazio intermedio. 81 00:05:17,250 --> 00:05:22,290 Ma è una questione di preferenze personali e se si desidera che lo spazio di nuovo lì 82 00:05:22,320 --> 00:05:27,910 dentro ciò che si può fare non è applicare questi stili in particolare questo stile per ogni singola miniatura. 83 00:05:27,990 --> 00:05:34,290 Invece si potrebbe dare sulla nostra pagina di spettacolo che si può dare questa miniatura proprio qui un ID o una classe 84 00:05:34,290 --> 00:05:39,280 speciale e quindi si applicheranno solo questi paddings pari a zero a quella classe o due quell'ID. 85 00:05:39,480 --> 00:05:44,970 Ma lo farò a tutti e poi l'altro problema che dobbiamo risolvere è il padding qui. 86 00:05:45,780 --> 00:05:53,970 Quindi, all'interno di questa didascalia, se controlliamo che è il div che abbiamo creato possiamo vedere qui è una didascalia 87 00:05:53,970 --> 00:05:55,560 della classe div completa. 88 00:05:55,770 --> 00:06:00,870 Vogliamo aggiungere alcuni padding lì e il numero che abbiamo deciso nell'ultimo video era di 9 pixel. 89 00:06:00,930 --> 00:06:02,830 Quindi lasciami chiudere la truffa. Torna qui e selezionerò piuttosto 90 00:06:03,030 --> 00:06:08,850 che tutti i puledri di didascalia selezionerò solo le didascalie all'interno di una miniatura. 91 00:06:08,850 --> 00:06:11,100 Quindi, la didascalia di 92 00:06:11,220 --> 00:06:21,690 thumbnail di Dot è piena e noi daremo loro padding di nove pixel proprio come questo, salviamo la pagina. 93 00:06:21,690 --> 00:06:23,130 Eccoci. 94 00:06:23,130 --> 00:06:23,750 Otteniamo quella spaziatura che stiamo cercando. 95 00:06:23,760 --> 00:06:26,130 Tutto ok. 96 00:06:26,130 --> 00:06:26,390 Quindi questo è tutto ciò che volevo fare. 97 00:06:26,400 --> 00:06:27,610 Ricapitoliamo rapidamente ciò che abbiamo realizzato. 98 00:06:27,780 --> 00:06:29,910 Abbiamo creato un nuovo file Nazi SS 99 00:06:29,910 --> 00:06:36,470 principale e lo abbiamo inserito all'interno della directory pubblica all'interno di fogli di stile e alla fine avranno più fogli di stile 100 00:06:36,840 --> 00:06:41,490 uno per la pagina di destinazione in particolare e avremo anche i javascript che entrano qui. 101 00:06:41,490 --> 00:06:43,560 E quindi per utilizzare effettivamente 102 00:06:43,680 --> 00:06:49,740 la directory pubblica dobbiamo interagire Sì tell express per servire la directory pubblica. 103 00:06:49,740 --> 00:06:50,410 E ti ho 104 00:06:50,520 --> 00:06:55,230 mostrato questo underscore per sottolineare il tuo nome e l'ultima cosa è che lo abbiamo incluso nel file di intestazione. 105 00:06:55,230 --> 00:06:56,660 È proprio qui e ci colleghiamo ad esso con i fogli di stile Slash 106 00:06:56,680 --> 00:07:01,300