Fazendo a página de produtos nessa parte.
Resumo:
Como no plano anterior usamos as tags para montar a estrutura da página:
**
A tag: "" dentro do head .**Para que a página do navegador identifique nosso idioma usamos a tag:
<meta charset="UTF-8">.Criamos um arquivo CSS que é a folha de estilo da página e fazemos a ligação no HTML dentro do
, dessa forma: <link rel="stylesheet" href="reset.css"> = Usamos essa tag para limpar o estilo da página própio.
<link rel="stylesheet" href="style.css">
"href" Significa endereço, ou onde queremos ter ligação com o css.
<head> é onde queremos passar as informações para o navegador.
E <header> é o cabeçalho da página, ou seja o topo.Tag para fazer listas ordenadas e não ordenadas:
Não ordenadas : <ul></ul>.
Ordenadas: <ol><ol>.
Usamos <li></li> para fazer um link dentro das listas.
Usamos a tag <nav></nav> para envolver toda lista de navegação para mexer no css.
No css usamos a tag: display: inline; para deixar os itens do lado um do outro e display: block; para abaixo um do outro.
Usamos a tag da <div></div> para limitar um conteúdo no CSS. E colocamos uma class com nome para referenciar no css através do: .(nome)
Usamos a tag <main></main> quando queremos destacar um item da página como mais importante.
No arquivo produtos.css, adicione uma borda aos itens da lista de produtos:border: 2px solid #000000; border-radius: 10px; para arredondar todas bordas.
Usamos hover: Para quando passarmos o mouse ter aquele efeito, isso usamos no css
Usamos active: Para ter efeito quando clicarmos no elemento.
Para fazermos o rodapé da página usamos a tag <footer></footer>.
Usamos o site da Unicode.com para pegar códigos de símbolos que queremos.
