CSS的列表
列表样式类型 list-style-type:圆形circle/方形squre
以图片代替标签 list-style-images:
重点:list-style:none;
我们一般都要清除默认属性;
CSS的边框 border
border-width:边框宽度
boder-style:none/实线solid/虚线dashed/点状线dotted
border-color:边框颜色 注:transparent 透明色;
指定边框添加的方位:border-top/right/bottom/left: 上述属性可以缩写,没有顺序要求
而且这三个属性,每一个后面最多可以跟
1个属性值时,默认四个方向都是这个属性值;
2个属性值时,分别是上下、左右的属性值;
3个属性值时,分别是上、左右、下的属性值;
4个属性值时,分别代表上右下左方向的属性值;
例如 border-color:red green yellow blue; 四边的切面是斜的
如果元素的宽高都为0,仍然可以有border,这样可以用CSS做成个三角形(左右透明,只留下侧)
背景图
背景图颜色
background-color;
背景图的显示: background-image:url();
1、背景图是不占据空间的;且只会显示在容器内。
2、图片大小小于容器大小时,知道铺满为止;
3、图片打下等于容器大小时,全部显示;
4、图片大小大于容器大小时,部分显示;
背景图的平铺:
background-repeat:repeat/no-repeat/repeat-x/repeat-y;
背景图的位置关系:
background-position:水平位置 垂直位置 , 可以为负值,,,
正值分别向右向下,负值分别为向左向上;
同时支持百分比;(父元素的百分比) 10% 20%;
left bottom 背景图左侧下侧都到达容器的边缘
right center 背景图会贴到右侧边缘且居中;
结合起来也是可以的,例如 background-position: 100px top; 距离左侧100px顶部0px
不可以直接写一个值,例:backgrund-position:100px 会默认左侧100px,上下居中。
拓展:背景图的固定。
background-attchment:fixed;
背景图的简写:
background:red url() no-repeat 100px center fixed;
背景图和图片的区别:
a、背景图不占据空间,仅渲染,图片是htm的结构,占据空间。