本文介绍了HTML和CSS中的定位技术，包括相对、绝对和固定定位，并给出了示例代码。同时，详细讲解了:hover和:active伪类如何实现鼠标悬停和点击效果。此外，还阐述了页面内跳转的实现方法，包括div和table的跳转，以及仅通过a标签的跳转。最后，提到了基于target属性的图像切换效果和背景颜色、透明度及背景图片的设置。
文章目录
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 样式表中
最低0.47元/天 解锁文章
2590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
