Quindi passiamo a una soluzione per questo esercizio.
Come sempre puoi dare un'occhiata al codice subito se vuoi seguirlo.
Inizia da zero con me.
Sentiti libero di farlo.
Quindi la primissima cosa che dobbiamo fare è creare un nuovo file che chiamerò Pokemon che ogni squadra
creerà la nostra etichetta e riempiremo il titolo per abbinare dove dovrebbe essere.
Oh, vieni sul grafico.
Quindi sappiamo che questo avrà un H-1 in cima e che ognuno di essi è solo il primo genocidio sul grafico.
E sappiamo che ci sarà un tavolo in quel tavolo e una testa T e un corpo che solo per rinfrescare la tua memoria non hanno
alcun impatto sul modo in cui la tabella si presenta o si comporta.
Si tratta semplicemente di rendere il nostro markup il più semantico possibile, facendo in modo che un motore di ricerca o
un webcrawler sappiano che questo è il vero e proprio del cappellaio e questo è il corpo.
Quindi, solo una buona idea è pratica.
Quindi andremo ad aggiungere i nostri quattro titoli più importanti, quindi per gli adolescenti abbiamo il tipo di nome
dell'immagine e ci evolviamo.
Quindi andiamo avanti e vediamo come va tutto bene.
C'è il nostro tavolo finora.
La prima cosa che probabilmente vorremmo fare è solo quella di far coincidere ciò che avevamo, dargli un confine.
Ricorda però che non vogliamo davvero farlo più tardi in classe, quindi una volta che
parliamo di C S, faremo tutto lo styling attraverso C S S.
Questo è solo per rendere le cose visive per ora.
Non è una cattiva idea conoscerlo, ma è un'idea migliore davvero fare questo professionalmente.
OK, allora prendiamo alcuni di questi dati.
fondo qui e commenta tutto fuori e poi tutto quello che sta per fare è creare la mia prima riga, quindi inizierà con bulboasaur.
Quando si copia giù fino in
Quindi invece del corpo necessario per il tuo Invece di quel TR Abbiamo bisogno di 40.
Il nome corrisponderà al nostro secondo Th.
Quindi lo inserirò nella seconda t d.
L'immagine va prima di tutto.
Quindi ho intenzione di copiare l'immagine che hai e poi ho intenzione di creare un tag immagine e
impostare la sorgente uguale a quello in cui sei reale all'interno di quel tiddy, se vuoi, potresti distanziarlo
un po 'come questo .
Quindi sai che questo non ha alcun impatto su qualcosa di puramente estetico
nel nostro codice, in modo che possiamo vedere le relazioni che questa immagine è annidata all'interno della TV che se
abbiamo il nome successivo abbiamo tipo che è erba e veleno.
E infine abbiamo un altro più complesso in cui abbiamo un tag AI.
Ricorda che deve assomigliare a questo un tag che dice che Ivey's o così che l'e-tag copi il
link di cui ha bisogno per andare e poi copiamo il nome per quel contenuto e poi ho intenzione di andare avanti e sbarazzarmi di
questo fino a sbarazzarsi dei commenti.
Beh, sbarazzati di questo solo per pulire un po 'questo.
Rinnova e c'è la nostra prima voce.
Controlla che funzioni.
O posso essere dolorante.
Grande.
OK.
Quindi in pratica ripeteremo esattamente lo stesso processo.
E per il momento ho intenzione di copiare questo.
questa bella scorciatoia in cui puoi selezionare e premere il comando shift il comando shifty due volte se lo desideri.
Quindi questa intera riga e ricorda che potevi fare Control-C e incollarlo con il controllo V e il comando C in
comando forniamo anche
E questo lo duplicherà due volte.
Quindi ora lo abbiamo raddoppiato automaticamente e abbiamo solo bisogno di passare e apportare alcune modifiche.
Quindi il primo nome
è Car
Mandar l'immagine che sei Gufo e abbiamo bisogno di Tamilian.
di fuoco e tutti qui sono incollati.
È un tipo
Controlliamo su quello.
Quindi dovremmo avere open source perché copia e incollato nel link è corretto.
Grande.
Ora dobbiamo solo finire con
l'acqua
di immagine Squirtle.
la bevanda è acqua.
Andiamo con te o prima se il link cambia nome o tartaruga e
Tutta la quantità di copia e incolla lì.
Eccoci.
Assicurati che tutto funzioni alla grande.
OK, questo è tutto ciò che dobbiamo fare per essere sicuri che corrispondano.
Sembra buono.
Grande.
Un piccolo cambiamento che potrei fare mentre sono qui.
Solo una buona lezione su questo.
Aggiungerò un commento qui solo per chiarire per voi ragazzi, quindi questa prima è qual è stata la vostra prossima.
Questo è tutto sul fascino mandar.
E infine questo è tutto ciò che corrisponde a Squirtle.
Un cambiamento però come ho detto è che queste immagini sono piuttosto massicce.
Potremmo ridurli abilmente e ciò ridurrebbe le dimensioni di un tavolo.
E questo è qualcosa che dovresti fare con CSSA è informazioni di stile.
Quindi idealmente lo facciamo con s lontano da ogni squadra.
Vogliamo tenerli separati.
Ogni volta strutturerò lo stile CSSA.
Ma per questo esercizio ciò che possiamo fare è aggiungere un attributo con un'immagine a un numero come
50 e vederlo come aggiornamento.
Questo cambia a 50 pixel molto più piccoli dove si passa a 500 e si ottiene un'immagine gigantesca.
Tienilo a 50.
E un'altra ragione per cui voglio mostrarvi questo è piuttosto che copiare e incollare questo
tre volte che funziona bene.
Un modo migliore per farlo in sublime è di creare effettivamente tre cursori, quindi ti mostrerò cosa intendo.
Facciamo clic tenendo premuto il comando fai nuovamente clic sul comando di estrazione e clic di nuovo, quindi possiamo iniziare a digitare.
E ho tre cursori contemporaneamente con uguale a 50.
Quindi questo è abbastanza bello.
È davvero utile se hai bisogno di cambiare più cose contemporaneamente nello stesso identico modo
con cui fai clic su tutto il luogo e genera una serie di maledizioni.
E come puoi vedere abbiamo un bel tavolo più leggibile e ragionevole.
Tutto ok