列表属性 复合写法list-style
定义列表符合样式list-style-type
list-style-type:disc(实心圆 默认)/circle(空心圆)/square(实心方块)/none(去掉符号)
list-style-image将图片设置为列表符合样式
list-style-image:url();
使用url引入图片
list-style-position设置列表项标记的放置位置
list-style-position:outside;列表的外面(默认值)
list-style-position:inside;列表的里面
list-style复合写法(简写)
list-style:none;去除列表符号
复合写法,写到ul标签里class list-style 使用空格隔开,顺序可以随便
背景属性 复合写法background
背景颜色background-color
background-color:red;
- 三种写法1.直接写颜色 2.rgb 3.16进制#写法
- rgba写法 “a”代表透明度 rgba:(255,0,0,0.5);
背景图片background-images
background-images:url();
- 默认为平铺效果
背景图片的平铺background-repeat
background-repeat:no-repeat/repeat/repeat-x/repeat-y;
- repeat默认平铺 repeat-xX轴平铺 repeat-yY轴平铺 no-repeat不平铺
背景图片的定位background-position
background-position:水平位置 垂直位置;可以给负值
- 写一个具体的值距离左上多少px/%/英文单词如下(支持负值)
- 英文单词:left左 right右 top上 bottom下 随意组合
background-size自适应比例
- 占满整个盒子,会导致图片变形
- 取值如100px 100px(数字)或100% 100%(百分比)
- cover包含 等比例缩放,把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。也许无法显示在背景定位区域中,等比例缩放不失针。
- contain覆盖 把图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。铺不满盒子,留白。
背景图片的固定background-attachment
background-attachment:scroll(滚动)/fixed()
scroll默认值,fixed固定在浏览器的左上角
不在盒子的显示范围则不显示
复合写法background(简写)
- 用空格隔开
- 顺序可以换 (位置除外)
- 可以取一个值,放在后面能覆盖前面的值
- background-size属性只能单独使用 无法使用符合写法
- 如使用复合写法则非复合写法无法使用
THE END