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.

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Layout div</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div id="cabecalho">
    <h2>Cabeçalho</h2>
  </div>

  <div id="secao">

    <div id="menu">

      <ul>
        <li><a href="#">Londres</a></li>
        <li><a href="#">Paris</a></li>
        <li><a href="#">Rio de Janeiro</a></li>
      </ul>

    </div>

    <div id="artigo">

      <h2>Londres</h2>

      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore qui sed numquam nam quo obcaecati,
        doloremque praesentium similique sequi quia nihil eaque fuga optio cumque beatae voluptatem at
        architecto ipsa.</p>

    </div>

  </div>

  <div id="rodape">
    <p><a href="http://imd.ufrn.br">www.imd.ufrn.br</a></p>
  </div>

</body>

</html>

 body {
  font-family: Arial, Helvetica, sans-serif;
}

#cabecalho {
  background-color: gray;
  color: white;
  height: 200px;
}

#menu {
  background-color: azure;
  width: 30%;
  padding: 20px;
  float: left;
  box-sizing: border-box;
}

#menu ul {
  list-style-type: none;
  padding: 20px;
}

#artigo {
  width: 70%;
  background-color: cornsilk;
  box-sizing: border-box;
  float: left;
  padding: 20px;
}

#rodape {
  background-color: blue;
  color: white;
  padding: 20px;
  clear: both;
}

#rodape a{
  color: white;
}

Termo de uso

arrow_back Aula 08 - Elementos Block e Inline

Criando layout com divs (parte 2)

Aula 08 - Elementos Block e Inline