Estructura de página web con HTML5 y CSS3

Ahora se mostrara un ejemplo completo, para que se repase todo lo estudiado anteriormente. El documento HTML5 es el siguiente:

<!doctype html>
<html>
        
<head>
    <meta charset="utf-8">
    <title>Home-Buenos Aires Querido</title>
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/estilo.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]> <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>   
        
<body>
<div id="wrapper">
    <header>
    <h1> Mi Buenos Aires Querido </h1>
    <p> Otro sitio sobre Buenos Aires </p>
    </header>
        
    <div id="content">
        <section>
            <article>
                <img src="imagenes/imagen_01.jpg">        
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mattis id erat at fermentum. Etiam mattis arcu quis consequat commodo. Ut et erat feugiat, tempus enim at, mollis sapien. Suspendisse porttitor bibendum orci, a finibus metus accumsan ut. Maecenas leo orci, pharetra scelerisque aliquet quis, auctor quis ex. Sed malesuada, turpis at auctor pretium, eros risus sollicitudin eros, id facilisis diam tortor et neque. Mauris sit amet felis neque. Integer sodales tristique lacus, eget cursus velit varius quis. Mauris eget lorem non tortor fermentum eleifend at ut lorem. In dolor est, lacinia a urna non, consectetur imperdiet metus. Vivamus interdum lectus id porttitor lacinia. Quisque luctus justo vel enim vulputate aliquet. Proin tellus nisi, mattis vitae mi non, rhoncus varius mi. Quisque et auctor tortor. Vestibulum ante felis, feugiat quis efficitur facilisis, lacinia at tortor. Donec purus urna, pulvinar sed mi vel, scelerisque tristique nibh. Duis quis lacus urna. Morbi at suscipit purus. Pellentesque viverra vitae sapien at pellentesque. Ut efficitur condimentum mauris, id feugiat ligula posuere fermentum. Mauris at vulputate urna, id tempor neque. Nullam finibus ligula at arcu pellentesque congue. </p>
            </article>

            <article>
                <img src="imagenes/imagen_02.jpg> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mattis id erat at fermentum. Etiam mattis arcu quis consequat commodo. Ut et erat feugiat, tempus enim at, mollis sapien. Suspendisse porttitor bibendum orci, a finibus metus accumsan ut. Maecenas leo orci, pharetra scelerisque aliquet quis, auctor quis ex. Sed malesuada, turpis at auctor pretium, eros risus sollicitudin eros, id facilisis diam tortor et neque. Mauris sit amet felis neque. Integer sodales tristique lacus, eget cursus velit varius quis. Mauris eget lorem non tortor fermentum eleifend at ut lorem. In dolor est, lacinia a urna non, consectetur imperdiet metus. Vivamus interdum lectus id porttitor lacinia. Quisque luctus justo vel enim vulputate aliquet. Proin tellus nisi, mattis vitae mi non, rhoncus varius mi. Quisque et auctor tortor. Vestibulum ante felis, feugiat quis efficitur facilisis, lacinia at tortor. Donec purus urna, pulvinar sed mi vel, scelerisque tristique nibh. Duis quis lacus urna. Morbi at suscipit purus. Pellentesque viverra vitae sapien at pellentesque. Ut efficitur condimentum mauris, id feugiat ligula posuere fermentum. Mauris at vulputate urna, id tempor neque. Nullam finibus ligula at arcu pellentesque congue. </p>
            </article>

            <article>
                <img src="imagenes/imagen_03.jpg> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mattis id erat at fermentum. Etiam mattis arcu quis consequat commodo. Ut et erat feugiat, tempus enim at, mollis sapien. Suspendisse porttitor bibendum orci, a finibus metus accumsan ut. Maecenas leo orci, pharetra scelerisque aliquet quis, auctor quis ex. Sed malesuada, turpis at auctor pretium, eros risus sollicitudin eros, id facilisis diam tortor et neque. Mauris sit amet felis neque. Integer sodales tristique lacus, eget cursus velit varius quis. Mauris eget lorem non tortor fermentum eleifend at ut lorem. In dolor est, lacinia a urna non, consectetur imperdiet metus. Vivamus interdum lectus id porttitor lacinia. Quisque luctus justo vel enim vulputate aliquet. Proin tellus nisi, mattis vitae mi non, rhoncus varius mi. Quisque et auctor tortor. Vestibulum ante felis, feugiat quis efficitur facilisis, lacinia at tortor. Donec purus urna, pulvinar sed mi vel, scelerisque tristique nibh. Duis quis lacus urna. Morbi at suscipit purus. Pellentesque viverra vitae sapien at pellentesque. Ut efficitur condimentum mauris, id feugiat ligula posuere fermentum. Mauris at vulputate urna, id tempor neque. Nullam finibus ligula at arcu pellentesque congue. </p>
            </article>        
        </section>
    </div>
        
    <footer>
        <p> &copy; 2014 </p>
    </footer>

</div>
</body>
        
</html>

La hoja de estilo, estilo.css es la que se muestra a continuación:

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    background-color:#9c9965;
}

        
h1{
    padding-top: 20px;
    text-align: center;
    font-size: 48px;
    color:#FFFFFF;
}

        
header p{
    padding-top: 10px;
    text-align:center;
    color:#FFFFFF;
}        
      
        
#wrapper {
    width: 960px;
    margin:0px auto;
}

    
header {
    width: 100%;
    height: 130px;
    background-color:#FFCC33;
}

    
#content {
    width: 960px;
    float: left;
    background-color:#E9E7C3;
}

        
article{ /* 320 x 3= 960 */
    float:left;
    margin:30px 5px 30px 5px;
    width:310px;
}   
        
    
footer {
    height: 50px;
    clear: both;
    background-color:#35324d;
}
        

footer p{
    padding-top: 10px;
    text-align:center;
    color:#FFFFFF;
    font-size: 14px;
}

Resultado Final con CSS:

<<< Centrar página horizontalmente

<<< Ver índice - Maquetar Sitios Web