Unidad 14. Ejercicio: Diseño líquido



En este ejercicio practicaremos con el diseño líquido. Para realizar este ejercicio utilizaremos el archivo principal_ini.htm que puedes descargarte de la carpeta ejercicios/unidad-14/cursos-aulaclic/principal_ini.htm y guardarlo en la carpeta de ejercicios/cursos-aulaclic (o copiar el código que se muestra a continuación). También debes descargarte el archivo de la hoja de estilo principal_ini.css ejercicios/unidad-14/cursos-aulaclic/css/principal_ini.css y guardarlo en la carpeta de ejercicios/cursos-aulaclic/css (o copiar el código que se muestra a continuación).

Ejercicio 1: Diseño líquido.

  1. Partiendo de este diseño preliminar sin apenas estructura, que puedes ver aquí: principal_ini.htm, vamos a llegar a un diseño líquido que se adapta a diferentes anchos de pantalla.
    Ej. propuesto 14 inicial
  2. Desde el editor Brackets abre el archivo principal_ini.htm.
  3. Debes ver el siguiente código: 

    <!doctype html>
    
    <html>
    
    <head>
    
    <title>aulaClic.</title>
    
  <link href="css/principal_ini.css" rel="stylesheet" type="text/css" title="aulaClic" />
    
  <meta charset="utf-8" />
    
    </head>
    
  <body>
    
    <!-- cabecera --------------- --> 
    
    <img src="graficos/logoAulaclic.jpg" alt="aulaclic" >
    
    <span class="sin-sub-azul">La primera web en espa&ntilde;ol sobre</span><br>
    
    <span class="rojo_grande"> Cursos de inform&aacute;tica gratuitos online</span><br>
    
    <span class="sin-sub-verde"><a href="https://www.aulaclic.es/portada/primera_visita.htm" >&iquest;Primera visita?</a></span> 
    
    <!-- título cursos --------------- --> 
    
    <p>Cursos de aulaClic</p>
    
    <!-- cabecera contenido --------------- --> 
    
    <span class="sin-sub-azu"><a href="https://www.aulaclic.es/portada/cursos_pago.htm" title="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 8 GB. reutilizable" class="sin-sub-azu">8 cursos + 600<br> programas en USB</a><br></span><a href="portada/cursos_pago.htm"><img src="graficos/usb_16gb.png" alt="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 16 GB. reutilizable" ></a>
    
    <span class="rojo_grande">&iexcl;&iexcl; Acceso gratis a los cursos on-line  !!</span><br>
    
    <span class="sin-sub-azul">Aprender es m&aacute;s f&aacute;cil que nunca. Videotutoriales.<br>
    
    Desde 1999, la ense&ntilde;anza de calidad al alcance de todos.</span>
    
  <strong>&middot;</strong> <a HREF="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html" class="sin-sub-azul1" >Descargas</a> <br>
    
  <a href="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html"><img src="graficos/carrito.png"  alt="Descargas" ></a>
    
  <!-- cursos contenido --------------- --> 
    
  &middot; <a href="https://www.aulaclic.es/access-2016/index.htm" >Access 2016 </a>
    
  &middot; <a href="https://www.aulaclic.es/access-2013/index.htm" >Access 2013 </a> 
    
  &middot; <a href="https://www.aulaclic.es/coreldraw-x7/index.htm"  >CorelDraw X7</a> 
    
  &middot; <a href="https://www.aulaclic.es/dreamweaver-cc/index.htm"  >Dreamweaver CC </a>
    
  &middot; <a href="https://www.aulaclic.es/excel-2013/index.htm"  >Excel 2013 </a>
    
  &middot; <a href="https://www.aulaclic.es/excel-2016/index.htm"  >Excel 2016 </a>
    
  &middot; <a href="https://www.aulaclic.es/flash-cs5/index.htm"  >Flash CS5 </a>
    
  &middot; <a href="https://www.aulaclic.es/fotografia-photoshop/index.htm"  >Fotograf&iacute;a-Photoshop </a>
    
  &middot; <a href="https://www.aulaclic.es/frontpage2003/index.htm"  >FrontPage 2003</a>
    
  &middot; <a href="https://www.aulaclic.es/googledrive/index.htm"  >Google Drive </a>
    
  &middot; <a href="https://www.aulaclic.es/html/index.htm"  > HTML </a>
    
  &middot; <a href="https://www.aulaclic.es/illustrator-cc/index.htm"  > Illustrator CC </a>
    
  &middot; <a href="https://www.aulaclic.es/internet/index.htm"  > Internet </a>
    
  &middot; <a href="https://www.aulaclic.es/openoffice/index.htm"  >OpenOffice 1.1</a>
    
  &middot; <a href="https://www.aulaclic.es/outlook2007/index.htm"  >Outlook 2007</a>
    
  &middot; <a href="https://www.aulaclic.es/paginas-web/index.htm"  >P&aacute;ginas Web</a>
    
  &middot; <a href="https://www.aulaclic.es/photoshop-cc/index.htm"  >Photoshop CC</a>
    
  &middot; <a href="https://www.aulaclic.es/powerpoint-2016/index.htm"  >PowerPoint 2016 </a>
    
  &middot; <a href="https://www.aulaclic.es/powerpoint-2013/index.htm"  >PowerPoint 2013 </a>
    
  &middot; <a href="https://www.aulaclic.es/sqlserver/index.htm"  > SQL Server </a>
    
  &middot; <a href="https://www.aulaclic.es/windows7/index.htm"  >Windows 7</a>
    
  &middot; <a href="https://www.aulaclic.es/windows-10/index.htm"  >Windows 10</a>
    
  &middot; <a href="https://www.aulaclic.es/word-2013/index.htm"  >Word 2013 </a>
    
  &middot; <a href="https://www.aulaclic.es/word-2016/index.htm"  >Word 2016 </a>
    
  </body>
    
  </html>
  4. Y la hoja de estilo principal_ini.css es esta: 
    body {
    	background-color: #FFFAF4;
    }
    a {
    	text-decoration: none;
    }
    .rojo_grande {
    	font-size: 1.1em;
    	color: #C60000;
    	font-weight: bold;
    	font-family: Arial, Helvetica, sans-serif;
    }
    .sin-sub-azul {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #000080;
    	font-weight: normal;
    }
    .sin-sub-verde a {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 0.8em;
    	color: #045111;
    	font-weight: normal;
    }

  5. Como decíamos al principio, el ejercicio consiste en crear una página web con el siguiente aspecto visual que se ajusta automáticamente a diferentes anchos de pantalla. En las siguientes tres imágenes vemos el resultado para tres anchos de pantalla, observa como el diseño cambia a cuatro columnas, dos columnas y una columna en la zona de la lista de cursos. También puedes verla aquí: principal_final.html
    En una pantalla grande se vería así:
    Ej. propuesto 14 final

    En una pantalla mediana se vería así:
    Ej. propuesto 14 final 2

    En una pantalla pequeña se vería así:
    Ej. propuesto 14 final 3

  6. Para crear el diseño que acabamos de ver, para mantener una copia del primer diseño, lo primero que vamos a hacer es guardar el archivo principal_ini.htm como principal_final.html, y el archivo principal_ini.css, como principal_final.css, y vamos a modificar estos nuevos archivos. Recuerda cambiar el enlace a la hoja de estilo <link href="css/principal_final.css" rel="stylesheet" type="text/css" title="aulaClic" />
  7. A continuación vamos a agrupar los tres elementos de la cabecera en un contenedor con posicionamiento flexible llamado cont_cabecera, display: flex;, con salto de línea cuando no quepa el contenido: flex-wrap: wrap; y justificado: justify-content: space-around;
  8. Los dos elementos de la cabecera los colocamos en dos contenedores llamados curso_cabecera_elem con text-align: center;
  9. El título Cursos de aulaClic lo colocamos dentro del contendor cont_curso_tit al que damos varios formatos de texto y alineación centrada: font-family: Arial, Helvetica, sans-serif; color: #996600; font-size: 1em; font-weight: bold; text-align: center;
  10. A los tres elementos que siguen ("8 cursos + 600 ...", "Acceso gratis ..." y "Descargas") los colocamos dentro del contenedor cont_curso_medio con posicionamiento flexible display: flex; con salto de línea cuando no quepa el contenido: flex-wrap: wrap; y justificado: justify-content: space-around;. Cada uno de estos tres elementos los colocamos dentro del contenedor curso_medio_elem al que de momento sólo le centramos el texto text-align: center;, pero que más adelante le añadiremos otras propiedades.
  11. A los cursos que forman el contendido los agrupamos dentro del contenedor cont_curso con posicionamiento flexible display: flex; con salto de línea cuando no quepa el contenido: flex-wrap: wrap; y justificado: justify-content: space-around; Cada uno de los cursos lo colocamos dentro de un contenedor curso_elem para poder darles la misma anchura width: 13em;, esto es importante para que se coloquen en columnas. Si puebas a quitar esta propiedad verás a lo que me refiero.
  12. Con todo esto tenemos el siguiente código html principal_final.html
    <!-- cabecera --------------- --> 
    
	  <div class="cont_cabecera">
    
