新人学习笔记之（CSS背景和列表）

一、CSS背景

        1.background-color

                1）background-color:颜色 ltransparent(black)颜色值(颜色名|rgb|十六进制)背景区包括内容 内边距，边框，不包括外边距

.box1{
    background-color: red ;
}

        2.background-image 

                1）背景图片 background-image:urlnone，元素的背景占据了元素的全部尺寸 包括内边距和边框 但不包含外边距 默认在水平垂直方向重复no-repeat 不重复

.box2{
            background-image: url(../img/使用qq登录.png);
            
        }

                        （1）在周定宽高的div里显示可用css性obiect-fit的几个属性:fi(不保持纵横比缩放图片，使图片完全适应)

                        （2）contain(保持纵横比缩放图片，使图片的长边能完全显示出来)

                        （3）cover(保持纵横比缩放图片，只保证图片的短边能完全显示出来)

                        （4）none(保持图片宽高不变)

                        （5）scale-down(当图片实际宽高小于所设置的图片宽高时，显示效果与none一致;否则，显示效果与contain一致        

        3.background-repeat

                1）设置元素图片的重复方式:repeatlno-repeat | repeat-xlrepeat-y 

.box1{
    /* 背景平铺 repeat-x横着平铺  repeat-y竖着平铺 no-repeat不平铺*/
            background-repeat: no-repeat;
}

        4.background-attachment

                1）设置元素图片的显示方式,scrol:默认值 背景图片随滚动条滚蛋， fixed:当页面其余部分滚动 背景图片不会滚动

.box1{
    
            /* attachment fixed背景图像固定  */
            background-attachment: fixed;
}

        5.background-position

                1）长度值(x,y)百分比(x%,y%) top，left,bottom, right,center

.box1{
            /* position背景图片位置top最上边 center中间 left左边 bottom最下面 right右边 */
            background-position: left center;
}

二、CSS列表

        1.list-style-type

                1）设置列表项的标记样式类型 关键字|none

                        （1）有序列表 none:无标记, decimal:从]开始的整数,lower-roman 小写罗马数字 upper-roman大写罗马数字 lower alpha 小写英文字母upper-alpha大写英文字母

ol li {
            list-style-type: lower-roman;
        }
        /* 有序列表 none:无标记, 
        decimal:从]开始的整数,
        lower-roman 小写罗马数字 
        upper-roman大写罗马数字 
        lower alpha 小写英文字母
        upper-alpha大写英文字母 */

                        （2）无序列表 none :无标记 disc:实心圆点,circle 空心圆点 square实心方块

 ul li {
            list-style-type: square;
        }
        /* 无序列表 none :无标记 
        disc:实心圆点,circle 
        空心圆点 square实心方块 */

        2.list-style-image

                1）设置图片设置列表项的标记 urlnone

ul li {
            list-style-image: url(../img/demon.jpg);
        }

        3.list-style-position

                1）设置列表项标记的位置 inside:列表项目标记放在在文本以内 环绕文字根据标记对齐 ，outside默认值 列表项目标放在在文本以外 且环绕文本不跟标记对齐 

ul li {
            list-style-position: inside;
        }

        4.list-style

                1）list-style:list-style-type ,list-style-position，list-style-image 顺序不固定 image会覆盖type

ul li {
            list-style: square inside url(../img/demon.jpg)  ;
        }

三、整体思维导图