Come visualizzare HTML testo sotto una miniatura in una galleria CSS

November 13

Come visualizzare HTML testo sotto una miniatura in una galleria CSS


Utilizzando i fogli di stile a cascata (CSS) è ora un modo accettato di progettare e tracciare un sito web. Se si desidera creare una galleria di immagini, Hypertext Markup Language (HTML) viene utilizzato per posizionare le foto sulla pagina, e CSS dà loro una dimensione e posizione specifica. Come le foto, una didascalia viene posizionato utilizzando HTML e stile usando i CSS. Questo può essere fatto dalla stessa posizione all'interno del documento HTML.

istruzione

1 Individuare la sezione corretta del codice HTML. Se la galleria di miniature contiene fotografie, il codice per ogni immagine probabilmente inizia con "img src" e termina con un file in formato ".jpg". Non ci dovrebbero essere diverse linee con codice simile, uno per ogni immagine nella galleria.

2 Trovare la fine del codice per il file immagine. Questo dovrebbe essere dopo in cui si dice ".jpg". Inserire il cursore lì, e ha colpito il ritorno, in modo da avere una riga vuota con cui lavorare, direttamente sotto il codice per l'immagine. Inserisci il testo che si desidera visualizzare sotto la foto in questo luogo qui.

3 Inserire il testo all'interno di due tag div, e dare il div una descrizione. Questo è ciò che vi permetterà di andare nella porzione CSS del documento in un futuro passo e cambiare il design. Il testo dovrebbe essere simile a questo: <div class = "disc"> testo che si desidera sotto la foto </ div>. Questo div verrà posizionato all'interno del div grande, per l'intera immagine. In questo modo si ha la flessibilità per determinare dove i cambiamenti sono necessari.

4 Individuare la parte CSS del documento. Questo sarà sotto il tag che dice <style type = "text / css">. Posizionare il cursore alla fine del tag e premete Invio, in modo da avere una riga vuota per inserire il proprio testo.

5 Inserisci il tag che permetterà al CSS per trovare la parte del documento HTML che si desidera apportare modifiche di stile per. Questa porzione di codice viene chiamato il selettore. Essa sarà simile a questa: div.desc

Questo significa che si desidera apportare modifiche al div che hai chiamato "disc", che è l'abbreviazione di descrizione.

6 Creare cambiamenti di stile per la didascalia, se lo si desidera. Ad esempio, utilizzando i CSS, è possibile allineare il testo in modo che sia centrato con l'immagine, e si può determinare in che modo ampio lo spazio è che il titolo verrà visualizzato su. Si avrebbe bisogno di aggiungere questi tag sotto il vostro selettore:

div.desc {

text-align: center;

width: 120px}

Consigli e avvertenze

  • Controllare l'accuratezza del tuo lavoro salvando il codice HTML e poi aprire il file per il galleria fotografica. Se il file è già aperto, ha colpito rinfrescare e dovrebbero apparire le modifiche.
  • È inoltre possibile navigare attraverso tutorial CSS (vedi Risorse) per trovare altri modi per stilizzare la didascalia.
  • Assicurarsi che eventuali modifiche al codice HTML e CSS sono accurate. Se si dispone di errori di battitura, o se il codice non è corretto, i risultati possono essere imprevedibili.