pw1-2017 blocos.html

<!DOCTYPE HTML>
<!-- Arquivo: blocos.html -->
<html>
    <head>
        <meta charset="utf-8"/>
        <title> Blocos </title>
        <style>
        .div1 { border: dotted 1px #659807;
            width: 50%;
        }
        .div2 { border: solid 1px red;
                padding-top: 50px;
                margin:10px;
                }
        .atencao { color: red; background-color:#333; }
        div.esquerda {
            float: left;
            background-color: red;
            color: #fff;
            width: 200px;
        }
        div.centro {
            margin-left: 220px;
        }
        </style>
    </head>
    <body>
    <div class="div1">
    <p>O elemento div é um container de bloco.</p>
    </div>
    <div class="div2">
        <h1>Um título</h1>
        <p>O elemento span é um elemento <i>inline</i>
        <span class="atencao">como esse</span>.</p>
        <p> outra linha </p>
    </div>
    <br>
    <div class="esquerda">
     <ul>
         <li> item 1</li>
         <li> item 2</li>
         <li> item 3</li>
     </ul>
    </div>

    <div class="centro">
    Conteudo da minha página no centro da tela. Um monte
    de texto. Lorem lorem ipsulum.
    </div>
    </body>
</html>