Como Fazer Uma Tampa De Borracha

Índice:

Como Fazer Uma Tampa De Borracha
Como Fazer Uma Tampa De Borracha

Vídeo: Como Fazer Uma Tampa De Borracha

Vídeo: Como Fazer Uma Tampa De Borracha
Vídeo: DIY,TAMPA DE LATA DE QUALQUER TAMANHO, FAÇA PORTA TEMPEROS LINDOS 2024, Maio
Anonim

A parte superior do site, também chamada de cabeçalho, geralmente reflete o assunto do recurso e pode conter uma barra de navegação. Se o cabeçalho do site tiver uma certa largura, nas telas dos usuários com resoluções diferentes, essa parte do site terá uma aparência diferente. Para que o cabeçalho do site tenha a mesma aparência em qualquer tela, é necessário esticar ou encolher algumas de suas seções, dependendo do tamanho da tela. Essa tampa de borracha pode ser feita sem fixar sua largura em pixels.

Como fazer uma tampa de borracha
Como fazer uma tampa de borracha

Necessário

tenha seu próprio site

Instruções

Passo 1

Para fazer uma tampa de borracha, primeiro desenhe no Photoshop. Em seguida, separe 3 partes da imagem: 2 lados e o meio. Essas peças devem ter cerca de 10-20 pixels de largura e aproximadamente a altura do cabeçalho que você deseja. Salve cada elemento para que você tenha 3 arquivos diferentes: 1.gif, 2.gif, 3.gif. Envie essas imagens para o site.

Passo 2

Em seguida, crie uma tabela que conterá os elementos da parte superior do site. Para fazer isso, escreva no código HTML:

Uma mesa com largura de 100% irá esticar ou encolher dependendo do tamanho da tela do usuário.

etapa 3

Faça uma linha na tabela, em cuja célula coloque o lado esquerdo do cabeçalho do site 1.gif:

Passo 4

Crie uma seção intermediária do cabeçalho do site consistindo em uma imagem 2

.header {background-image: url ('images / 2.gif');}

Etapa 5

Agora, em uma linha da tabela, crie outra célula e coloque o elemento do meio do topo do site nela, apontando para seu cabeçalho de nome no código CSS:

Nome do site

>

Etapa 6

Tendo criado a terceira célula na linha da tabela, coloque o lado direito do cabeçalho do site 3

Nome do site

Recomendado: