UNIVERSIDADE EDUARDO MONDLANE

FACULDADE DE CIÊNCIAS
DEPARTAMENTO DE MATEMÁTICA E INFORMÁTICA
Disciplina: PW Curso: Informática (Laboral/Pós-Laboral)
Ficha de Exercícios Nº 3

1. Crie uma página HTML simples com um título, um parágrafo e um link. Aplique estilos CSS
para:
o Definir a cor do título como azul.
o Definir o tamanho da fonte do parágrafo como 16px.
o Sublinhar o link.
2. Crie uma lista com 5 itens. Aplique estilos CSS para:
o Definir a cor de fundo da lista como cinza claro.
o Definir o estilo da lista como "disc".
o Adicionar uma margem superior e inferior de 10px à lista.
3. Crie uma imagem com uma legenda. Aplique estilos CSS para:
o Posicionar a imagem à esquerda da legenda.
o Definir a largura da imagem como 200px.
o Definir a cor da legenda como marrom.
4. Crie um botão com o texto "Clique aqui". Aplique estilos CSS para:
o Definir a cor de fundo do botão como verde.
o Definir a cor da fonte do botão como branco.
o Arredondar os cantos do botão.
5. Crie um layout com duas colunas:
o Na primeira coluna, coloque um título e um parágrafo.
o Na segunda coluna, coloque uma imagem.
o Utilize flexbox para distribuir as colunas.
6. Crie um menu horizontal com 5 itens. Aplique estilos CSS para:
o Posicionar o menu na parte superior da página.
o Definir a cor de fundo do menu como preto.
o Definir a cor da fonte dos itens do menu como branco.
o Aplicar um efeito "hover" nos itens do menu.
7. Crie um formulário com um campo de texto e um botão. Aplique estilos CSS para:
o Definir a largura do campo de texto como 200px.
o Definir a cor de fundo do botão como azul.
o Arredondar os cantos do botão.
8. Crie uma animação para fazer um elemento aparecer e desaparecer. Utilize a propriedade
@keyframes para definir a animação.
9. Crie um layout responsivo que se adapte a diferentes tamanhos de tela. Utilize media
queries para ajustar o layout.
10. Crie um efeito de "parallax" em uma página. Utilize a propriedade background-position
para mover o fundo da página em um ritmo diferente do conteúdo.
11. Crie um gráfico usando CSS. Utilize a propriedade display: grid para definir o layout do
gráfico.
12. Crie um "sticky header" que fique fixo na parte superior da página quando o usuário rolar
a tela. Utilize a propriedade position: sticky para fixar o header.
Ficha de Exercícios – PW.2024 (Ernesto Argentina Cumbe & Francisco Domingos) Página: 1 de 4
 13. Crie os layouts a seguir:

a.

b.

Ficha de Exercícios – PW.2024 (Ernesto Argentina Cumbe & Francisco Domingos) Página: 2 de 4
 c.

Ficha de Exercícios – PW.2024 (Ernesto Argentina Cumbe & Francisco Domingos) Página: 3 de 4
Ficha de Exercícios
d. – PW.2024 (Ernesto Argentina Cumbe & Francisco Domingos) Página: 4 de 4