前端技术之_CSS详解第六天--完结
一、复习第五天的知识
a标签的伪类4个：
a:link 没有被点击过的链接
a:visited 访问过的链接
a:hover 悬停
a:active 按下鼠标不松手
顺序就是“love hate”准则。
可以简写：
1 a{ 3 } 4 a:hover{ 6 }
background系列属性，CSS2.1层面
1 background-color
2 background-image
3 background-repeat
4 background-position
5 background-attachment
颜色表示法：red、#ff0000、#ff0000、#f00
rgb和十六进制颜色是一样多的，是一一对应的。有换算关系。
background-image:url(images/1.jpg);
默认是平铺的。
background-repeat:no-repeat;
重复横向： repeat-x;
重复纵向： repeat-y;
不重复： no-repeat;
background-position:100px 200px;
背景图在盒子中右边移动100px，向下移动200px。
可以是负数，background-position:-100px -200px;
向左边100px，向上边200px。
英语单词来表示
background-position:right bottom; 右下角
background-position:center bottom; 下边居中
css精灵
css雪碧，要会用fireworks精确显示精灵图。
background-attachment
背景固定
1 background-attachment:fixed;
background属性大综合
1 background:url(images/1.jpg) no-repeat -100px -100px;
二、相对定位
定位有三种，分别是相对定位、绝对定位、固定定位。
相对定位：
1 position:relative;
固定定位：绝对定位：
1 position:absolute;
每一种定位，都暗藏玄机，所以我们分别讲解。
1 position:fixed;
2.1 认识相对定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 200px; height: 200px; } .box1{ background-color: yellowgreen; } .box2{ background-color: skyblue; position: relative; top: 100px; left: 400px; } .box3{ background-color: orange; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。
也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位
1 position:relative; → 必须先声明，自己要相对定位了，
2 left:100px; → 然后进行调整。
3 top:150px; → 然后进行调整。
2.2 不脱标，老家留坑，形影分离
相对定位不脱标，真实位置是在老家，只不过影子出去了，可以到处飘。
2.3 相对定位用途
相对定位有坑，所以一般不用于做“压盖”效果。页面中，效果极小。就两个作用：
1） 微调元素
2） 做绝对定位的参考，子绝父相（讲绝对定位的时候说）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> .txt{ font-size: 30px; } .btn{ position: relative; top: 4px; left: 0; } </style> </head> <body> <p> <input type="text" class="txt"/> <input type="button" class="btn" value="我是一个小按钮" /> </p> </body> </html>
2.4 相对定位的定位值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">