-Empezamos el curso 6, copiamos todo del curso 5, eliminando index, y platilla 2. Y nombrando plantilla como index.
-Vamos hacer otra versión de la plantilla, que los cambios serian estos:
-Cabecera: Fija para ello usaremos position: fixed
-Menú y contenido: Le ponemos top 100px arriba y top 100px abajo.
Y comenzaremos todo ello en el CSS #estilo.css
Aquí mostramos sus estilos CSS
.cabecera{
position:fixed;
background-color: #8b4732;
width: 100%;
height: 100px;
text-align: center;
}
.menu{
position: absolute;
top:100px ;
width: 25%;
bottom: 100px;
background-color: aliceblue;
}
.contenido{
position: absolute;
overflow: auto;
left: 25%;
top: 100px;
width: 75%;
bottom: 100px;
background-color: rgb(0, 136, 255);
}
.pie{
position:fixed;
background-color: #3b3b3b;
width: 100%;
height: 100px;
bottom: 0px;
text-align: center;
}
<html>
<head>
<meta charset="utf-8">
<title>plantilla</title>
<link rel="stylesheet" href="css/estilo.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
</head>
-Queremos obtener una fuente de Google la escogemos, la seleccionamos, cogemos todos códigos 1 para html y luego colocamos dentro del head.
___________________________________________________________
<body>
<div class="cabecera">
<div class="logo">
<img src="img/logo_ivardev.png">
</div>
</div>
<div class="menu" >
</div>
-Ahora estamos en el archivo index.html
-Dentro de la cabecera incluimos una capa <div class="logo">
Y dentro la imagen de dicho logo. El logo lo hemos querido poner al lado le hemos cambiado los estilos.
*Que no se nos olvide que la capa overflow es para hacer auto scroll (que se mueve la pagina)
Asi mostraria en su estilo CSS
.logo{
margin-top: 30px;
margin-left: 20px;
margin: 30px 0 0 20px; /*esto es lo mismo que lo anterior*/
text-align: left;
____________________________________________________________
<div class="contenido">
<!-- Capas de fondo -->
<div class="capafondo1"></div>
<br><br>
<div class="capafondo2"></div>
<br><br>
<div class="capafondo3"></div>
<br><br>
<div class="capafondo4"></div>
-Vamos a colocar una capa utilizando imagen de fondo, dentro del contenido creamos una capa que llamaremos "capafondo1" y en el estilo css se mostraría así.
Se hace blackgrand-url ("imagen/logo..") Para bajar el nivel y colocar el logo colocaremos antes ../
También dependiendo de como queramos el logo en background le ponemos, si quiere que se repita, si no queremos, si lo queremos central, o que cubra el fondo de la pantalla:
Y así lo mostramos en diferentes capa de una forma diferente para diferenciarlos:
.capafondo1{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
}
.capafondo2{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
}
.capafondo3{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
background-position: center center;
}
.capafondo4{
width:400px;
height:300px;
background-color: aqua;
background-image: url('../img/logo_ivardev.png');
background-repeat: no-repeat;
background-position: center center;
background-size:100%;
}
_____________________________________________________
-Vamos a modificar los textos (poniendo p<class>) y estilos en su correspondiente CSS
<!-- Textos -->
<p class="texto1">
Este es el texto 1
</p>
<p class="texto2">
Este es el texto 2
</p>
<p class="texto3">
Este es el texto 3
</p>
<p>
Este es el <strong> texto negrita</strong>
</p>
<p>
Este es el <i> texto cursiva</i>
</p>
.texto1{
font-size: 15px;
}
.texto2{
font-size: 2em;
}
.texto3{
font-size: 2rem;
}
____________________________________________________
-La etiqueta span es para colocar una clase sin salto de linea, ni capa ni párrafo en HTML. Luego ponemos en CSS también
<p>
Este es el <span class="textomay"> texto mayusculas</span>
</p>
<p>
Este es el <span class="textogrande"> texto grande</span>
</p>
<p>
Este es el <span class="fuentegoogle"> fuente google</span>
</p>
</div>
-Su css: Ponemos textomay (upperrcase mayuscula) Luego también textogrande cambiamos varias propiedades.
.textomay{
text-transform: uppercase;}
.textogrande{
font-size: 2em;
font-weight: 700;
font-family: 'Times New Roman', Times, serif;
}
Aqui su CSS. E explicamos en breve
-Font -size (seria su tamaño 15px ejemplo)
-2em doble de lo normal
-2rem igual que quiere decir que si esta en una capa tiene 2em y ponemos 2rem (lo combierete en 4em)
-Tambien probamos opciones de texto <strong> texto negrita <strong> <i> texto cursiva <i>
.texto1{
font-size: 15px;
}
.texto2{
font-size: 2em;
}
.texto3{
font-size: 2rem;
}
.textomay{
text-transform: uppercase;}
.textogrande{
font-size: 2em;
font-weight: 700;
font-family: 'Times New Roman', Times, serif;
}
Con esta clase seleccionamos la fuente de google.
.fuentegoogle{
font-family: 'Raleway', sans-serif;
font-size: 3em;
