Hay un número en un círculo grande. ¿Cómo implementarlo con HTML+CSS?
& ltdiv style = " ancho:50px; alto:50px color de fondo: # F00 radio del borde: 25px"& gt
& ltspan style = " alto:50px ; altura de línea: pantalla de 50 píxeles: bloque; color: #FFF; alineación de texto: centro " >4 </span>.
& lt/div & gt;
& lt/body & gt;
Primero, debemos analizar la estructura de toda la tarjeta. Tomando la matrícula ordinaria 1 como ejemplo, se puede dividir en cinco partes, a saber, 1, marco exterior 2, color 3, números de las esquinas superior e inferior 4, elipse blanca interior 5 y el número grande en el medio.
En correspondencia con las diferentes partes, lo descomponemos en cinco partes del código html y agregamos clases, 1, fondo de la tarjeta 2, color de la tarjeta (porque el diseño es el mismo, pero el color es diferente, por lo que el el color se extrae en una categoría separada) 3, número 4 en las esquinas superior e inferior, fondo ovalado blanco 5, número grande.
A continuación se muestra el efecto comparando el código y las representaciones.
Después del diseño, agrega un estilo. Primero, cree una nueva hoja de estilo CSS y asóciela con un archivo html.
Primero escribe el estilo de fondo, escribe el ancho y alto según la proporción de la tarjeta y completa los espacios. Como nueva característica de CSS3, utilizamos esquinas redondeadas y sombras como se muestra en la imagen para crear una sensación tridimensional para la tarjeta.
Luego escribe el color de fondo de la tarjeta. Uno tiene cinco colores: negro, rojo, amarillo, verde y azul. Solo necesitamos definir estos cinco colores de antemano y luego agregar sus nombres de clase correspondientes.
Además, dado que los números en las esquinas superior e inferior requieren un posicionamiento absoluto, sus elementos principales deben definirse como un posicionamiento relativo.
Anotemos los números en las esquinas superior e inferior. Debido a que aquí se usan etiquetas de elementos en líneas em, recuerde mostrar: inline-block al configurar el ancho y el alto.
Colóquelo absolutamente en la posición requerida y luego use la función de rotación de CSS3 para rotar el número en la esquina inferior derecha 180 grados para hacer una cuenta regresiva.
¿Cómo dibujar la elipse blanca en el medio? Sabemos que el valor de border-radius es igual al ancho y al alto para dibujar un círculo, por lo que cuando su valor es la mitad del ancho que la mitad del alto, podemos dibujar una elipse y luego podemos rotarla en ángulo recto. y conseguiremos lo que queremos ovalado.
El último número es el número del medio. Debido a que es hija de la elipse, cuando la elipse gira, gira con ella. También debes girarlo hacia atrás si quieres ponerlo en una posición más positiva. Y elige la fuente adecuada para ello.
En este punto, nuestra tarjeta digital ordinaria ha sido escrita.