Bentornata in questa lezione, finiremo per completare lo stile della pagina di presentazione del campeggio alla
fine dell'ultimo video.
Ho citato alcuni dei cambiamenti che dobbiamo apportare.
Questo non può essere risolto con puro bootstrap.
Abbiamo bisogno di aggiungere alcuni stili personalizzati.
Quindi abbiamo bisogno di cambiare la larghezza di questa immagine qui in modo che occupi il 100 percento della miniatura.
Volevamo aggiungere qualche padding qui.
dovrebbe essere il punto in cui abbiamo il padding e puoi vedere che l'immagine occupa l'intero contenitore.
Questo è come
E per ottenere ciò, potremmo andare in mostra a ogni Sì e aggiungere un tag di stile qui.
Ma non è davvero una grande idea.
Quindi, invece, aggiungeremo nel nostro primo foglio di stile personalizzato e per fare quel lavoro creeremo una directory
pubblica proprio come abbiamo fatto in una lezione precedente.
Quindi renderò la directory pubblica e poi creerò un'altra directory all'interno del pubblico.
in primo piano e Javascript e faremo clic su enter e quindi faremo un singolo file
all'interno di stylesheets in stile sosh pubblico fogli e chiameremo Dotsie SS così simile.
Questo sarà chiamato fogli di stile, quindi fogli di stile public slash e ne avremo un altro alla fine per il
nostro javascript
OK.
Ora vogliamo aprirlo.
Quindi apriremo quel file su fogli di stile principali e usciamo aggiungendo qualcosa di veramente ovvio qui
come impostare il colore di sfondo affinché il corpo sia viola e salvato e quindi dobbiamo andare avanti
e ottenere questo collegamento.
Quindi nel caso dell'app dobbiamo aggiungere una riga qui dove facciamo un'app dot usare Express che è statica.
E poi quello che abbiamo fatto l'ultima volta è stato solo aggiungere in pubblico, ma in realtà c'è
un modo leggermente migliore di farlo che non volevo mostrare subito.
Ma intendo mostrarlo ora tutto ciò che dobbiamo fare è aggiungere un underscore underscore nome caro
nome directory più slash public dir name si riferisce alla directory che questo script stava girando.
Quindi lascia che ti mostri come si presenta.
Se faccio solo una console ma registro underscore underscore al tuo nome proprio così e salvare
e riavviare il server.
Notate cosa ottengo qui.
Questo è il nome della directory dell'intero spazio di lavoro del percorso in modo lussureggiante di camp slash v 5.
Quindi aggiungendo il nome di dir e la barra pubblica siamo solo più sicuri perché se potenzialmente in qualche modo questo ha cambiato la
directory corrente è successo qualcosa di strano che non ci aspettavamo.
Che speriamo non lo faccia mai, ma se lo facesse il tuo nome sarà sempre la directory in cui vive
la sceneggiatura.
Quindi siamo solo più sicuri e aggiungiamo slash pubblici ed è solo il modo più convenzionale
di farlo.
Non vedremo alcuna differenza.
Quindi salveremo.
Possiamo sbarazzarci di questo e ciò che abbiamo fatto è stato aggiunto nella nostra mente semplice.
SS Ma non ci siamo ancora collegati.
Quindi abbiamo servito l'elenco pubblico.
Ora stiamo servendo tutto in quella directory che è in realtà solo un singolo foglio di stile di cartelle
e un singolo file potrebbe finire con noi.
Ma ora andiamo a collegarci a quel file e facciamolo sul file di intestazione.
Quindi andrò alle visualizzazioni di C9 che tagliano l'hetter di Parshall e poi salgono in testa dopo il bootstrap.
Aggiungerò un altro tag link e questo sarà H ref uguale a slash stylesheets taglia
CS principale e poi aggiungeremo anche in fila qui per essere foglio di stile.
OK.
Quindi ora ci siamo collegati al nostro foglio di stile che stiamo ora servendo dalla directory pubblica.
E proviamo se ha funzionato.
Sarà su ogni singola pagina perché ogni pagina che include l'intestazione parziale.
Proviamo questo.
Stiamo andando alla nostra pagina di destinazione.
Eccoci.
È tutto viola e se andiamo a vedere il nostro campeggio C'è anche uno sfondo viola totalmente da te
se vuoi mantenerlo viola.
Ho intenzione di cambiare di nuovo.
Ma aggiungerò lo stile che abbiamo vinto e quegli stili influenzeranno le miniature.
Quindi queste sono le miniature così come questa miniatura.
Faremo in modo che l'immagine occupi il 100 percento della larghezza, quindi sia sulla pagina dello spettacolo che sulla pagina
dell'indice che vogliamo che accada, così possiamo tornare indietro e cambiare e valutare in modo approssimativo.
Quindi inizieremo selezionando tutte le immagini all'interno delle miniature.
Quindi abbiamo bisogno di una miniatura perché è una classe di bootstrap.
E poi tag immagine con lo spazio tra di loro che è tutti i tag immagine all'interno di miniature.
E poi vogliamo solo impostare la larghezza in modo che sia 100 percento proprio così.
E se salviamo e aggiorniamo e andiamo a una pagina di spettacolo puoi vedere che la nostra immagine ora occupa il 100
percento di questa miniatura.
Quindi abbiamo bisogno di risolvere questo problema di imbottitura che è davvero facile da risolvere e
dove vogliamo liberarci di quella spaziatura per farlo dobbiamo selezionare la miniatura stessa.
Il div thumbnail e sbarazzarsi del padding e basta impostare su zero.
Quindi il riempimento della miniatura del punto 0.
Salviamo
Tieni d'occhio questa imbottitura lì.
Ora è andato.
E se torniamo alla nostra pagina indice, puoi vedere che anche questi sono a filo.
Non abbiamo nemmeno imbottiture.
Personalmente preferisco senza l'imbottitura qui senza spazio intermedio.
Ma è una questione di preferenze personali e se si desidera che lo spazio di nuovo lì
dentro ciò che si può fare non è applicare questi stili in particolare questo stile per ogni singola miniatura.
Invece si potrebbe dare sulla nostra pagina di spettacolo che si può dare questa miniatura proprio qui un ID o una classe
speciale e quindi si applicheranno solo questi paddings pari a zero a quella classe o due quell'ID.
Ma lo farò a tutti e poi l'altro problema che dobbiamo risolvere è il padding qui.
Quindi, all'interno di questa didascalia, se controlliamo che è il div che abbiamo creato possiamo vedere qui è una didascalia
della classe div completa.
Vogliamo aggiungere alcuni padding lì e il numero che abbiamo deciso nell'ultimo video era di 9 pixel.
Quindi lasciami chiudere la truffa. Torna qui e selezionerò piuttosto
che tutti i puledri di didascalia selezionerò solo le didascalie all'interno di una miniatura.
Quindi, la didascalia di
thumbnail di Dot è piena e noi daremo loro padding di nove pixel proprio come questo, salviamo la pagina.
Eccoci.
Otteniamo quella spaziatura che stiamo cercando.
Tutto ok.
Quindi questo è tutto ciò che volevo fare.
Ricapitoliamo rapidamente ciò che abbiamo realizzato.
Abbiamo creato un nuovo file Nazi SS
principale e lo abbiamo inserito all'interno della directory pubblica all'interno di fogli di stile e alla fine avranno più fogli di stile
uno per la pagina di destinazione in particolare e avremo anche i javascript che entrano qui.
E quindi per utilizzare effettivamente
la directory pubblica dobbiamo interagire Sì tell express per servire la directory pubblica.
E ti ho
mostrato questo underscore per sottolineare il tuo nome e l'ultima cosa è che lo abbiamo incluso nel file di intestazione.
È proprio qui e ci colleghiamo ad esso con i fogli di stile Slash