背景类CSS属性 和 列表类CSS属性

1、background-color：设置任意元素背景颜色。

2、background-size:设置背景图片的大小。        取值：cover覆盖（背景图片完全覆盖容器）

                                                                                contain：背景图片完全覆盖容器内容

                                                                                具体数值（空格隔开）          百分比

3、background-image：设置任意元素背景图片。例：{background-image：url(../images.xxx.jpg)}

4、background-repert:设置背景图片在容器内的平铺模式。

        取值：repeat（默认值）背景图片在容器内平铺。     repeat-x背景图片在容器内水平平铺

                   repeat背景图片在容器内垂直平铺。                no-repeat背景图片在容器内不平铺

5、background-attachment：设置背景图片是否随滚动条的滚动而滚动。

        取值：scroll（默认值）背景图片随滚动条滚动。                fixed固定背景图片。

6、background-position：背景图片出现的位置。       

        规定：容器左上角为原点，水平向右为X正值，水平向下为Y正值。

        取值：水平方向left、right        垂直方向top、bottom       

                   中心center（当一个方向为center时时，该center可以省略）

                    带有单位的数值。

        注：大背景图片位置设置：

                （1）大背景图片的宽度统一为1920像素。

                （2）对于最大水平分辨率达不到1920像素的显示器或设备，大背景图片在浏览器最大                             化时无法看到完整的背景图片。

                （3）根据大背景图片有效空间（渲染页面）的位置适当牺牲大背景图片的主体内容。

                        例：大背景图片在主体内容的两侧，则图片的有效空间在中部。

                                body{ background-image: url(../images/back03.jpg);

                                           background-repeat: no-repeat;

                                           background-position: top;}

7、图片精灵技术（Sprite）优点：减少前端http或https的请求次数。

                                                      精灵图的大小比多张图片的总和小。

   例：  a.准备一张背景透明的精灵图，扩展名为.png (精灵图由多个素材图标组成)

            b.图标一：30×30        图标二：50×50        图标三：100×100

            css代码：.图标一{widht:30px;height:30px;

                                        background-image:url(../images/扩展名.png)}

                            .图表二{width:50px;height;50px;

                                        background-image:url(../images/扩展名.png);

                                        background-position:0 －30px；}

                            .图标三{width:100px;height:100px;

                                        background-image:url(../images/扩展名.png);

                                        background-position:0 －80px;}

一、列表类CSS属性：（作用在ul/ol标记对上）

1、list-style-type:设置有序列表或无序列表，列表项的项目符号或编号类型。

取值：none去掉列表项项目左侧的项目符号或编号。

           项目符号：disc（默认）实心圆。   circle空心圆。   square矩形。

           数字编号：decimal阿拉伯数字   decimal-leading-zero带有前导0的阿拉伯数字编号

                             upper-alpha大写英文字母    lower-alpha小写英文字母

                             upper-roman大写罗马数字编号    lower-roman小写罗马数字编号

2、list-style-image:将列表左侧的项目符号或编号设置成图片。（图片宽度不能超过40px）

3、list-style-position:设置任意列表相对于其他列表项的位置缩进。