CSS Ejemplos
Fondo CSS
Una imagen de fondo fija (esta imagen no se desplaza con el resto de la página)
Explicación de las propiedades de fondo
Texto CSS
Explicación de las propiedades de texto
Fuentes CSS
Explicación de las propiedades de fuente
Enlaces CSS
Agregar diferentes colores para enlaces visitados/no visitados
Explicación de las propiedades de enlace
Listas CSS
Establecer una imagen como marcador de lista con una solución compatible con varios navegadores
CSS: eliminar los estilos predeterminados de los elementos de lista li
Explicación de las propiedades de lista
Tablas CSS
Establecer la alineación horizontal del contenido (alineación de texto)
Establecer la alineación vertical del contenido (alineación vertical)
Explicación de las propiedades de tabla
Modelo de caja CSS
Especificar un ancho total de 250 píxeles con una solución compatible con varios navegadores
Explicación del modelo de caja
Bordes CSS
Todas las propiedades del borde superior en una sola declaración
Todas las propiedades del borde inferior en una sola declaración
Todas las propiedades del borde izquierdo en una sola declaración
Todas las propiedades del borde derecho en una sola declaración
Explicación de las propiedades de borde
Contorno CSS
Explicación de las propiedades de contorno
Márgenes CSS
Establecer el margen superior del texto usando valores en centímetros
Establecer el margen inferior del texto usando valores porcentuales
Establecer el margen izquierdo del texto usando valores en centímetros
Explicación de la propiedad Margin
Relleno CSS
Explicación de la propiedad padding
Agrupación y anidamiento CSS
Explicación de agrupación y anidamiento
Dimensiones CSS
Establecer el ancho máximo de un elemento usando valores en píxeles
Establecer el ancho mínimo de un elemento usando valores en píxeles
Explicación de las propiedades de dimensión
Visualización CSS
Explicación de la propiedad Display
Posicionamiento CSS
Cómo usar barras de desplazamiento para mostrar el contenido desbordado dentro de un elemento
Cómo configurar el manejo automático de desbordamiento del navegador
Establecer la parte superior de una imagen usando valores en píxeles
Establecer la parte inferior de una imagen usando valores en píxeles
Establecer la parte izquierda de una imagen usando valores en píxeles
Establecer la parte derecha de una imagen usando valores en píxeles
Explicación de las propiedades de posicionamiento
Flotación CSS
Agregar borde y margen a una imagen y flotarla a la izquierda del párrafo
Explicación de la propiedad Float
Alineación de elementos CSS
Establecer alineación izquierda/derecha con una solución compatible con varios navegadores
Utilice soluciones multinavegador, establezca la alineación de posición izquierda/derecha, flotante
Explicación de las propiedades de alineación
Contenido generado CSS
Inserte la URL entre paréntesis después de cada enlace usando la propiedad content
La numeración de secciones y subsecciones es "Sección 1", "1.1", "1.2", etc.
Pseudoclases CSS
:first-child - coincide con el primer elemento i dentro de un elemento p
:first-child - coincide con todos los elementos I del primer elemento p
Explicación de las pseudo-clases
Pseudoelementos CSS
Establecer la primera letra del texto como una letra especial
Explicación de los pseudo-elementos
Barra de navegación CSS
Explicación de la barra de navegación
Galería de imágenes CSS
Explicación de la galería de imágenes
Opacidad de imágenes CSS
Explicación de la opacidad de las imágenes
Sprites de imágenes CSS
Explicación de los sprites de imágenes
Selectores de atributos CSS
Seleccionar elementos cuyo atributo title sea igual a un valor específico
Explicación de los selectores de atributos
Ejemplos de aplicación CSS
- Barra de progreso de carga CSS
- Estilos de paginación CSS
- Barra de progreso CSS
- Ejemplos de tooltips CSS
- Efecto hover de texto sobre imagen CSS
- Efecto hover de texto sobre imagen CSS - de arriba hacia abajo
- Efecto hover de texto sobre imagen CSS - de abajo hacia arriba
- Efecto hover de texto sobre imagen CSS - de derecha a izquierda
- Efecto hover de texto sobre imagen CSS - de izquierda a derecha
- Efecto hover de texto sobre imagen CSS - fundido a transparente
- Grupo de botones vertical CSS
- Grupo de botones CSS
- Efecto de animación de carga CSS
- Efecto de animación de carga CSS 2
- Efecto de animación de carga CSS 3
- Efecto de animación de carga CSS 4
- Caja de búsqueda dinámica CSS
- Tarjeta de información de usuario CSS
- Estilos de tarjeta CSS
- Estilos CSS de página anterior y siguiente
- Varios cuadros de mensajes CSS
- Tres estilos de tabla de precios CSS
- Estilo de interruptor CSS
- CSS para centrar horizontalmente un DIV
- Flechas CSS en las cuatro direcciones: arriba, abajo, izquierda y derecha
- Formulario de comentarios CSS
- Barra de menú de iconos CSS font-awesome
- Ejemplo de navegación superior CSS
- Efecto de estilo de nota adhesiva CSS
- Menú de desplazamiento horizontal CSS
- Menú vertical CSS
- Menú de desplazamiento vertical CSS
- Barra de menú fija CSS
- Formulario de inicio de sesión responsivo CSS
- Barra de menú inferior fija CSS
- Menú desplegable CSS
- Alineación del contenido desplegable CSS
- Menú desplegable de la barra de navegación CSS
- Barra de navegación con caja de búsqueda CSS
- Barra de navegación izquierda fija CSS
- Barra de navegación izquierda fija CSS - altura adaptable
- Plantilla de formulario de contacto HTML/CSS/JS (con mapa de Baidu)
- Diseñar una página web con CSS
Otras extensionesMás ejemplos:https://www.jyshare.com/examples/