Reúne arena para formar una torre y progresa un poco cada día.
⭐ Introducción a la columna
Tour de introducción al front-end: explore el maravilloso mundo del desarrollo web. Recuerde hacer clic en el enlace de arriba o a la derecha para suscribirse a esta columna. Oh Geometry lo llevará en un viaje del front-end
¡Bienvenido al recorrido introductorio del front-end! Esta columna está diseñada para aquellos amigos que están interesados en el desarrollo web y acaban de ingresar al campo del front-end. Ya sea que sea un completo novato o tenga algunos desarrolladores básicos, aquí le brindaremos una plataforma de aprendizaje sistemática y amigable. En esta columna, la actualizaremos todos los días en forma de preguntas y respuestas, presentando puntos de conocimiento de front-end seleccionados y respuestas a preguntas frecuentes. A través del formato de preguntas y respuestas, esperamos responder más directamente a las preguntas de los lectores sobre la tecnología front-end y ayudar a todos a construir gradualmente una base sólida. Ya sea HTML, CSS, JavaScript o una variedad de marcos y herramientas de uso común, explicaremos conceptos en términos simples y brindaremos ejemplos y ejercicios prácticos para reforzar lo que ha aprendido. Al mismo tiempo, también compartiremos algunos consejos prácticos y mejores prácticas para ayudarlo a comprender y utilizar mejor diversas tecnologías en el desarrollo front-end.
No solo eso, también lanzamos periódicamente algunos tutoriales prácticos de proyectos, para que pueda aplicar los conocimientos adquiridos al desarrollo real. A través de la práctica de proyectos reales, podrá comprender mejor el flujo de trabajo y la metodología del desarrollo front-end y desarrollar su capacidad para resolver problemas y desarrollarse de forma independiente. Creemos que sólo mediante la acumulación y la práctica continuas podremos dominar verdaderamente la tecnología de desarrollo front-end. ¡Así que prepárate para el desafío y embárcate con valentía en este viaje introductorio! Ya sea que esté buscando una transición profesional, una mejora de sus habilidades o un interés personal, estamos comprometidos a brindarle apoyo y recursos de aprendizaje de la más alta calidad. ¡Exploremos juntos el maravilloso mundo del desarrollo web! ¡Únase al viaje introductorio del front-end y conviértase en un excelente desarrollador front-end! Zarpemos en el recorrido por el front-end. Para crear un elemento cuadrado responsivo (igual ancho y alto) en CSS, puede usar diferentes métodos, estos son dos de los más comunes:
⭐Porcentaje paddingde utilización
Este método paddingimplementa cuadrados adaptativos estableciendo el porcentaje del atributo del elemento. El porcentaje de un elemento paddingse calculará en función de su propio ancho, por lo que usar el mismo valor porcentual tanto para el ancho como para el alto garantizará el mismo ancho y alto.
.square {
width: 50%; /* 设置元素宽度为50% */
padding-top: 50%; /* 设置顶部内边距为50% */
background-color: blue; /* 可以添加背景颜色以显示正方形效果 */
}
<div class="square"></div>
⭐2.Usar ::beforepseudoelementos
Otra forma es utilizar ::beforeun pseudoelemento para crear un cuadrado. El efecto cuadrado se puede lograr posicionando absolutamente el pseudoelemento y estableciendo el ancho y el alto en valores iguales.
.square {
position: relative;
width: 50%; /* 设置元素宽度为50% */
padding-top: 50%; /* 设置顶部内边距为50% */
background-color: green; /* 可以添加背景颜色以显示正方形效果 */
}
.square::before {
content: "";
display: block;
padding-top: 100%; /* 设置伪元素的内边距为100%，使其宽高相等 */
}
<div class="square"></div>
Ambos métodos pueden lograr cuadrados adaptativos; el método que elija dependerá de sus necesidades y diseño. Elija el método que más le convenga según la situación específica.
⭐ Escrito al final
Esta columna es adecuada para una amplia gama de lectores, adecuada para principiantes en front-end; o socios que nunca han estudiado front-end y están interesados en front-end, o estudiantes de back-end que desean mostrarse mejor y expandirse. algunos puntos de conocimiento de front-end durante el proceso de entrevista, por lo que si tiene una base de front-end y sigue esta columna para aprender, también puede ayudarlo a verificar y llenar los vacíos en gran medida. Dado que el blogger mismo hace el salida de contenido, si hay algún defecto en el artículo, puede contactarme en el lado izquierdo de la página de inicio, avanzamos juntos y al mismo tiempo recomendamos varias columnas para todos, los socios interesados pueden suscribirse: además de las columnas a continuación, también puedes ir a mi página de inicio para ver otras columnas;
Juegos front-end (gratis) Esta columna lo llevará a un mundo lleno de creatividad y diversión. Utilizando los conocimientos básicos de HTML, CSS y JavaScript, crearemos juntos varios juegos de páginas interesantes. Si es principiante o tiene experiencia en desarrollo front-end, esta columna es para usted. Comenzaremos con lo básico y lo guiaremos paso a paso a través de las habilidades que necesita para crear juegos web. A través de casos prácticos y ejercicios, aprenderá a usar HTML para crear estructuras de páginas, usar CSS para embellecer la interfaz del juego y usar JavaScript para agregar efectos interactivos y dinámicos al juego. En esta columna, cubriremos varios tipos de minijuegos, incluidos juegos de laberintos, arkanoid, serpiente, buscaminas, calculadora, guerra de aviones, tres en raya, rompecabezas, laberintos y más. Cada proyecto lo guía a través del proceso de construcción en pasos claros y concisos, con explicaciones detalladas y ejemplos de código. Al mismo tiempo, también compartiremos algunos consejos de optimización y mejores prácticas para ayudarle a mejorar el rendimiento de la página y la experiencia del usuario. Ya sea que esté buscando un proyecto interesante para ejercitar sus habilidades de front-end o esté interesado en el desarrollo de juegos web, la columna de juegos pequeños de front-end será su mejor opción. Haga clic para suscribirse a la columna del juego front-end
Tutorial transparente de Vue3 [de cero a uno] (pago) ¡Bienvenido al tutorial transparente de Vue3! Esta columna tiene como objetivo brindarle conocimientos técnicos completos relacionados con Vue3. Si tiene algo de experiencia con Vue2, esta columna puede ayudarle a dominar los conceptos básicos y el uso de Vue3. Lo guiaremos en la creación de una aplicación Vue completa desde cero, paso a paso. A través de casos y ejercicios reales, aprenderá a utilizar la sintaxis de plantillas, el desarrollo de componentes, la gestión de estado, el enrutamiento y otras funciones de Vue3. También presentaremos algunas funciones avanzadas, como Composition API y Teleport, etc., para ayudarlo a comprender y aplicar mejor las nuevas funciones de Vue3. En esta columna, lo guiaremos a través de cada proyecto en pasos claros y concisos, con explicaciones detalladas y código de muestra. Al mismo tiempo, también compartiremos algunos problemas y soluciones comunes en el desarrollo de Vue3 para ayudarlo a superar las dificultades y mejorar la eficiencia del desarrollo. Ya sea que desee aprender Vue3 en profundidad o necesite una guía completa para crear proyectos front-end, la columna de tutorial transparente de Vue3 se convertirá en su recurso indispensable. Haga clic para suscribirse a la columna del tutorial transparente de Vue3 [de cero a uno]
La Guía de introducción a TypeScript (gratuita) es una columna diseñada para ayudarle a empezar rápidamente y dominar las tecnologías relacionadas con TypeScript. A través de un lenguaje conciso y claro y un rico código de muestra, explicaremos en profundidad los conceptos básicos, la sintaxis y las características de TypeScript. Ya sea un principiante o un desarrollador experimentado, aquí puede encontrar el camino de aprendizaje que más le convenga. Desde características principales como anotaciones de tipo, interfaces y clases hasta el desarrollo modular, la configuración de herramientas y la integración con marcos de front-end comunes, cubriremos todos los aspectos de manera integral. Al leer esta columna, podrá mejorar la confiabilidad y la capacidad de mantenimiento del código JavaScript y proporcionar una mejor calidad del código y eficiencia de desarrollo para sus propios proyectos. ¡Embárquemonos juntos en este maravilloso y desafiante viaje de TypeScript! Haga clic para suscribirse a la columna de la Guía de introducción a TypeScript
