Ben tornato.
Quindi ora che abbiamo configurato la struttura delle cartelle e abbiamo creato i nostri file, passeremo un
po 'di tempo in questo video per creare l'effettiva struttura del team.
Quindi gli elementi di cui abbiamo bisogno per la nostra lista delle cose da fare.
Iniziamo dando un'occhiata alla versione finale a cui stiamo lavorando nel corso
di questa unità.
Quindi ecco la lista finale da fare.
E i grandi elementi che abbiamo qui abbiamo un titolo proprio qui.
Hai un pulsante qui una sorta di elemento.
Abbiamo un input di testo qui il tipo di input è uguale al testo e quindi questo è un pozzo e ognuno di
questi è un alleato in quell'UL.
E poi ogni pulsante qui è un intervallo che stiamo mostrando e nascondendo e cambiando con.
E abbiamo anche bisogno di una sorta di elemento per contenere tutto e useremo solo un dispositivo per farlo.
Quindi abbiamo bisogno di un div all'interno di quel div, faremo in modo che un H-1 inserisca un testo in un UL con un gruppo di alleati
e poi anche un po 'di span.
un elenco di cose brutto che funzioni e poi tornando indietro e aggiungendo nella C S.
Quindi inizieremo scrivendo un po 'di tempo con lui, senza C Ss e solo per
farti sapere come faremo creando
Quindi voglio arrivare alla carne di questo che è la query di J e la logica di fare di nuovo
da fare e cancellarli e poi torneremo e aggiungeremo alcune cose carine alla fine.
OK.
Quindi iniziamo con l'HD.
diamo un contenitore di ID e metteremo tutto all'interno di quel div e poi
invece quel div avrà un H1 e dirà solo di fare lista e poi faremo avere un input di testo
Creerò un div e gli
Quindi il tipo di input è uguale al testo.
E vediamo solo come si sta formando.
Per ora mi libererò dello sfondo viola e andiamo qui.
E mi libererò anche di questo avviso.
Quindi facciamolo ora.
Eccoci.
OK.
Quindi abbiamo il nostro input, abbiamo il nostro testo per l'H-1.
Suppongo che dovremmo farlo in una lista di cose da fare.
E poi la prossima cosa che faremo è aggiungere l'UL.
Quindi facciamo queste modifiche alla lista di Dasch do.
E dopo ciò aggiungeremo nella nostra UL e ognuno di loro è mentire dentro di noi.
E iniziamo aggiungendo in tre o quattro Tutu di avviamento.
Quindi andrò alle nuove vesti della
classe di Pozioni e aggiungeremo anche la visita a Hagrid.
Tutto ok.
Quindi ne abbiamo tre per farlo nella nostra lista.
Elenco molto insignificante finora, ma abbiamo il nostro H-1, il nostro input di testo e i nostri tre alleati al suo interno.
Bene, ora andiamo avanti e aggiungiamo un pulsante di eliminazione e non abbiamo intenzione di avere questo cestino può eliminare
il pulsante con tutto lo stile per iniziare che verrà dopo.
Avremo semplicemente un pulsante più semplice e in realtà non sarà nemmeno un pulsante.
Assomiglierà a questo.
Quindi la lettera X su cui possiamo cliccare e se clicchiamo su quella X, la cancellerà.
E questo è solo il modo in cui inizieremo invece di fare in modo che la lettera faccia parte della
bugia, anche se ho intenzione di usare una spanna così lunga con una lettera X.
Quindi copiamolo.
Abbiamo tre spand.
Ognuno ha una lettera X aggiornata.
Niente sembra diverso.
Ma ora possiamo selezionare quell'intervallo separatamente e aggiungeremo un ascoltatore veloce.
Quindi, quando clicchiamo su questo intervallo, vogliamo cancellare questo da fare o questa intera bugia.
OK.
Quindi questo è tutto il markup di base di cui abbiamo bisogno.
Facciamo un piccolo pezzetto di stile.
La prima cosa che faremo è centrare questo div Quindi il div è il contenitore ID.
Entriamo qui e selezioniamo che nel nostro file CSSA selezioniamo il contenitore ordinato e diamo un bello sfondo Grigio
solo per iniziare e vedere cosa otteniamo.
Puoi vedere che il div si estende fino in fondo.
Andiamo avanti e aggiungiamo un con in modo che non vada completamente attraverso.
E poi proveremo a centrarlo al centro dello schermo, quindi la larghezza
andrà a trecentosessantasei.
E se lo salviamo è solo la stessa larghezza che ho con la versione finale.
Quindi 360 pixel e poi la prossima cosa che vogliamo fare è ovviamente centrarla.
E il modo più semplice è usare quel trucco marginale.
Quindi impostiamo il margine in alto e in basso in modo da essere zero e il sinistro e il diritto di essere Ahto.
E se ci aggiorniamo ora abbiamo un bel centro per fare la lista.
Quindi è tutto il tempo necessario e valutiamo che possiamo fare per iniziare qui.
Aggiungeremo alcune cose in base alle nostre esigenze.
E poi, una volta che avremo le funzionalità di base, concentreremo l'attenzione su come rendere bello
questo e ottenere il diritto di conoscere le animazioni e gli effetti, le dissolvenze e le diapositive e rendere
le cose solo molto più belle.
OK, nel prossimo video inizieremo a scrivere qualche domanda