resolucion.html

  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  4. <title>Disposición de la página según la resolución de pantalla</title>
  5. <link href="resolucion.css" rel="stylesheet" type="text/css">
  6. <!--script src="/javascripts/prototype.js" type="text/javascript"></script-->
  7. <!--script src="resolucion.js" type="text/javascript"></script-->
  8. </head>
  9. <div id="global">
  10.  
  11. <div id="encabezado">
  12. <h1>Título del sitio web</h1>
  13. </div><!--#encabezado-->
  14.  
  15. <div id="navegacion">
  16. <ul>
  17. <li><a href="#">Primero</a></li>
  18. <li><a href="#">Segundo</a></li>
  19. <li><a href="#">Tercero</a></li>
  20. <li><a href="#">Cuarto</a></li>
  21. </ul>
  22. </div><!--#navegacion-->
  23.  
  24. <div id="cuerpo">
  25.  
  26. <div id="introduccion">
  27. <p>Cambia el tamaño del navegador web para poder apreciar los distintos diseños CSS en base al ancho de la ventana. Hay un total de cinco diseños para pantalla y uno para imprimir. Cada diseño tiene un color y una colocación de los elementos diferente.
  28. </p>
  29. </div><!--#introduccion-->
  30.  
  31. <div id="contenido">
  32. <h2>Nam facilisis ultricies eros nec molestie.</h2>
  33. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel felis diam, in euismod leo. Nam mattis erat ac nunc placerat sollicitudin. Ut ac felis quam. Sed molestie ornare neque, a adipiscing enim ultrices eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut et nibh vulputate felis ullamcorper rhoncus vel convallis mi. Ut sodales accumsan urna et aliquet. Fusce consectetur molestie pulvinar. Nulla lobortis cursus mauris nec sodales.
  34. </p>
  35. <p>Nulla quis massa sed nisi suscipit interdum. Nam sed vehicula felis. Donec sodales lorem ac mi porta dictum. Nunc urna augue, congue quis fringilla non, imperdiet at augue. Etiam vel lacinia quam. Proin lacus libero, fringilla eu molestie accumsan, imperdiet sit amet velit. Nullam tincidunt, ligula nec consectetur porta, risus quam rutrum leo, ut luctus metus sapien vel arcu. Aliquam suscipit, justo sed condimentum vehicula, lorem tortor fermentum diam, ac convallis libero enim eu lorem. Etiam varius sollicitudin nisl, rhoncus consequat purus sagittis id. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam interdum convallis adipiscing.
  36. </p>
  37. </div><!--#contenido-->
  38.  
  39. </div><!--#cuerpo-->
  40.  
  41. <div id="extra">
  42. <h3>Alfa</h3>
  43. <p>Aenean in lorem risus. Fusce varius mollis vehicula. Nam vitae est tellus.
  44. </p>
  45. <h3>Beta</h3>
  46. <p>Nam elementum, magna nec imperdiet cursus, ipsum nisi conProin ac mi sem.
  47. </p>
  48. <h3>Gamma</h3>
  49. <p>Phasellus lacinia purus magna, sed mollis ipsum. Donec eget mi magna, in condimentum turpis.
  50. </p>
  51. </div><!--#extra-->
  52.  
  53. <div id="pie">ProInf.net &copy;2012
  54. </div><!--#pie-->
  55.  
  56. </div><!--#global-->
  57.  
  58. </body>
  59. </html>
  60.  

Proinf.net