背景类:
一、背景颜色 background-color
二、背景图片 background-image:url()
1、背景图片在页面中的平铺效果 background-repeat:
取值:repeat/repeat-x/repeat-y/no-repeat
默认平铺/水平平铺/垂直平铺/不平铺
2、背景图片在页面中的位置background-position:
取值:水平位置&垂直位置
浏览器的坐标系0点位置在左上角,水平(x轴)向右为正方向,垂直(y轴)向下为正方向。
词表示位置 水平方向:left/right/center 垂直方向:top/bottom/center
若一个方向取值为center,则该方向的“center”单词可以省略。还可以直接用数值表示。
三、大背景图片在页面中的对其方式
图片宽度需为1920px,这是由主流显示器所决定的。
图片的有效位置:用于书写文本的位置。
大背景图片的有效位置位于整个图片的左侧:牺牲图片的右侧,让图片左侧固定不动。background-position:left top
大背景图片的有效位置位于整个图片的右侧:牺牲图片的左侧,让图片右侧固定不动。background-position:right top
大背景图片的有效位置位于整个图片的中部:牺牲图片的两侧,让图片中部固定不动。background-position:top
四、图片精灵Sprite
通常设计人员会把小图标都放入同一张png图片中。
Sprite技术的优点:减少http请求的次数。多个图片文件的大小总和一定大于一个同内容图片的大小。
五、背景图片附件操作
Background-attachment:scroll/fixed 默认值/固定 固定后背景图片不会随着滚动条滚动。
列表类:
list-style-type:disc/circle/..设置有序列表/无序列表左侧的项目符号或编号类型。
list-style-image:url()设置列表左侧的项目符号或编号为图片。
list-style-position:inside/outside 相对于周围列表项 缩进/突出。设置列表项的位置。
list-style-type属性和list-style-image属性都需要作用在<ul>标记对上;list-style-position属性需要作用在<li>标记对上。