Ciao a tutti.
Nella revisione del codice di oggi, parleremo di fare un calendario.
Perché quello che mi piace molto dei calendari è che ci sono tutte queste
piccole cose a cui devi pensare per rendere davvero professionale la tua pagina.
Quindi quello che ho proprio qui sullo schermo è un calendario molto, molto semplice,
dove si può vedere, ho tutti i giorni del mese.
Ho anche, in alcuni giorni, degli appuntamenti.
Quindi pranzero' con mamma, o incontrero' il preside, o saro' aiutante della biblioteca.
E, il 31, è Halloween, quindi boo!
Cosa possiamo fare per prendere queste informazioni,
questo contenuto dal nostro HTML5, e trasformarlo in qualcosa che è davvero piacevole?
Beh, diamo un'occhiata a quello che ho fatto.
Qui, ho usato i CSS per creare un calendario
che ha molte cose diverse in corso. Per
prima cosa, sono andato avanti e l'ho disegnato bene.
Ho incluso cose come il raggio di confine, evidenziato in questi giorni proprio qui.
Mi rendo conto che è davvero difficile da vedere sullo schermo in questo momento, ma in realtà ho
un'immagine di sfondo per quei giorni per farlo sembrare un po 'diverso.
L' altra cosa che ho aggiunto è che nei giorni che hanno questi piccoli asterischi,
se clicco su di essi, viene visualizzato l'appuntamento effettivo.
Quindi, come puoi vedere, ho a che fare con un sacco di diversi elementi CSS.
E sto lentamente analizzando il codice
solo per darvi un'idea di cosa sta succedendo.
Ora sarebbe impossibile per te seguire insieme a me questo codice e
sapere esattamente cosa sto facendo.
Invece, te lo sto dando come risorsa per scegliere e
capire le diverse parti come hai bisogno e
come vuoi incorporarle nella tua pagina.
Quindi diamo un'occhiata al CSS.
Potete vedere che questa è una pagina molto, molto occupata.
Quindi siediti e
puoi sentirmi parlare delle diverse cose invece di cercare di leggere il codice.
Sono entrato e volevo fare il mio calendario con un raggio di bordo molto bello in modo da
avere qualcosa intorno alla parte superiore.
Il fatto è che il tavolo stesso è in realtà solo questa parte.
Non e' la didascalia.
Quindi quello che ho fatto è che sono entrato e
ho detto, non preoccuparti dei primi due angoli, qui e qui.
Curva solo i due angoli inferiori, va bene.
Come faccio a ottenere questa fantastica idea di alternare una sorta di grigio chiaro e
questo colore e andare avanti e indietro?
Bene con questo, puoi andare avanti e usare alcuni dei diversi pseudo elementi.
Quindi in questo caso sono entrato.
E non sono io.
E' il browser che dice: «Ehi, guardero' tutte le diverse righe del tavolo.
E ogni volta che vedo un bambino strano, lo faro' di un colore,
ogni volta che vedo un bambino pari, lo rendero' un altro colore.
Questo è molto più bello di quanto tu debba andare nel tuo tavolo e
mettere classe uguale a pari, classe uguale a dispari, classe uguale a pari,
soprattutto se in seguito decidi di aggiungere più informazioni e getta le tue righe.
Questo è qualcosa di veramente potente di cui dovresti provare a approfittare.
E quando cerchi di rendere la tua pagina davvero professionale,
gli elementi che si sovrappongono?
Quindi proprio qui, in realtà sto guardando un tavolo, una riga di tabella e
un elemento di tabella.
Ho dovuto passare attraverso e pensare a ciascuno di questi e pensare a cose come,
hm, beh, nella mia ultima riga di tabella, l'ultimo elemento di tabella,
che ha una curva diversa rispetto al primo figlio.
Quindi vai avanti, scarica questo codice e dai un'occhiata e gioca con esso.
Cosa succede se lo commenti?
Cosa succedera'?
Va bene, ho un codice abbastanza semplice per la didascalia, sono andato avanti e ho
appena aggiunto un raggio di bordo e colori.
Quello che voglio davvero mostrarti e' l'idea di quando vuoi nascondere le cose.
Torniamo al codice HTML.
Ho messo tutti i miei elementi all'interno di un tag span.
Quindi qui, ho l'helper della libreria span.
Spero che tu stia pensando ora e andando,
perché questi non si presentano quando guardo il calendario per la prima volta?
Perché non è lì?
Beh, il motivo sarebbe perché per impostazione predefinita, andrò avanti e
nasconderò tutti i diversi appuntamenti.
Vado avanti e dico, visibilità nascosta.
Ora questo è diverso da visualizzarne nessuno.
Se non avessi mostrato nessuno, tutta la piazza sarebbe sparita, non ci sarebbe.
La visibilità nascosta dice che voglio lasciare tutto quello spazio, ma
non voglio mostrare cosa c'e' li' dentro.
È una cosa molto piccola sfumata, e questo è esattamente il motivo per cui ho fatto questo esempio, in modo da
poter vedere la differenza.
Va bene, quindi ora è nascosto.
Ma non appena lo faccio attivo, e significa attivo non appena si sta facendo clic su di
esso, cambio la visibilità da nascosta a visibile.
Quindi facciamo clic su di esso.
E puoi vedere il pranzo con la mamma che arriva.
Aiutante della biblioteca, e anche qui, ad Halloween,
ho un piccolo messaggio.
Quindi c'era molto da fare con questo CSS.
E non voglio scendere su ogni linea, e
tu non vuoi che lo faccia neanche io.
Sarebbe molto noioso.
Quindi spero, però, di averti mostrato alcuni dei modi in cui queste
pseudo-classi, pseudo-elementi, i diversi stati, sono tutti insieme
per creare una pagina che possa apparire molto meglio del semplice HTML da solo.
Quindi spero che userai questo codice e creerai qualcosa di fantastico per te stesso.
Buona fortuna.