Se hizo la introducción al proyecto de este periodo, en el que todo el grado 10-B será un equipo.
A continuación, el ejercicio dejado el fin de semana:
El objetivo era recrear lo más parecido posible la anterior imagen.
Este es el código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="estiloej2-03-05-2017.css">
<h1>Titulo</h1><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. <a class="crojo">Ut enim ad minim veniam,</a>
quis nostrud <a class="camarillo">exercitation ullamco laboris</a> nisi ut aliquip.
<br>
<h2>Subtitulo</h2>
Lorem ipsum dolor sit amet, <span class="hola">consectetur <span class="adios">adipisicing</span> elit, sed do eiusmod
tempor</span> incididunt ut labore et dolore <span class="morado">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.
<br><hr><br>
<table >
<caption>Titulo de la tabla</caption>
<tr>
<td></td>
<td class="uno">Titulo columna 1</td>
<td class="uno">Titulo columna 2</td>
</tr>
<tr>
<td class="uno">Titulo fila 1</td>
<td>Lorem ipsum dolor </td>
<td>Lorem <span>ipsum</span> dolor </td>
</tr>
<tr>
<td class="dos">Titulo fila 2</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor </td>
</tr>
<tr>
<td></td>
<td class="dos">Titulo columna 1</td>
<td class="dos">Titulo columna 2</td>
</tr>
</table>
<br><br>
<hr>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <span>exercitation ullamco laboris nisi ut aliquip.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore <span class="chao">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>
</body>
</html>
El siguiente es el CSS:
h1{color:#38DB47;
text-decoration: blink}
.crojo {color:#F00;
font-weight:700;
text-decoration: none}
.camarillo{color:#EACF20;}
h2{color:#14507A;}
span.hola{color:red;
text-decoration: underline;}
span.adios{color:blue;
font-style: italic; }
.morado{color:#D03FD5;}
span{color:purple;}
table, tr, td {border: 1px solid black;
border-collapse: collapse;
padding-bottom:7px;
padding-top:7px;
padding-left:7px;
padding-right:7px; }
caption{color:blue;}
td{color:#28B73E;
font-weight: 600}
td.uno{font-weight:700;
color:#EACF20;}
td.dos{font-weight: 700;
color:red;}
td div{font-weight: 600;
color:#EACF20;}
td span{font-style: italic;
color:#28B73E;}
div{color:#ACD53F;}
div span{color:#F413DD;}
span.chao{color:#5C951B;
text-decoration: underline; }
Publicar un comentario