Tema: Maquetar esto de HTML a CSS
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 23/08/2017, 08:38
Avatar de emilio_viguri
emilio_viguri
 
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 116
Antigüedad: 12 años, 10 meses
Puntos: 3
Respuesta: Maquetar esto de HTML a CSS
Bueno si alguien le sirve lo comparto despues de mucho lo logre y aqui lo tengo

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="MobileOptimized" content="width" /> 
  6. <meta name="HandheldFriendly" content="true" /> 
  7. <meta name="viewport" content="width=device-width, initial-scale=1"> 
  8. <title>Documento sin título</title>
  9. <link href="archivos/estilo/cuerpo.css" rel="stylesheet" type="text/css">
  10. <link href="archivos/estilo/index.css" rel="stylesheet" type="text/css">
  11. </head>
  12.  
  13. <body>
  14. <div class="header">
  15.     <div class="encabezado">
  16.     <div class="logotipo"><img src="archivos/imagenes/xlogonexcen.png" width="45" /></div>
  17.     <div class="nav">
  18.     <ul>
  19.         <li><a href="#" class="aqui">Inicio</a></li>
  20.         <li><a href="#">Servicio</a></li>
  21.         <li><a href="#">Saber mas</a></li>
  22.         <li><a href="#">Contactanos</a></li>
  23.         <li>
  24.         <form>
  25.             <input name="search" type="text" class="buscar" placeholder=" B u s c a r. . .">
  26.         </form></li>
  27.     </ul>
  28.     </div>
  29. </div>
  30. </div>
  31.  
  32. <section style="clear:both;">
  33. <div class="todo">
  34.         <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  35.         <div>PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  36. </div>
  37. <div class="mitad">
  38.     <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  39.     <div style="overflow:auto; height:130px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  40. </div>
  41. <div class="mitad">
  42.     <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  43.     <div style="overflow:auto; height:130px; ">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  44. </div>
  45.  
  46. <div class="cuarto">
  47.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  48.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  49. </div>
  50. <div class="cuarto">
  51.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  52.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  53. </div>
  54. <div class="cuarto">
  55.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  56.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  57. </div>
  58. <div class="cuarto">
  59.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  60.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  61. </div>
  62.  
  63.  
  64. <div class="cuarto">
  65.     <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  66.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  67. </div>
  68. <div class="cuarto">
  69.     <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  70.     <div style="overflow:auto; height:100px;">contenido corto sdf sdf </div>
  71. </div>
  72.  
  73.  
  74. </section>
  75.  
  76. <footer>
  77.     <div class="footer">footer</div>
  78. </footer>
  79.  
  80. </body>
  81. </html>
Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{
  4.     margin:0px;
  5.     padding:0px;
  6. }
  7. body{
  8.     background-color: #CCCCCC;
  9. }
  10. .header{
  11.     width:100%;
  12.     height:50px;    
  13.     background:#333333;
  14. }
  15. .encabezado{
  16.     margin:auto;
  17.     width:90%;
  18.     max-width:900px;
  19.     position:relative;
  20. }
  21. .logotipo{
  22.     position: absolute;
  23.     width: 50px;
  24.     height: 50px;
  25.     top: 0px;
  26.     left: 0px;
  27.     padding:1px;
  28. }
  29. .nav{
  30.     position: absolute;
  31.     left: 70px;
  32.     height: 50px;
  33.     width: auto;
  34.     top: 0px;
  35. }
  36. .nav ul{
  37.     list-style:none;
  38. }
  39. .nav ul li{
  40.     float:left;
  41.     background:#333333;
  42. }
  43. .nav ul li a{
  44.     padding: 15px; 10px;
  45.     display: block;
  46.     color: #FFF;
  47.     text-decoration: none;
  48.     border-radius:10px 0px 10px 0px;
  49. }
  50. .nav ul li a:hover{
  51.     color: #2d2d2d;
  52.     background-color: #D8D8D8;
  53. }
  54. .nav ul li a:active{
  55.     color: #2d2d2d;
  56.     background-color: #C1C1C1;
  57. }
  58. .nav ul li .aqui{
  59.     color: #2d2d2d;
  60.     background-color: #CCCCCC;
  61.     border-radius:0px 10px 0px 0px;
  62. }
  63. section{
  64.     margin: auto;
  65.     width: 90%;
  66.     max-width: 900px;
  67. }
  68. footer{
  69.     background-color: #BBBBBB;
  70.     height:auto;
  71.     min-height:100px;
  72. }
  73. .footer{
  74.     margin: auto;
  75.     width: 90%;
  76.     max-width: 900px;   
  77. }
  78. .buscar{
  79.     margin:10px;
  80.     width: 60px;
  81.     box-sizing: border-box;
  82.     border-radius: 3px;
  83.     font-size: 11px;
  84.     background-color: white;
  85.     background-image: url(buscar.png);
  86.     background-position: 1px 1px; 
  87.     background-repeat: no-repeat;
  88.     background-size:contain;
  89.     padding: 6px 10px 6px 30px;
  90.     -webkit-transition: width 0.4s ease-in-out;
  91.     transition: width 0.4s ease-in-out;
  92. }
  93. .buscar:focus {
  94.     width: 200px;
  95.     border: 2px solid #09C;
  96.     box-shadow: 0 0 10px #069;
  97.     background-color: white;
  98.     background-image: url(buscar.png);
  99.     background-position: 1px 1px;
  100.     background-repeat: no-repeat;
  101.     background-size: contain;
  102. }
  103. @charset "utf-8";
  104. /* CSS Document */
  105. .todo{
  106.     display: inline-block;
  107.     width: 98%;
  108.     height: 150px;
  109.     background: #FFF;
  110.     border-radius: 10px;
  111.     padding: 2px;
  112.     margin: 2px;
  113.     min-width:200px;
  114. }
  115. .todo .todohover:hover{
  116.     display: inline-block;
  117.     width: 98%;
  118.     height: 150px;
  119.     min-width: 200px;
  120.     background-color: #CCC;
  121. }
  122. .mitad{
  123.     display: inline-block;
  124.     width: 48.5%;
  125.     height: 150px;
  126.     background: #FFF;
  127.     border-radius: 10px;
  128.     padding: 2px;
  129.     margin: 2px;
  130.     min-width:100px;
  131. }
  132. .cuarto{
  133.     display: inline-block;
  134.     width: 23.9%;
  135.     height: 150px;
  136.     background: #FFF;
  137.     border-radius: 10px;
  138.     padding: 2px;
  139.     margin: .5px;
  140. }
  141. section .cuatro:hover{
  142.     box-shadow: 10px 10px 5px #888888;
  143. }
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.