¿Cómo logra el diseño flexible la adaptación al ancho?

1. interfaz de usuario

• La página se divide en dos partes, dos cuadrículas izquierda y derecha, cuando la página se estira, su ancho se adapta al ancho de la página.
  
• Dos cuadrículas a la izquierda y a la derecha

给父元素div进行设置
	display: flex;
	flex-flow: row wrap; // 以行排列 并且允许换行
	align-content: flex-start;

• flex-flow establece la combinación de avance de línea y eje

Es una abreviatura de flex-direction y flex-wrap.
Así que solo master, flex-direction y flex-wrap.

• El ancho de los dos recuadros se adapta al ancho de la página.
• Para lograr esta función, aquí calc()se introducen las propiedades de CSS3 .
• calcEs la abreviatura de la palabra en inglés calcular (cálculo), que es una nueva función de css3, y puede calc()给元素的border、margin、pading、font-size和widthestablecer valores dinámicos mediante el uso de otros atributos.
• Esta función nos permite calcular valores CSS en lugar de especificar valores exactos. Suele utilizarse para calcular el tamaño o la posición de un elemento. Admite suma, resta, multiplicación y división.

Es importante prestarle especial atención, de lo +和-运算符必须用空格隔开contrario no funcionará correctamente. Los operadores * y / no tienen esta restricción, pero por razones de coherencia, se recomienda agregar espacios.

Además, es genial que podamos 以混合CSS单位, por ejemplo, restar porcentajes y píxeles.

• El código es el siguiente para configurar los elementos secundarios

// 给奇数元素设置了右边距的情况下
test:nth-child(odd) {
    
    
	margin-right: 20px;
}
test: {
    
    
	width: calc(50% - 10px);
}

• Para el siguiente diseño, el propósito principal es implementar triángulos y agregar colores de borde a los triángulos.
  
• triángulo
• Tres bordes son transparentes y un borde está coloreado.
• Triángulo izquierdo

	border-right: 26px solid #FFFFFF;
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	border-left: 8px solid transparent;

Otra forma de escribir

• Triángulo ascendente

	border-width: 0 5px 8px;
	border-style: solid;
	/* 四个颜色值 上右下左 */
	/*  三个颜色值 上透明 左右透明 下颜色 */
	border-color: transparent transparent #ffffff;

• Establece el color y la sombra del borde del triángulo.
• En realidad, el método consiste en colocar dos triángulos en diferentes posiciones para lograr los efectos de bordes y sombras.
• Se utilizan elementos de pseudoclase:：before :after
• Conociendo el principio, el código es realmente muy simple.
• El color del borde es para establecer bordes de diferentes colores para los dos triángulos, y la sombra es la misma, solo establezca diferentes colores para los dos triángulos.

test:before {
    
    
	...
}

test:after {
    
    
...
}

Para el triángulo en qué dirección, simplemente dé el color del lado opuesto a la dirección al configurarlo.

P.ej:

Triángulo izquierdo

#triangle-left {
    
    
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
}

Triángulo rectángulo

#triangle-right {
    
    
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
}

1. Para el cuadro de aviso anterior 好的，我知道了, la realización de esta función.
2. La solución es utilizar LocalStorageel almacenamiento local.

• Almacenar cuando cierra el indicador

		dom.find(".tip span").on("click ", function () {
    
    
			dom.find(".tip").addClass("none");
			window.localStorage.setItem("prompt", true);
		})

• Juzgar cuando se inicializa la página

		// 控制提示是否显示
		if (!window.localStorage.getItem("prompt")) {
    
    
			dom.find(".tip").removeClass("none");
		} else {
    
    
			dom.find(".tip").addClass("none");
		}