文章目录
1、position定位
-
相对定位(Relative Positioning):使用 position:relative; 属性可以将元素相对于其原来的位置进行定位,通过 top、left、bottom 和 right 属性来调整元素的位置。
-
绝对定位(Absolute Positioning):使用 position:absolute; 属性可以将元素相对于最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于文档的 body 元素进行定位。
-
固定定位(Fixed Positioning):使用 position:fixed; 属性可以将元素固定在页面的一个位置,不随页面滚动而移动。
运用示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定位测试</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
border: 1px solid red;
background-color: burlywood;
position: relative;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
运行结果:
通过改变left和top的参数大小,来改变div的位置。其他定位一样,只需要改变position的属性即可。只是定位参照的不同,定位功能比较常用,可以自己尝试一下定位效果。
2、悬停效果和点击效果
鼠标悬停和点击效果可以分别通过hover和active来实现。
1、鼠标悬停效果(hover)
示例:
为标签a中的字体添加悬停效果
a:hover{
color: red;
}
当鼠标悬停在a标签中的文字上面时,文字颜色将发生改变,变为红色。
2、鼠标点击效果(active)
active 用于设置当鼠标按下时的样式,可以使用它为元素添加点击效果,比如按钮的按下效果。
button:active {
background-color: blue;
}
这个例子表示当按下按钮时,按钮的背景颜色将变为蓝色。
此外,我们还可以结合 :hover 和 :active 伪类选择器创建更复杂的效果。示例代码:
a:hover {
color: red;
}
a:active {
color: green;
}
这个例子表示当鼠标悬停在链接上时,字体颜色将变为红色;当链接被点击时,字体颜色将变为绿色。
总之,使用 :hover 和 :active 伪类选择器来为元素添加鼠标悬停和点击效果是很简单的,只需在 CSS 样式表中