<div class="curso_cabecera_elem">
    
<img src="graficos/logoAulaclic.jpg" alt="aulaclic" >
    
</div>
    
<div class="curso_cabecera_elem">
    
<span class="sin-sub-azul">La primera web en espa&ntilde;ol sobre</span><br>
    
<span class="rojo_grande"> Cursos de inform&aacute;tica gratuitos online</span><br>
    
<span class="sin-sub-verde"><a href="https://www.aulaclic.es/portada/primera_visita.htm" >&iquest;Primera visita?</a></span> 
    
</div> 
    

    
</div>
    
<!-- título cursos --------------- --> 
    
<div class="cont_curso_tit">
    
<p>Cursos de aulaClic</p>
    
</div>
    
<!-- cabecera contenido --------------- --> 
    
<div class="cont_curso_medio">
    
<div class="curso_medio_elem">
    
<span class="sin-sub-azu"><a href="https://www.aulaclic.es/portada/cursos_pago.htm" title="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 8 GB. reutilizable" class="sin-sub-azu">8 cursos + 600<br> programas en USB</a><br></span><a href="portada/cursos_pago.htm"><img src="graficos/usb_16gb.png" alt="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 16 GB. reutilizable" ></a>
    
</div>
    
<div class="curso_medio_elem">
    
<span class="rojo_grande">&iexcl;&iexcl; Acceso gratis a los cursos on-line  !!</span><br>
    
<span class="sin-sub-azul">Aprender es m&aacute;s f&aacute;cil que nunca. Videotutoriales.<br>
    
Desde 1999, la ense&ntilde;anza de calidad al alcance de todos.</span>
    
</div> 
    
<div class="curso_medio_elem">
    
<strong>&middot;</strong> <a HREF="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html" class="sin-sub-azul1" >Descargas</a> <br>
    
<a href="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html"><img src="graficos/carrito.png"  alt="Descargas" ></a>
    
</div> 
    
</div>
    
<!-- cursos contenido --------------- --> 
    
<div class="cont_curso">
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2016/index.htm" >Access 2016 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2013/index.htm" >Access 2013 </a></div> 
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/coreldraw-x7/index.htm"  >CorelDraw X7</a></div> 
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/dreamweaver-cc/index.htm"  >Dreamweaver CC </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2013/index.htm"  >Excel 2013 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2016/index.htm"  >Excel 2016 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/flash-cs5/index.htm"  >Flash CS5 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/fotografia-photoshop/index.htm"  >Fotograf&iacute;a-Photoshop </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/frontpage2003/index.htm"  >FrontPage 2003</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/googledrive/index.htm"  >Google Drive </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/html/index.htm"  > HTML </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/illustrator-cc/index.htm"  > Illustrator CC </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/internet/index.htm"  > Internet </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/openoffice/index.htm"  >OpenOffice 1.1</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/outlook2007/index.htm"  >Outlook 2007</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/paginas-web/index.htm"  >P&aacute;ginas Web</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/photoshop-cc/index.htm"  >Photoshop CC</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2016/index.htm"  >PowerPoint 2016 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2013/index.htm"  >PowerPoint 2013 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/sqlserver/index.htm"  > SQL Server </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows7/index.htm"  >Windows 7</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows-10/index.htm"  >Windows 10</a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2013/index.htm"  >Word 2013 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2016/index.htm"  >Word 2016 </a></div>
    
