As instruções para este exercício estão no link http://web.fe.up.pt/~ssn/disciplinas/cdi/css/27.html, proposto pelo prof. Sérgio Sobral Nunes.
Passos no Dreamweaver:
1. Configure um site.
2. Crie um arquivo HTML com o nome posicionamento.html.
3. Abra o arquivo posicionamento.html e cole o código abaixo:
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="pt-br"> | |
| <head> | |
| <title>Posicionamento com CSS</title> | |
| <link rel="stylesheet" href="posicionamento.css" type="text/css"> | |
| </head> | |
| <body> | |
| <div class="esqcima"> | |
| <p>Esquerda em Cima</p> | |
| </div> | |
| <div class="esqbaixo"> | |
| <p>Esquerda em Baixo</p> | |
| </div> | |
| <div class="dircima"> | |
| <p>Direita em Cima</p> | |
| </div> | |
| <div class="dirbaixo"> | |
| <p>Direita em Baixo</p> | |
| </div> | |
| </body> | |
| </html> |
4. Crie um arquivo CSS com o nome posicionamento.css
5. Abra o arquivo posicionamento.css
6. Acesse o painel CSS:
7. No painel CSS, crie uma nova classe:
(a. Imagem do painel)
(b. Imagem da base do painel CSS. Para criar uma nova regra, clique no ícone +, destacado na figura)
8.Coloque o nome esqcima no campo Selector Name, conforme indica a imagem abaixo. Dê Ok.
9. Altere os valores das propriedades para obter o resultado esperado da imagem apresentada no início do post.
10. Repita os passos 7, 8 e 9 para as três outras classes: esqbaixo, dircima e dirbaixo.
Resposta do exercício para o CSS (posicionamento.css):
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .esqcima { | |
| background-color: #F00; | |
| height: 200px; | |
| width: 200px; | |
| float: left; | |
| position: absolute; | |
| left: 0px; | |
| top: 0px; | |
| } | |
| .esqbaixo { | |
| background-color: #060; | |
| float: left; | |
| height: 200px; | |
| width: 200px; | |
| position: absolute; | |
| bottom: 0px; | |
| left: 0px; | |
| } | |
| .dircima { | |
| background-color: #FF0; | |
| height: 200px; | |
| width: 200px; | |
| float: right; | |
| position: absolute; | |
| top: 0px; | |
| right: 0px; | |
| } | |
| .dirbaixo { | |
| background-color: #00F; | |
| height: 200px; | |
| width: 200px; | |
| position: absolute; | |
| float: right; | |
| right: 0px; | |
| bottom: 0px; | |
| } |
Código no Code Pen:
Referência para estudo:
NUNES, S. S. Comunicações Digitais e Internet. Disponível em <http://web.fe.up.pt/~ssn/disciplinas/cdi/css/1.html>. Acesso em Set 2013.
Assine aqui com seu email
ConversionConversão EmoticonEmoticon