Como exibir texto HTML Sob uma miniatura em uma galeria de CSS

Texto Visualização HTML Sob uma miniatura em uma galeria de CSS

Usando folhas de estilo em cascata (CSS) é agora uma maneira aceitável de projetar e desenhar um site. Se você quer criar uma galeria de imagens, Hypertext Markup Language (HTML) é usado para colocar as fotos na página, e CSS dá-lhes um tamanho e uma localização específica. Como as fotos, uma legenda de texto é colocado usando HTML e estilo usando CSS. Isso tudo pode ser feito a partir do mesmo local dentro do documento HTML.

Localize a seção correta de seu código HTML. Se a sua galeria de miniaturas contém fotografias, o código para cada foto provavelmente começa com "img src" e termina com um arquivo no ".jpg" formato. Deve haver várias linhas com um código semelhante, um para cada imagem na galeria.
Encontre o fim do código para o arquivo de imagem. Este deve ser depois onde diz ".jpg." Insira o cursor lá, e bateu de retorno, para que você tenha uma linha em branco para trabalhar, diretamente sob o código para a imagem. Digite o texto que deseja que apareça abaixo da foto neste local aqui.
Coloque o texto dentro de duas tags div, e dar o div uma descrição. Isto é o que irá permitir que você vá para a parte CSS do seu documento em uma etapa futuro e mudar o design. Seu texto deve ser semelhante a este:
Texto que deseja abaixo da foto
. Este div vai ser colocado dentro do div maior, para toda a imagem. Dessa forma, você tem a flexibilidade para determinar onde as mudanças são necessárias.
Localizar a parte CSS do seu documento. Este será debaixo da tag que diz
Digite o tag que permitirá que o CSS para encontrar a parte do documento HTML que você quiser fazer alterações de estilo para. Esta parte do código é chamado o selector. Ele será parecido com este: div.desc

Isto significa que você quiser fazer alterações para o div que você nomeou "desc," que é curto para descrição.
Criar mudanças de estilo para a sua legenda, se desejar. Por exemplo, usando CSS, você pode alinhar o texto assim que é centrada com a imagem, e você pode determinar a largura do espaço é que a legenda será exibido. Você precisará adicionar essas tags debaixo de seu seletor:
div.desc {
text-align: center;
width: 120px}

dicas & avisos

Verificar a exatidão de seu trabalho salvando o código HTML e, em seguida, abrir o arquivo para a sua galeria de fotos. Se o arquivo já está aberto, bateu refrescar e as mudanças deve aparecer.
Você também pode navegar através de tutoriais CSS (consulte Recursos) para encontrar outras maneiras de estilizar a legenda.

Certifique-se de que quaisquer alterações para o HTML e CSS são precisos. Se você tem erros de digitação, ou se o código não estiver correta, os resultados podem ser imprevisíveis.

De esta maneira? Compartilhar em redes sociais: