Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: hymsoft en 17 de Agosto 2016, 22:11
-
Buenas buenas!!! dejo mi resolución al ajercicio CU01022D del tutorial de desarrollo web desde cero con CSS.
Siempre tratando de aplicar (lo mejor que puedo) lo aprendido hasta acá.
Atento a todos los comentarios :-)
Saludos!!!
CU01022D.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Versiones CSS - curso aprenderaprogramar.com</title>
<meta name="author" content="Hugo A. Segura" />
<meta name="description" content="Algo de historia y perspectiva sobre CSS" />
<meta name="keywords" content="curso, aprender a programaar, html, css, W3C, (CU01022D)" />
<meta charset="utf-8" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" type="text/css" href="CU01022D.css"/>
</head>
<body>
<h1 id="ejercicio">Resolución ejercicio número CU01022D</h1>
<h2 id="entrega">Entrega número 22</h2>
<div id="div_principal">
<table id="tabla_principal">
<!-- Encabezado -->
<tr class="resaltado">
<td rowspan="2">Propiedad CSS</td>
<td rowspan="2">Descripción</td>
<td rowspan="2">Version CSS</td>
<td rowspan="2">Estado Actual</td>
<td colspan="5">Browser Soportados</td>
</tr>
<tr class="resaltado">
<td><img src="http://i.imgur.com/ReS0w5d.png" alt="Chrome" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/W7b8ed1.png" alt="Internet Explorer" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/z0jQ3pj.png" alt="Firefox" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/07heIP4.png" alt="Safari" width="50px" height="50px"/></td>
<td><img src="http://i.imgur.com/OLJjSpQ.png" alt="Opera" width="50px" height="50px"/></td>
</tr>
<!-- Clip -->
<tr>
<td class="resaltado">Clip</td>
<td>La propiedad clip permite especificar un rectángulo para recortar un elemento con posición absoluta . El rectángulo se especifica con cuatro coordenadas desde la esquina superior izquierda del elemento a ser cortado.</td>
<td>CSS2</td>
<td>En uso</td>
<td>1.0</td><td>8.0</td><td>1.0</td><td>1.0</td><td>7.0</td>
</tr>
<!-- font-weight -->
<tr>
<td class="resaltado">font-weight</td>
<td>La propiedad font-weight establece cómo se deben mostrar los caracteres: finos o gruesos</td>
<td>CSS1</td>
<td>En uso</td>
<td>2.0</td><td>4.0</td><td>1.0</td><td>1.3</td><td>3.5</td>
</tr>
<!-- overflow -->
<tr>
<td class="resaltado">overflow</td>
<td>La propiedad overflow especifica qué hacer con los bordes superior e inferior del contenido, si este se desborda el área de contenedor del elemento.</td>
<td>CSS3</td>
<td>En uso</td>
<td>4.0</td><td>9.0</td><td>3.5</td><td>3.0</td><td>9.5</td>
</tr>
<!-- animation -->
<tr>
<td class="resaltado">animation</td>
<td>Mostrar una animación a un elemento div, usando las sub-propiedades:
<uo>
<li>animation-name</li>
<li>animation-duration</li>
<li>animation-timing-function</li>
<li>animation-delay</li>
<li>animation-iteration-count</li>
<li>animation-direction</li>
<li>animation-fill-mode</li>
<li>animation-play-state</li>
</uo>
</td>
<td>CSS3</td>
<td>En uso</td>
<td>43.0</td><td>10.0</td><td>16.0</td><td>9.0</td><td>30.0</td>
</tr>
</table>
</div>
<p>Todos los datos fueron extraidos de <a href="http://www.w3schools.com/cssref/" target="_blank"> w3schools</a>.<strong> NOTA:</strong> Si bien algunas de estas propiedades son reconocidas por navegadores de versiones anteriores a las citadas, las mismas, son las versiones donde esta confirmado su funcionamiento correcto.</p>
</body>
</html>
CU01022D.css
/* Curso CSS estilos aprenderaprogramar.com*/
#ejercicio {
text-align: center;
}
#entrega {
text-align: center;
}
table {
width: 100%;
border: 1px solid #000000;
}
td {
width: 25%;
text-align: justify;
vertical-align: top;
border: 1px solid #000000;
border-spacing: 0;
border-collapse: collapse;
padding: 0.5%;
}
.resaltado {
background-color: bisque;
}
-
Buenas Hugo el ejercicio muy bien, has hecho más de lo que se pedía ya que no solo has dado las respuestas sino que las has maquetado en una página web. Una cosa a pedirte, no escribas los nombres de los temas en mayúsculas. No uses VERSIONES CSS. ALGO DE HISTORIA (CU01022D) sino Versiones CSS. Algo de historia. En este hilo se explica el motivo - > https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
En el código tienes un pequeño error al poner <uo>...</uo> en lugar de <ul>...</ul>. Esto me generaba una pequeña distorsión y se veía mal en mi navegador, pero en cuanto he corregido eso ya se ve todo bien.
Salu2
-
Hola Ogramar, ouch, no suelo escribir nada en mayúsculas, a mi tampoco me gusta que me griten ;)
y lo del <uo> bueno... es una etiqueta que queria crear, pero todavia no funciona en los navegadores!!!!
Ya esta corregido. Gracias!!!!