1. Primero organice la estructura html, anide varios li si hay varios puntos en ul>li
La estructura html es la siguiente:
<!-- 1 punto-->
<ul>
<li></li>
</ul>
<!-- 2 puntos-->
<ul>
<li></li>
<li></li>
</ul>
<!-- 3 puntos-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 4 puntos-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 5 puntos-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 6 en punto-->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2. El foco está en los estilos css
Preparación:
(1) Borre los márgenes interior y exterior que vienen con el navegador + el estilo de punto pequeño que viene con li
(2) Configure uniformemente el estilo básico ul + abra el diseño flexible
(3) Establecer uniformemente el estilo básico de li
1 punto: El eje principal de la caja está centrado + el eje lateral está centrado
2 puntos: ul cambia la dirección del eje principal + los espacios izquierdo y derecho del cuadro del eje principal están alineados + el eje lateral está centrado
3 puntos:
(1) ul cambia la dirección del eje + no hay espacio en ambos lados de la caja del eje, y el espacio medio es el mismo.
(2) El segundo eje lateral li está centrado y alineado
(3) Disposición del punto final del tercer eje lateral li
4 en punto:
(1) Los espacios en ambos lados de la caja están dispuestos de la misma manera + salto de línea automático
(2) Establezca los mismos márgenes exteriores para todos los lis y sepárelos
Márgenes superior, inferior, izquierdo y derecho = (ancho y alto total de ul - ancho y alto total de 2 lis)/4
5:00:
(1) Los espacios izquierdo y derecho del cuadro del eje principal están alineados al mismo nivel + el cuadro del eje lateral está centrado + ajuste de línea automático
(2) Establezca el margen exterior para el tercer li en el medio para separarse
Los márgenes superior e inferior son 0
Márgenes izquierdo y derecho = (ancho total de ul - ancho de 1 li) / 2 + la mitad del ancho de li mismo
6:00:
(1) Los espacios en ambos lados de la caja están dispuestos de la misma manera + salto de línea automático + cambio de dirección del eje principal
(2) Establezca el mismo margen exterior para que cada li se apriete entre sí
Márgenes superior e inferior = (altura total de ul-altura total de 3 líneas y 3 li)/6
Márgenes izquierdo y derecho = (ancho total de ul - ancho total de 2 li)/4
El estilo css es el siguiente:
/* Limpiar los estilos propios del navegador */
* {
relleno: 0;
margen: 0;
estilo de lista: ninguno;
}
/* Establecer uniformemente el estilo de ul */
ul {
altura: 90px;
ancho: 90px;
color de fondo: rgb (240, 238, 238);
borde-radio: 15px;
margen: 30px;
pantalla: flexible;
flotador izquierdo;
}
/* Establece uniformemente el estilo de li */
tu li {
altura: 20px;
ancho: 20px;
color de fondo: rojo;
borde-radio: 50%;
}
/* 1 en punto*/
ul:nth-child(1) {
alinear elementos: centro;
justificar-contenido: centro;
}
/* 2:00*/
ul:nth-child(2) {
alinear elementos: centro;
dirección de flexión: columna;
justificar-contenido: espacio uniformemente;
}
/* 3 puntos*/
ul:nth-child(3) {
dirección de flexión: columna;
justificar contenido: espacio alrededor;
}
ul:nth-child(3) li:nth-child(1) {
margen: 5px;
}
ul:nth-child(3) li:nth-child(2) {
/* disposición del eje lateral */
alinear-auto: centro;
}
ul:nth-child(3) li:nth-child(3) {
autoalinearse: extremo flexible;
margen: 5px;
}
/* 4 en punto*/
ul:nth-child(4) {
justificar contenido: espacio alrededor;
/*salto de línea automático*/
envoltura flexible: envoltura;
}
ul:nth-child(4) li {
/* (90-20*2)/4 */
margen: 12.5px;
}
/* 5:00*/
ul:nth-child(5) {
justificar contenido: espacio alrededor;
alinear elementos: centro;
envoltura flexible: envoltura;
}
ul:nth-child(5) li:nth-child(3) {
/* 20/2+(90-20)/2 */
margen: 0 35px;
}
/* 6:00*/
ul:nth-child(6) {
justificar contenido: espacio alrededor;
dirección de flexión: columna;
envoltura flexible: envoltura;
}
ul:nth-child(6) li {
margen: 5px 12.5px;
}
3. Visualización del efecto final
