背景和列表
css背景样式
background-color
background-image
background-position
background-attachment
background-repeat
background 简写，将背景属性设置在一个声明中
css列表样式
list-style-type
list-style-image
list-style-position
list-style 简写
背景包括content,padding,border,但没有margin
border如果不设置样式则不会显示背景。
div{
width:30px;
height:30px;
background-image:url(little.png);
padding:20px;
margin:20px;
border:10px dashed;
background-color:red;
}
当同时设置背景图片和背景颜色时显示的是背景图片
其实是先显示颜色，然后图片覆盖颜色
但有时重复的背景图片并不好看，设置元素的背景图片的重复方式：
background-repeat:repeat|no-repeat|repeat-x|repeat-y
背景图片显示方式
background-attachment: scroll | fixed
说明:
scroll:默认值，背景图片随滚动条滚动
fixed:当页面的其余部分滚动时，背景图片不会移动
背景图片定位
设置元素的背景图片的起始位置
background-position:
百分比│值 | top | right l bottom | left | center
背景缩写
background: [background-color] [background-image]
[background-repeat]
[background-attachment]
[background-position] []
说明
·各值之间用空格分割，不分先后顺序
div{
width:30px;
height:30px;
background:#000 url(little.png) no-repeat top fixed;
padding:20px;
margin:20px;
border:10px dashed;
}
可能存在图片不显示出来，因为这里fixed是相对整个网页来说的，top和fixed固定好了，没显示隐藏了，把width改100%试试看吧
列表项标记
设置列表项的标记样式类型
list-style-type:关键字|none
使用图片设置列表项的标记
list-style-image: url | none
ul li{
list-style-image:url(1.jpg);
}
设置列表项标记的位置
list-style-position : inside | outside
inside :列表项目标记放置在文本以内，且环绕文本根据标记对齐
outside :默认值，列表项目标记放置在文本以外，且环绕文本不根据标记对齐
list-style:list-style-type list-style-position list-style-image
说明：
值之间用空格分开，
顺序不固定，
list-style-image会覆盖list-style-type的设置
ul li{
list-style:url(1.jpg) square inside;
}
总结：
NEXT:
css盒子模型，页面布局