Para las páginas estáticas, primero necesitamos analizar el diseño de la página en general, qué tipo de método de diseño necesitamos usar, analizar la página de arriba a abajo y escribir estilos. Para las páginas públicas, podemos escribirlas en un componente y llámelos directamente cuando sea necesario.
html breve descripción
| nombre | Caracteristicas | ¿Se puede cambiar el ancho y la altura? | Elementos comunes |
|---|---|---|---|
| Elemento de bloque | Fiesta exclusiva | pueden | div ， p ， h1-h6 ， ul ， ol ， li |
| Elemento de bloque en línea | Una línea puede mostrar múltiples | pueden | entrada, img, área de texto, seleccionar, opción |
| Elementos en la línea | Una línea puede mostrar múltiples | No, depende del tamaño del contenido. | span ， a ， strong ， em ， del ， ins |
css breve
1. Establecer el centrado
1.1
Centrado horizontal 1.1.1 Centrado horizontal de elementos a nivel de bloque, es necesario establecer el ancho de los elementos a nivel de bloque para lograr un centrado horizontal general
width:100px;
margin:0 auto
1.1.2. Los elementos en línea, el centro horizontal de los elementos de bloque en línea, se agregan a su elemento principal
text-align：center
1.2 Centrado vertical
1.2.1 La altura de la línea es la misma que el valor de altura para lograr el centrado vertical.
height:100px;
line-height:100px
1.2.2. Coloque el bloque en línea para lograr un centrado vertical a través de alineación vertical: medio
display:inline-block;
vertical-align:middle
2. Flotar (flotar)
una caja grande (ul) se llena con varias cajas pequeñas (li) en escritura común
ul {
/*若父元素没有高度，要清除浮动*/
overflow：hidden
}
li {
float: left;
margin-right: 20px;
}
li:last-child {
margin-right: 0;
}
/*或者使用:not选择器*/
li:not(:last-child){
margin-right: 20px;
}
3. Posicionamiento (posición) El posicionamiento
fijo se utiliza a menudo para el
estilo de capa de máscara cuando aparece el marco de viñeta. No olvide escribir a la izquierda: 0, de lo contrario, habrá un bloque blanco a la izquierda.
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
El hijo es absolutamente padre (el elemento hijo se moverá en relación con su elemento padre más cercano)
hijo: posición:
padre absoluto : posición: relativo se
usa para mostrar algunos elementos que solo se muestran en ciertos eventos
.select{
position: absolute;
top: 40%;
left: 10px;
z-index: 999;
}
content必须要有，一个伪元素三角形
.select::before{
position: absolute;
content: '';
left:50%;
top:18px;
transform: translateX(-50%);
border-bottom: 9px solid #fff;
border-top: 9px solid transparent;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
}
Usar con animación ( animación )
li {
position: relative;
.rotate {
position: absolute;
}
&:hover .turntable {
animation: spin 2s linear 2;
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}