<div class="curso_elem"><span class="curso_elem_disco"></span> <a href="#"  ></a></div>
    
</div>
  13. Y la siguiente hoja de estilo principal_final.css
    body {
    
background-color: #FFFAF4;
    
}
    
a {
    
text-decoration: none;
    
}
    
.rojo_grande {
    
font-size: 1.1em;
    
color: #C60000;
    
font-weight: bold;
    
font-family: Arial, Helvetica, sans-serif;
    
}
    
.sin-sub-azul {
    
font-family: Arial, Helvetica, sans-serif;
    
font-size: 0.8em;
    
color: #000080;
    
font-weight: normal;
    
}
    
.sin-sub-verde a {
    
font-family: Arial, Helvetica, sans-serif;
    
font-size: 0.8em;
    
color: #045111;
    
font-weight: normal;
    
}
    
.cont_cabecera {
    
display: flex;
    
flex-wrap: wrap;
    
justify-content: space-around;
    
}
    
.curso_cabecera_elem {
    
text-align: center;
    
}
    
.cont_curso_tit  p {
    
font-family: Arial, Helvetica, sans-serif;
    
color: #996600;
    
font-size: 1em;
    
font-weight: bold;
    
text-align: center;
    
}
    
.cont_curso_medio {
    
display: flex;
    
flex-wrap: wrap;
    
justify-content: space-around;
    

    
}
    
.curso_medio_elem {
    
text-align: center;
    

    
}
    
.cont_curso {
    
display: flex;
    
flex-wrap: wrap;
    
justify-content: space-between;
    
}
    
