CSS补充
position
fixed 固定在页面某个位置,不随滚轮滚动
<div style="width:68px;height: 32px;background-color:black;color: white;
position: fixed;
bottom:10px;
right: 10px;
">返回顶部</div>
relative+absolute 固定在某个框的某个位置,随着滚轮滚动
<div style='position:relative'>
<div style='position:absolute;top:0;left:0;'>
......
</div>
</div>
opcity
透明度:0-1(数值越大,透明度越低)
<div style=''></div>
z-index:层级顺序
数值大的在数值小的上层
<div style='top: 110px;
left: 450px;
right: 450px;
background-color:white;
z-index:10'></div>
<div style='top: 110px;
left: 450px;
right: 450px;
background-color:white;
z-index:9'></div>
hover:
当鼠标移到当前标签,以下CSS样式生效
.pg_feet .menu:hover{
background-color: lightgrey;
color: black;
}
overflow
overflow:hidden --超过尺寸的范围将其隐藏
overflow:auto —超过尺寸范围出现滚动条
background-image:url(‘image/4.gif’);
#默认,图片重复访问,背景用图片布满,如果小图片就不断重复布满
background-repeat:repeat-y;纵向重复
background-repeat:repeat-x;横向重复
background-repeat:no repeat(不重复)
background-position-x:
background-position-y:
background-position:10px 10px;
常见问题
css样式重复性问题
可以把样式拆分细化,把共同属性现在一个样式里,把独有属性单独写到其它样式里,能极大的避免样式书写的重复性
<style>
.c{
共有属性
}
.c1{
独有属性
}
.c2{
独有属性
}
</style>
<div class='c c1'></div>
<div class='c c2'></div>
自适应和改变大小变形
左右滚动条的出现
宽度,百分比
解决方法:
页面最外层:像素的宽度
最外层设置绝对宽度(小于这个宽度即出现滚动条)
自适应:media标签
默认img标签,有一个1px的边框
因此
img{
border:0;
}