Arquivo para categoria html

Exemplo de capa de trabalho em HTML

Publicado por Pablo Alexander em html em 3 de janeiro de 2012

Aqui está um exemplo de como criar uma capa de trabalho com HTML e CSS.

<!DOCTYPE html>
<!--
 HTML escrito por Pablo Alexander
 http://www.pabloalexander.net
 pablo@pabloalexander.net
-->
<html>
 <head>
  <title>Trabalho de geografia</title>
  <style type="text/css">
   #materia {
    font-size:92pt;
    color:#d80;
   }
   #rodape {
    font-size:12pt;
    font-weight:bold;
    text-align:center;
    color:#999;
   }
   .centrodetudo {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index:1;
   }
   .fundodetudo {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
    z-index:2;
   }
   p {
    font-size:14pt;
    font-weight:bold;
    color:#222;
   }
  </style>
 </head>
 <body>
  <!-- Fica no centro de tudo -->
  <table class="centrodetudo">
   <tr>
    <td align="center" valign="middle">
     <div id="materia">Trabalho de Geogr&aacute;fia</div>
    </td>
   </tr>
  </table>
  <!-- Fica no fundo -->
  <table class="fundodetudo">
   <tr>
    <td valign="bottom">
     <div id="rodape">Pablo Alexander</div>
    </td>
   </tr>
  </table>
  <p>Trabalho sobre a globaliza&ccedil;&atilde;o do ocidente, focado em no&ccedil;&otilde;es geol&oacute;gicas daquela &eacute;poca.</p>
 </body>
</html>

Deixe um comentário