WEB (EJEMPLO) HTML5 RESPONSIVE CON MENU HORIZONTAL.

<!DOCTYPE html>
<html lang="es">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <style>
        .container {
                width:996px;
                margin:0px auto;
                font-size:1em;
        }
        section,aside {
                padding: 10px;
                background:#ccc;
                -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radi$
        }


section {
                float: left;
                width: 70%;
        }
        aside {
                float: right;
                width: 25%;
        }
        nav {
                overflow: hidden;
        }
        nav ul {
                list-style-type:none;
                float:left;
                padding:0px;
        }
nav ul li {
                float:left;
                padding:3px 10px;
                margin:2px;
                background:#ccccff;
                -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
        }
        nav ul li a:hover
                {
                        color:red;
                }


        footer {
                margin:10px;
                text-align:center;
                clear:both;
        }

  /* para 980px o menos */
        @media screen and (max-width:980px) {
                .container {
                        width:98%;
                }
                section {
                        width:68%;
                }
        }
 /* para 700px o menos */
        @media screen and (max-width:700px) {
                aside,section {
                        float:none;
                        width:96%;
                }
                nav, section {
                        font-size:1.2em;
                }
                aside {
                        margin-top:5px;
                }
                nav ul {
                        float:none;
                        clear:both;
                }
        }

/* para 480px o menos */
        @media screen and (max-width:480px) {
                aside {
                        display:none;
                }
                nav, section {
                        font-size:1.5em;
                }
                section {
                        width:94%;
                }
                nav ul {
                        float:left;
                        clear:none;
                        width:50%;
                }
                nav ul li {
                        float:none;

                }
        }

</style>
</head>

<body>

<div class="container">
        <header>
                <h1>Ejemplo web responsive</h1>
        <header>

        <nav>
                <ul>
                        <li><a href="">menu 1</li>
                        <li><a href="">menu 2</li>
                        <li><a href="">menu 3</li>
                        <li><a href="">menu 4</li>
                </ul>
                <ul>
                        <li><a href="">menu 5</li>
                        <li><a href="">menu 6</li>
                        <li><a href="">menu 7</li>
                        <li><a href="">menu 8</li>
                </ul>
        </nav>

 <section>
                <p>
                        <b>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</b>
                        <br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móvile$
                </p>
                <p>
                        La expresión <b>@media</b> de css3, es fundamental. Nos permite estableces condiciones desde CSS para $
                        <br>Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/
                        <p>
                                Las propiedades que más nos interesan son las siguientes:
                                <ul>
                                        a) <b>width y height</b> Ancho y alto del navegador (podemos añadir el prefijo min- o $
                                        <br>b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos $
                                        <br>c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos$
                                </ul>
                        </p>

                        <p>

<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o inferior. En es$
                        </p>
                </p>
        </section>
        <aside>Aside</aside>
        <footer>
                <a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
        </footer>
</div>
</body>
</html>
*********************************************************


EL MISMO EJEMPLO DE PAGINA WEB RESPONSIVE PERO SENCILLO.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">

<style>
.container {
      width: 90%;
      margin:0px auto;
      font-size:1em;
}

section,aside {
     padding: 10px;
     background:#ccc;
     -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}
section {
    float: left;
    width: 70%;
}
aside {
    float: left;
    width: 20%;
}
espacio {
     margin-top : 5px;
     float: left;
     width: 2%;
}
nav {
overflow: hidden;
}
nav ul {
   list-style-type:none;
    float:left;
    padding:0px;
}
nav ul li {
    float:left; 
    padding:3px 10px;
    margin:2px;
    background:#ccccff; 
    -moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border- radius:5px;
}
nav ul li a:hover
{
    color:red;
}


footer {
    margin:10px;
    text-align:center;
    clear:both;
}

</style>

</head>
<body>
<div class="container">
<header>
<h1>Ejemplo web responsive</h1>
<header>
<nav>
   <ul>
          <li><a href="">menu 1</li>
          <li><a href="">menu 2</li>
          <li><a href="">menu 3</li>
          <li><a href="">menu 4</li>
  </ul>
   <ul>
          <li><a href="">menu 5</li>
          <li><a href="">menu 6</li>
          <li><a href="">menu 7</li>
          <li><a href="">menu 8</li>
   </ul>
</nav>
<section>
    <p>
    <b>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</b>
    <br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores              móvile$
    </p>

<p>
La expresión <b>@media</b> de css3, es fundamental. Nos permite estableces condiciones desde CSS para $
<br>Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/
<p>
Las propiedades que más nos interesan son las siguientes:
<ul>
a) <b>width y height</b> Ancho y alto del navegador (podemos añadir el prefijo min- o $
<br>b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos $
<br>c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos$
</ul>
</p>
<p>
<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o inferior. En es$
</p>
</p>
</section>

<espacio><p> </p></espacio>

<aside>Aside</aside>

<footer>
<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
</footer>
</div>
</body>

</html>

Comentarios