1、首先创建一个新的html文件，如图所示。
2、在html文件上找到body标签，在这个标签里创建一个div标签并设置class类为bg ，如图所示。
3、接着在title标签后创建style标签用来给bg类添加样式。在这给bg类设置了一个宽、高和背景颜色。
4、然后设置鼠标滑过div时背景变色。给bg样式类添加鼠标滑过：hover，然后设置鼠标滑过时的背景颜色。
5、最后实用浏览器打开，保存好html后使用浏览器打开，在鼠标没有滑过div时背景是红色的，当鼠标滑过div的时候背景从红色变为了棕色。
悬浮按钮只需要设置按钮positi的属性为fixed即可。
例子：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动按钮</title>
<style>
*
{
margin: 0px
padding: 0px
}
#container
{
width: 1000px
height: 3000px
background-color: #1b6d85
margin: auto
}
#div1
{
height: 600px
background-color: #255625
}
#div2
{
height: 600px
background-color: #c0a16b
}
#div3
{
height: 600px
background-color: #b92c28
}
#div4
{
height: 600px
background-color: #449d44
}
#div5
{
height: 600px
background-color: #999999
}
.btn-style
{
width: 30px
height: 120px
position: fixed/*此处即是固定按钮位置的属性。*/
left: 1500px
top: 400px
}
</style>
</head>
<body>
<button class="btn-style">这是一个浮动按钮</button>
<div id="container">
<div id="div1">第一节</div>
<div id="div2">第二节</div>
<div id="div3">第三节</div>
<div id="div4">第四节</div>
<div id="div5">第五节</div>
</div>
</body>
</html>
效果图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）