背景和列表

background-color 设置元素的背景颜色
background-image 把图像设置为背景
background-position 设置背景图像的其实位置
background-attachment 背景图像是否固定或者随着页面其余部分滚动
background-repeat 设置背景图像是否重复以及如何重复
background  

列表样式:

list-style-type

设置列表项标志的类型

list-style-image

将图像设置为列表项标志

list-style-position

设置列表中列表项标志的位置

list-style

 

背景颜色:

background-color:颜色|transparent

  •  transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
  • 颜色值(颜色名|rgb|十六进制)
  • 背景区包括内容、内边距和边框、不包含外边距

border默认的颜色为文本的颜色

背景图片:

background-image:url | none

  • url可以是相对地址也可以是绝对地址
  • 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
  • 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。

元素背景图片的显示方式:

background-attachment:scroll |fixed

  • scroll:默认值,背景图片随滚动条滚动
  • fixed:当页面的其余部分滚动时,背景图片不会移动。

背景图片的起始位置:

background-position:百分比|值

                                  top | right | bottom | left | center

background-position:50px  50px;    background-position:10% 10%;

 

list-style-type

设置列表项标志的类型

list-style-image

将图像设置为列表项标志

list-style-position

设置列表中列表项标志的位置

list-style

 

列表样式:

背景颜色:

background-color:颜色|transparent

  •  transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
  • 颜色值(颜色名|rgb|十六进制)
  • 背景区包括内容、内边距和边框、不包含外边距

border默认的颜色为文本的颜色

背景图片:

background-image:url | none

  • url可以是相对地址也可以是绝对地址
  • 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
  • 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。

元素背景图片的显示方式:

background-attachment:scroll |fixed

  • scroll:默认值,背景图片随滚动条滚动
  • fixed:当页面的其余部分滚动时,背景图片不会移动。

背景图片的起始位置:

background-position:百分比|值

                                  top | right | bottom | left | center

background-position:50px  50px;    background-position:10% 10%;

background[

background-color

列表样式:

list-style-type

设置列表项标志的类型

list-style-image

将图像设置为列表项标志

list-style-position

设置列表中列表项标志的位置

list-style

 

背景颜色:

background-color:颜色|transparent

  •  transparent是全透明黑色(black)的速记法,类似rgba(0,0,0,0)这样的值
  • 颜色值(颜色名|rgb|十六进制)
  • 背景区包括内容、内边距和边框、不包含外边距

border默认的颜色为文本的颜色

背景图片:

background-image:url | none

  • url可以是相对地址也可以是绝对地址
  • 元素的背景占据了元素的全部尺寸,包括内边距和边框,不包括外边距
  • 默认的,背景图像位于元素的左上角,并在水平和垂直方向上重复。

元素背景图片的显示方式:

background-attachment:scroll |fixed

  • scroll:默认值,背景图片随滚动条滚动
  • fixed:当页面的其余部分滚动时,背景图片不会移动。

背景图片的起始位置:

background-position:百分比|值

                                  top | right | bottom | left | center

background-position:50px  50px;    background-position:10% 10%;

background:[background-color] [background-image] [background-repeat] [background-attachment] [background-position] []

各值之间用空格分割,部分先后顺序

background: #000 url() no-repeat top fixed;

列表样式:

list-style-type:关键字 | none

无序列表:

none 无标记
disc 实心的圆点
circle 空心的圆点
square 实心的方块

有序列表:

none 无标记
decimal 从1开始的整数
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
//无序列表
<style>
        ul li{
            list-style-type: circle;
        }
    </style>
</head>
<body>
<ul>
    <li>家用电器</li>
    <li>电脑</li>
    <li>手机</li>
</ul>

</body>
//有序列表
<style>
        ul li{
            list-style-type: decimal;
        }
    </style>
</head>
<body>
<ul>
    <li>家用电器</li>
    <li>电脑</li>
    <li>手机</li>
</ul>

使用图片设置列表项的标记:

list-style-image:URL | none

设置列表项标记的位置:

list-style-position:inside|outside

inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐。第二行文字和图标对齐。

outside:默认值,列表项目标记放置在文本以外,且环绕文本不根据标记对齐。适用于多行文本根据文本对齐。

list-style:list-style-type

                 list-style-position

                 list-style-image

  • 值之间空空格分割
  • 顺序不固定
  • list-style-image会覆盖list-style-type的设置

猜你喜欢

转载自blog.csdn.net/weixin_40512519/article/details/81356636