Antecedentes y lista
css estilo de
fondo color de
fondo imagen de
fondo fondo-posición
fondo-archivo adjunto
fondo-repetir abreviatura de
fondo , establecer el atributo de fondo en una declaración
css estilo de
lista tipo de estilo de
lista estilo de
lista imagen estilo de
lista posición estilo de lista abreviado
El fondo incluyecontenido, relleno, borde, Pero sin un borde de margen
, el fondo no se mostrará si no se establece ningún estilo.
div{
width:30px;
height:30px;
background-image:url(little.png);
padding:20px;
margin:20px;
border:10px dashed;
background-color:red;
}
Cuando la imagen de fondo y el color de fondo se configuran al mismo tiempo, la pantalla seImagen de fondo
De hecho, primero se muestra el color y luego la imagen se superpone al color
Pero a veces la imagen de fondo repetida no es atractiva. Establezca el modo de repetición de la imagen de fondo del elemento:
background-repeat: repeat | no-repeat | repeat-x | repeat-y
Modo de visualización de imagen de fondo
background-adjunto: desplazamiento | fijo
Descripción:
desplazamiento : valor predeterminado , la imagen de fondo se desplaza con la barra de desplazamiento
fija: cuando el resto de la página se desplaza, la imagen de fondo no se mueve
Imagen de fondo posicionamiento
Set la posición inicial de la imagen de fondo del elemento de
fondo-posición:
valor percentage│ | top | derecho l parte inferior | left | centro
fondo abreviatura
fondo: [background-color] [Imagen de fondo]
[background-repeat]
[fondo -attachment]
[background-position] []
Descripción
· Use espacios para separar los valores, sin ningún orden en particular
div{
width:30px;
height:30px;
background:#000 url(little.png) no-repeat top fixed;
padding:20px;
margin:20px;
border:10px dashed;
}
Puede haber imágenes que no se muestran, porque el fijo aquí es relativo a toda la página web. El superior y el fijo son fijos , pero están ocultos cuando no se muestran. Intente cambiar el ancho al 100%.
Marca de elemento de lista
Establecer el tipo de estilo de marca del elemento de
lista tipo de estilo de lista: palabra clave | ninguno
Utilice la imagen para establecer la marca del elemento de
lista estilo de lista imagen: url | ninguno
ul li{
list-style-image:url(1.jpg);
}
Establecer la posición del marcador de elemento de
lista lista-estilo-posición : interior | exterior
interior: el marcador de elemento de lista se coloca dentro del texto y el texto circundante se alinea de acuerdo con el marcador
afuera: el valor predeterminado, la marca del elemento de la lista se coloca fuera del texto y el texto circundante no se alinea de acuerdo con la marca
estilo de lista: estilo de lista tipo estilo de lista posición estilo de lista imagen
Nota: los
valores están separados por espacios, y el
orden no es
Imagen fija de estilo de listaSobrescribiráConfiguración de tipo de estilo de lista
ul li{
list-style:url(1.jpg) square inside;
}
para resumir:
SIGUIENTE:
modelo de caja css, diseño de página