Apartado "Nav" – area4 otra variante de zona "Nav".
Vamos a modificar la clase "nav" para hacer una barra de navegación con menús desplegables.
Mostrando entradas con la etiqueta Estilos/Maquetación. Mostrar todas las entradas
Mostrando entradas con la etiqueta Estilos/Maquetación. Mostrar todas las entradas
Creando cont. Display grid Parte 6
Ya solo nos falta el pie de página “footer”.
Aquí le ponemos dos líneas de párrafo, la primera con el título del blog, derechos y nombre del autor, la segunda con un correo de contacto y mas abajo un enlace con la página principal.
En el siguiente enlace tenéis todos los archivos del ejercicio para su descarga.
Creando cont. Display Grid Parte 4
Vamos a configurar el area5 -->“Lado izquierda” y el área7 --> “Lado derecha”
Área5 vamos a poner un reloj con la hora de España, escribimos el código html en class=”lado_izquierda”.
Creando cont. Display Grid Parte 3
Apartado Nav – area4 vamos a poner la zona Nav con tres botones.
Configuramos en el HTML los botones de navegación.
Creando cont. Display Grid Parte 2
En la zona de banner vamos a poner un video de YouTube que tendrá 778px x 450px.
Creando cont. Display Grid Parte 1
Continuamos a partir de donde nos quedamos en el apartado Display grid parte 3
Maquetación Parte 6 grid Parte 2
Veamos unos ejemplos de lo visto hasta ahora, para verlo mejor le damos estilo a body
Maquetación Parte 6 grid Parte 1
La grid CSS o diseño de cuadrícula es una solución de diseño que ayuda a controlar el tamaño y la ubicación de los elementos de una página web.
Una grid es muy flexible, una de sus principales funciones es facilitar el diseño de una página, para ello se vale de filas y columnas igual que las tablas.
Para configurar una cuadricula tenemos que definir un elemento div principal (que será el contenedor de la cuadrícula) y uno o más div secundarios que serán los elementos de la cuadrícula.
Maquetación Parte 5 flex
Flex es un sistema de elementos flexibles, en la que los elementos html se colocan y adaptan de forma automática.
Maquetación Parte 4 inline - block
Inline
Elemento en línea, el elemento se coloca a continuación del otro en el plano horizontal.
Por ejemplo tenemos tres elementos <div>
Maquetación web Parte 3
Dentro de <header> tenemos tres secciones LOGO – BUSCADOR – BANNER DE PUBLICIDAD vamos a darle estilo.
Maquetación web Parte 2
Ahora le daremos formato css y delimitaremos los elementos con colores para verlo mejor
Empezamos por <body>
Introducción a estilos Parte 2
Como el número de etiquetas del HTML es reducido, a veces es necesario dar un formato distinto a elementos con la misma etiqueta. Se puede sortear esta limitación utilizando clases, que se pueden asignar a cualquier elemento de una página web.
Introducción a Estilos Parte 1
Estilo en línea con el atributo “style”
(este sistema es el menos utilizado) solo afecta al elemento que se le aplica
<h1 style="color: red;">¡HOLA MUNDO!</h1>
Suscribirse a:
Entradas (Atom)