.curso_elem {
    
width: 13em;
    
		}
  14. Ahora la página se ve así:
  15. intermedia
  16. Si modificas el ancho de la ventana de tu navegador verás como el contenido se va ajustando perfectamente, esto lo hemos conseguido con tan solo el posicionamiento flexible display: flex; con salto de línea cuando no cabe el contenido: flex-wrap: wrap; y el justificado: justify-content: space-around; con un ancho fijo para el caso del listado de cursos.
  17. Este era el objetivo fundamental de este ejercicio, ahora vamos a añadir algunos elementos decorativos como bordes y colores de fondo para obtener el resultado final que puedes ver aquí: principal_final.html
  18. Este es el código HTML del body:
    <body>
    
	 <!-- cabecera --------------- --> 
    
  <div class="cont_cabecera">
    
  <div class="curso_cabecera_elem_1">
    
  <img src="graficos/logoAulaclic.jpg" alt="aulaclic" >
    
  </div>
    
  <div class="curso_cabecera_elem_2">
    
  <span class="sin-sub-azul">La primera web en espa&ntilde;ol sobre</span><br>
    
  <span class="rojo_grande"> Cursos de inform&aacute;tica gratuitos online</span><br>
    
  <span class="sin-sub-verde"><a href="https://www.aulaclic.es/portada/primera_visita.htm" >&iquest;Primera visita?</a></span> 
    
  </div> 
    
  
    
  </div>
    
  <!-- título cursos --------------- --> 
    
  <div class="cont_curso_tit">
    
  <p>Cursos de aulaClic</p>
    
  </div> 
    
  <!-- cabecera contenido --------------- --> 
    
  <div class="cont_curso_medio">
    
  <div class="curso_medio_elem">
    
  <span class="sin-sub-azu"><a href="https://www.aulaclic.es/portada/cursos_pago.htm" title="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 8 GB. reutilizable" class="sin-sub-azu">8 cursos + 600<br> programas en USB</a><br></span><a href="portada/cursos_pago.htm"><img src="graficos/usb_16gb.png" alt="8 cursos de aulaClic m&aacute;s 600 programas  grauitos en una memoria USB de 16 GB. reutilizable" ></a>
    
  </div>
    
  <div class="curso_medio_elem">
    
  <span class="rojo_grande">&iexcl;&iexcl; Acceso gratis a los cursos on-line  !!</span><br>
    
  <span class="sin-sub-azul">Aprender es m&aacute;s f&aacute;cil que nunca. Videotutoriales.<br>
    
	  Desde 1999, la ense&ntilde;anza de calidad al alcance de todos.</span>
    
  </div> 
    
  <div class="curso_medio_elem">
    
  <strong>&middot;</strong> <a HREF="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html" class="sin-sub-azul1" >Descargas</a> <br>
    
  <a href="https://www.aulaclic.org/tienda/entrada_tienda_ssl.html"><img src="graficos/carrito.png"  alt="Descargas" ></a>
    
  </div> 
    
  </div>
    
  <!-- cursos contenido --------------- --> 
    
  <div class="cont_curso">
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2016/index.htm" >Access 2016 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/access-2013/index.htm" >Access 2013 </a></div> 
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/coreldraw-x7/index.htm"  >CorelDraw X7</a></div> 
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/dreamweaver-cc/index.htm"  >Dreamweaver CC </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2013/index.htm"  >Excel 2013 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/excel-2016/index.htm"  >Excel 2016 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/flash-cs5/index.htm"  >Flash CS5 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/fotografia-photoshop/index.htm"  >Fotograf&iacute;a-Photoshop </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/frontpage2003/index.htm"  >FrontPage 2003</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/googledrive/index.htm"  >Google Drive </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/html/index.htm"  > HTML </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/illustrator-cc/index.htm"  > Illustrator CC </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/internet/index.htm"  > Internet </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/openoffice/index.htm"  >OpenOffice 1.1</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/outlook2007/index.htm"  >Outlook 2007</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/paginas-web/index.htm"  >P&aacute;ginas Web</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/photoshop-cc/index.htm"  >Photoshop CC</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2016/index.htm"  >PowerPoint 2016 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/powerpoint-2013/index.htm"  >PowerPoint 2013 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/sqlserver/index.htm"  > SQL Server </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows7/index.htm"  >Windows 7</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/windows-10/index.htm"  >Windows 10</a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2013/index.htm"  >Word 2013 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco">&middot;</span> <a href="https://www.aulaclic.es/word-2016/index.htm"  >Word 2016 </a></div>
    
  <div class="curso_elem"><span class="curso_elem_disco"></span> <a href="#"  ></a></div>
    
  </div> 
    
	  </body>
  19. Y este el código de la hoja de estilo principal_final.css: 
     body {
    
	  background-color: #FFFAF4;
    
	  }
    
	  a {
    
	  text-decoration: none;
    
	  }
    
	.cont_cabecera {
    
	  display: flex;
    
	  flex-wrap: wrap;
    
	  justify-content: space-around;
    
	  border-left: 2px solid #DCBEA8;
    
	  border-right: 2px solid #DCBEA8;
    
	  border-top: 2px solid #DCBEA8;
    
	  border-bottom: 2px solid #DCBEA8;
    
	  margin-left: 1em;
    
	  margin-right: 1em;
    
	  margin-bottom: 9px;
    
	  margin-top: 4px;
    
	  background-color: #f9f5f0;
    
	  padding-top: 0.5em;
    
  
    
	  }
    
	  .curso_cabecera_elem_1 {
    
	  text-align: center;
    
	  padding-left: 1em;
    
	  margin-top: 0.5em;
    
	  margin-bottom: 0.5em;
    
	  flex-grow: 0;
    
	  }
    
	  .curso_cabecera_elem_2 {
    
	  text-align: center;
    
	  padding-left: 1em;
    
	  margin-top: 0.5em;
    
	  margin-bottom: 0.5em;
    
	  flex-grow: 1;
    
	  }
    
	.cont_curso {
    
	  display: flex;
    
	  flex-wrap: wrap;
    
	  justify-content: space-between;
    
	  border-radius: 0px 0px 14px 14px ;
    
	  margin-left: 1em;
    
	  margin-right: 1em;
    
	  background-color: #f9f5f0;
    
	  padding-top: 0.5em;
    
	  border-left: 2px solid #DCBEA8;
    
	  border-right: 2px solid #DCBEA8;
    
	  border-bottom: 2px solid #DCBEA8;
    
  
    
	  }
    
	  .curso_elem {
    
	  width: 13em;
    
	  padding-left: 1em;
    
	  margin-top: 0.5em;
    
	  margin-bottom: 0.5em;
    
	  }
    
	  .curso_elem a {
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  color: #800000;
    
	  text-decoration: none;
    
	  font-size: 0.9em;
    
	  font-weight: bold;
    
	  }
    
	  .curso_elem_disco {
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  color: black;
    
	  font-size: 1em;
    
	  font-weight: bold; 
    
  
    
	  }
    
	  .cont_curso_tit {
    
	  border-style: solid;
    
	  border-width: 2px;
    
	  border-color: #DCBEA8;
    
	  border-radius: 14px 14px 0px 0px;
    
	  margin-left: 1em;
    
	  margin-right: 1em;
    
	  margin-bottom: 0px;
    
	  background: linear-gradient(#FFFFFF, #F6F1EA);
    
	  }
    
	  .cont_curso_tit  p {
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  color: #996600;
    
	  font-size: 1em;
    
	  font-weight: bold;
    
	  text-align: center;
    
  
    
	  }
    
	  .cont_curso_medio {
    
	  display: flex;
    
	  flex-wrap: wrap;
    
	  justify-content: space-around;
    
	  border-left: 2px solid #DCBEA8;
    
	  border-right: 2px solid #DCBEA8; 
    
	  margin-left: 1em;
    
	  margin-right: 1em;
    
	  margin-bottom: -4px;
    
	  margin-top: 1px;
    
	  background-color: #f9f5f0;
    
	  padding-top: 0.5em;
    
  
    
	  }
    
	  .curso_medio_elem {
    
	  text-align: center;
    
	  padding-left: 1em;
    
	  margin-top: 0.5em;
    
	  margin-bottom: 0.5em;
    
	  }
    
	  .rojo_grande {
    
	  font-size: 1.1em;
    
	  color: #C60000;
    
	  font-weight: bold;
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  }
    
	  .sin-sub-azul {
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  font-size: 0.8em;
    
	  color: #000080;
    
	  font-weight: normal;
    
	  }
    
	  .sin-sub-verde a {
    
	  font-family: Arial, Helvetica, sans-serif;
    
	  font-size: 0.8em;
    
	  color: #045111;
    
	  font-weight: normal;
    
		}
  20. Visualiza la página web desde el editor Brackets con el botón . También puedes verla desde este enlace: principal_final.html
  21. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

Enero-2019 (V 2.2)
Volver





Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.