Background and list
css background style
background-color
background-image
background-position
background-attachment
background-repeat
background abbreviation, set the background attribute in a statement
css list style
list-style-type
list-style-image
list-style-position
list-style shorthand
Background includescontent,padding,border, But without a margin
border, the background will not be displayed if no style is set.
div{
width:30px;
height:30px;
background-image:url(little.png);
padding:20px;
margin:20px;
border:10px dashed;
background-color:red;
}
When the background image and background color are set at the same time, the display isBackground picture
In fact, the color is displayed first, and then the picture overlays the color
But sometimes the repeated background image is not good-looking. Set the repeat mode of the background image of the element:
background-repeat:repeat| no-repeat |repeat-x|repeat-y
Background image display mode
background-attachment: scroll | fixed
Description:
scroll : default value , the background image scrolls with the scroll bar
fixed: when the rest of the page scrolls, the background image will not move
Background image positioning
Set the starting position of the background image of the element
background-position:
percentage│ value | top | right l bottom | left | center
background abbreviation
background: [background-color] [background-image]
[background-repeat]
[background -attachment]
[background-position] []
Description
· Use spaces to separate the values, in no particular order
div{
width:30px;
height:30px;
background:#000 url(little.png) no-repeat top fixed;
padding:20px;
margin:20px;
border:10px dashed;
}
There may be pictures that are not displayed, because the fixed here is relative to the entire webpage. The top and fixed are fixed , but they are hidden when they are not displayed. Try changing the width to 100%.
List item mark
Set the mark style type of the
list item list-style-type: keyword|none
Use the image to set the mark of the
list item list-style-image: url | none
ul li{
list-style-image:url(1.jpg);
}
Set the position of the
list item marker list-style-position : inside | outside
inside: The list item marker is placed inside the text , and the surrounding text is aligned according to the marker
Outside: The default value tag in the list items other than text , and the surrounding text is not aligned with the marking
list-style: list-style- type list-style-position list-style-image
DESCRIPTION:
separated by a space between the values,
the order is not Fixed,
list-style-imageWill overwriteList-style-type settings
ul li{
list-style:url(1.jpg) square inside;
}
to sum up:
NEXT:
css box model, page layout