CSS列表 背景图样式

一、列表样式:
list-style-type:none/disc(默认)/square/circle
list-style-image:url(图片路径);
list-style-position:outside(默认)/inside

以上属性可以简写成list-style:type  image  position;  若三个属性值中有某些属性没有设置值,那么该属性将采用默认值


二、背景图属性:
background-color:red  /rgb(255,0,0)  /#f00 /#ff0000
background-image:url(背景图的路径);
1、容器大小=背景图大小    正好完全显示
2、容器大小<背景图大小    从左上角开始显示一部分背景图
3、容器大小>背景图大小    默认背景图在容器平铺

设置背景图在容器中的平铺情况
background-repeat:repeat(默认)/repeat-x/repeat-y/no-repeat

背景图默认是从容器的左上角开始显示,设置背景图在容器的位置
background-position:水平偏移量  垂直偏移量;




三、显示 隐藏:
display:inline/inline-block/block/none
元素的显示和隐藏
display:none  隐藏     display:inline/inline-block/block  显示
visibility:visible 显示/hidden 隐藏
opacity:0-1之间的小数值   0表示完全透明    1表示完全不透明

以上的显示和隐藏需要注意的是:
用什么方式隐藏元素就要用相应的方式显示出来
设置了display:none;的元素在页面中无法存在,元素在页面中不占位子,他后面的元素就会取占据他的位置
visibility:hidden 和 opacity:0的元素在页面中正常占位的

你可能感兴趣的:(web)