Unidad 3
Actividad 6 P38
<html>
<head>
<title>Actividad 6</title>
<style type="text/css">
h1 {
text-align: center;
border-color: black;
border: 4px solid;
margin: 10px;
padding: 10px;
}
h2 {
text-align: center;
color: white;
border: 3px solid;
border-color: pink;
margin: 10px;
padding: 10px;
}
p {
text-align: center;
border: 1px solid;
margin: 0 40%;
}
html {
background-image: url('U3_A06_fondo(1).jpeg');
Background-repeat:repeat;
background-position:bottom;
background-attachment:fixed;
}
</style>
</head>
<body>
<h1>EJEMPLO DE CSS</h1>
<h2>Propiedades Background</h2>
<p>Background-image: url("fondo.jpg");<br>Background-repeat:repeat;<br>background-position:bottom;<br>background-attachment:fixed;</p>
</body>
</html>Actividad 9 P53
<html>
<head>
<title>Actividad 9</title>
<style>
#uno{
z-index: 1;
position: absolute;
top: 40px;
left: 20px;
background-image: url("uno.jpg");
}
#dos{
z-index: 4;
position: absolute;
top: 60px;
left: 40px;
background-image: url("dos.jpg");
}
#tres{
z-index: 2;
position: absolute;
top: 80px;
left: 60px;
background-image: url("tres.jpg");
}
#cuatro{
z-index: 3;
position: absolute;
top: 100px;
left: 80px;
background-image: url("cuatro.jpg");
}
div {
width: 80px;
height: 110px;
}
</style>
</head>
<body>
<h2>Elige una carta</h2>
<div id="uno"></div>
<div id="dos"></div>
<div id="tres"></div>
<div id="cuatro"></div>
</body>
</html>Actividad 10 P58
#titulo{
color: #595d64;
}
#p1 strong{
color: blue;
}
#p1 .destacado {
color: pink;
}
#subtitulo {
color: red;
}
ul li a em{
color: lightblue;
}
ul li a {
color: green;
}
ul li .especial{
color: red;
}
caption{
color: blue;
}
thead th.especial{
color: #77fff6;
}
tfoot th:not(.especial){
color: #137e77;
}
tbody th.especial{
color: #77fff6;
}
tbody th:not(.especial){
color: #137e77;
}
tbody tr td strong{
color: darkgreen;
}
tbody tr td {
color: lightgreen;
}
#adicional{
color: darkblue;
}
#adicional #especial {
color: pink;
}
#adicional a{
color: orange;
}Actividad 12 P63
<html>
<head>
<title>NavBar</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.navbar{
display: flex;
padding: 10px;
gap: 10px;
justify-content: center;
}
.nav-item{
color: black;
font-weight: bold;
text-decoration: none;
background-color: #bbd484;
padding: 10px 10px;
border-top-right-radius: 15px;
font-size: 18px;
transition: all 0.3s ease;
}
.nav-item:hover{
background-color: #86B044;
color: white;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="" class="nav-item">Programación</a>
<a href="" class="nav-item">BBDD</a>
<a href="" class="nav-item">SSII</a>
<a href="" class="nav-item">Marcas</a>
<a href="" class="nav-item">Entornos</a>
<a href="" class="nav-item">FOL</a>
</nav>
</body>
</html>Actividad 13 P64
<html>
<head>
<title>Actividad 13</title>
<style type="text/css">
*{
font-family:Arial, Helvetica, sans-serif;
}
table{
width: 20%;
margin: 20px auto;
}
th, td{
text-align: center;
border: 2px solid blue;
}
thead{
background-color: blue;
color: white;
font-weight: normal;
}
tbody{
border-color: #091267;
font-weight: bold;
}
tbody td.especial{
background-color: #c3c7ed;
}
</style>
</head>
<body>
<table cellpadding="10px">
<thead>
<tr>
<th>Concepto</th>
<th>Cantidad</th>
<th>Precio Ud.</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pantalon</td>
<td>3</td>
<td>30,99</td>
</tr>
<tr>
<td class="especial">Camisa</td>
<td class="especial">2</td>
<td class="especial">45</td>
</tr>
<tr>
<td>Vestido</td>
<td>1</td>
<td>120</td>
</tr>
<tr>
<td class="especial">Bolso</td>
<td class="especial">2</td>
<td class="especial">18,80</td>
</tr>
</tbody>
</table>
</body>
</html>Actividad 14
Última actualización
¿Te fue útil?