Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

arrow_back Aula 08 - Elementos Block e Inline

Criando layout com divs (parte 2)

Continuando a construção do layout, nesta videoaula você verá como criar CSS para o HTML criado anteriormente. A seguir, temos os códigos criados.

HTML
CSS
JS
​x
1
 <!DOCTYPE html>
2
<html lang="en">
3
​
4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
  <title>Layout div</title>
9
  <link rel="stylesheet" type="text/css" href="style.css">
10
</head>
11
​
12
<body>
13
​
14
  <div id="cabecalho">
15
    <h2>Cabeçalho</h2>
16
  </div>
17
​
18
  <div id="secao">
19
​
20
    <div id="menu">
21
​
22
      <ul>
23
        <li><a href="#">Londres</a></li>
24
        <li><a href="#">Paris</a></li>
25
        <li><a href="#">Rio de Janeiro</a></li>
26
      </ul>
27
​
28
    </div>
29
​
30
    <div id="artigo">
31
​
32
      <h2>Londres</h2>
33
​
34
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
35
        doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at
36
        architecto ipsa.</p>
37
​
38
    </div>
39
​
40
  </div>
41
​
42
  <div id="rodape">
43
    <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
44
  </div>
45
​
46
</body>
47
​
48
</html>
41
1
 body {
2
  font-family: Arial, Helvetica, sans-serif;
3
}
4
​
5
#cabecalho {
6
  background-color: gray;
7
  color: white;
8
  height: 200px;
9
}
10
​
11
#menu {
12
  background-color: azure;
13
  width: 30%;
14
  padding: 20px;
15
  float: left;
16
  box-sizing: border-box;
17
}
18
​
19
#menu ul {
20
  list-style-type: none;
21
  padding: 20px;
22
}
23
​
24
#artigo {
25
  width: 70%;
26
  background-color: cornsilk;
27
  box-sizing: border-box;
28
  float: left;
29
  padding: 20px;
30
}
31
​
32
#rodape {
33
  background-color: blue;
34
  color: white;
35
  padding: 20px;
36
  clear: both;
37
}
38
​
39
#rodape a{
40
  color: white;
41
}
1
1

[A] Anterior
5/6
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados