使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件，然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性即可随页面滑动了。
所谓盒子，就是将html网页中的标签在网页版面中所占据的平面范围，抽象出来的一个视觉形状。
1、新建一个文件夹，用来存放网页文件和图片，快捷键ctrl+shift+n。
2、进入新建文件夹里面，右键新建文本文档。
3、进入新建的文本文档，复制下方代码，点击快捷键ctrl+s保存后退出。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>百度知道</title>
</head>
<body>
<!--
position:fixed是设置为固定在页面的某个位置，不会随滚动条滚动而移动。
top: 50px图片距离页面顶部50像素。
right:10px图片距离页面右边10像素。
display:block设置图片为块状元素，这样图片不会单独占据行-->
<img style="position:fixedtop: 50pxright:10pxdisplay:block" src="1.png" alt="">
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>
</body>
</html>
4、重命名新建文本文档为index.html，原先的.txt的后缀同时去掉后保存，提示确实要更改后按“是”即可。
5、添加背景图片源文件，并命名为1.png，这些图片为你需要放置的图片。
6、点击index.html，右键浏览器打开预览效果。
7、浏览器打开后即可得到如下效果
悬浮按钮只需要设置按钮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条）