Contenido principal
Programación de computadoras
Curso: Programación de computadoras > Unidad 2
Lección 6: Diseño CSS- Agrupación de elementos en CSS
- Desafío: agrupa a los meros
- Propiedades width, height y overflow en CSS
- Desafío: el océano que se desborda
- Modelo de caja en CSS
- Desafío: el modelo bóxer
- Posición en CSS
- Desafío: coloca al planeta
- CSS en la naturaleza: Google Maps
- Elementos flotantes en CSS
- Desafío: nubes flotantes
- Usar las propiedades de diseño de CSS
- Planear tu página web
- Proyecto: invitación a un evento
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
CSS en la naturaleza: Google Maps
¿Quieres unirte a la conversación?
- Es increible todo lo que se puede hacer con HTML, CSS, JavaSript los tres juntos son una maravilla(19 votos)
- me gusta ♥ esta plataforma deja tu voto si te gusto a ti también ?(15 votos)
- pero como lograran llevarte a todos esos lugares, debe ser una regla mucho mas complejo no?(11 votos)
- una pregunta cr7 es "cristiano"(c) "ronaldo"(r) "7"(dorsal)?(2 votos)
- esto es igual en otras apps?(2 votos)
- Como podria implementar eso en una app?(1 voto)
- Lo que se puede hacer con HTML, CSS, JavaSript es increible la verdad(1 voto)
- como haces para que te guie a toodos esos lugares?(1 voto)
- estaria bien aprender frameworks como boostrap(1 voto)
- En parte si , pero realmente es mejor y una gran ventaja saber mejor las bases que en este caso es html y css , con eso entiendes mejor como funciona boostrap(2 votos)
Transcripción del video
déjenme mostrarles un ejemplo de posicionamiento con css y dz e index en la naturaleza google maps probablemente muchos de ustedes ya hayan usado google maps o algún servicio de mapas en línea para ayudarlos a encontrar lo que están buscando y estas cosas son realmente geniales podemos navegar por ahí y hacer acercamientos o alejarnos y podemos buscar cosas así que como estoy en barcelona en este momento estoy buscando la sagrada familia que es una basílica hermosa esto en realidad es html css javascript pero dejen de mostrarles los zetas índices que hay aquí todos los elementos que vemos todos han sido posicionados usando css para estar unos sobre otros y están usando seta index en una forma muy particular para asegurarse de que el orden es exactamente correcto así que dejen de usar mi consola de chrome para mostrarles algunas cosas este mini mapa que en la esquina tiene posición absoluta botón 0 left 0 y 17 index de 1 así que esto se pondrá sobre cualquier cosa que tengas eta index de 0 esta tarjeta flotante que aparece aquí y que tiene todas estas opciones tiene position picks y tiene un zeta index de 10 así que se muestra por encima de muchas cosas el botón de zoom tiene un set a index de 2 eso significa que quedará debajo de la tarjeta flotante vamos a mover esto aquí arriba y ver qué pasa lo ve esta tarjeta flotante se muestra por encima del botón de zoom porque tiene un set a index de 4 y el zoom tiene un zeta index de 2 como puedes ver google maps se utiliza en gran cantidad la propiedad position de css iceta index con el fin de presentar el mapa y los controles en la parte superior también utiliza muchas otras cosas de css y de javascript pero es importante que ahora empieces a entender cómo están construidos otros sitios web que no se parecen en nada a los que hemos estado mostrando hasta ahora este es el poder de css