如何制作简易DIV悬浮框

我们在进行网页设计时，经常会遇到想设定一个悬浮DIV，却不知道怎么做的情况，下面我将告诉大家怎样制作一个简单的DIV悬浮框。

操作方法

  • 01

    使用Dreamweaver软件，打开一个已经编辑完成的html页面。

  • 02

    然后打开折叠的body标签，在标签的末尾添加一个DIV

  • 03

    在DIV里面加入一个img标签，src指向images文件夹中的一张图片

  • 04

    这时的div并没有相应的css样式，只处在整个网页的左下角

  • 05

    接下来我们就需要将给其添加一定的css样式，为了简便起见，我的css样式就写在页面的body标签里面了。

  • 06

    首先我们要让这个DIV的position样式为fixed，意为相对于屏幕定位。然后将top设为20px;right也设为20px;这样我们的div就固定在相对距离屏幕上方和右方分别20个像素的地方

  • 07

    在浏览器中的效果如下图所示

赞 (0)

相关推荐

  • 讯飞输入法电脑版如何使用语音悬浮框?讯飞麦克风使用教程?

    讯飞输入法超高语音识别率，很多朋友都开始使用语音输入模式，在使用过程中，还是有很多用户对于语音输入使用设置或多或少会存在一些问题，像讯飞麦克风如何使用，以及在使用过程中会出现的一些问题。 如何使用语音 ...

  • 讯飞输入法电脑版如何使用语音悬浮框?

    如何使用语音悬浮框? 打开语音悬浮框步骤：点击输入法状态栏设置按钮(最后一个按钮)->点击扩展功能->点击语音悬浮框即可。打开后， 如图所示： 此时您可以直接语音输入，可以边语音输入边识别 ...

  • 讯飞输入法设置语音悬浮框方法

    讯飞输入法设置语音悬浮框方法 打开语音悬浮框步骤:点击输入法状态栏设置按钮(最后一个按钮)->点击扩展功能->点击语音悬浮框即可.打开后,此时您可以直接语音输入,可以边语音输入边识别,也可 ...

  • 讯飞输入法怎么设置语音悬浮框

    讯飞输入法设置语音悬浮框方法 打开语音悬浮框步骤:点击输入法状态栏设置按钮(最后一个按钮)->点击扩展功能->点击语音悬浮框即可.打开后,此时您可以直接语音输入,可以边语音输入边识别,也可 ...

  • 应用宝APP怎么关闭悬浮框在其他应用界面显示

    应用宝APP怎么关闭悬浮框在其他应用界面显示

    应用宝APP是我们常用的软件之一,有小伙伴问怎么关闭悬浮窗在应用界面显示,下面小编介绍一下.具体如下:1. 打开[应用宝]APP.2. 打开后,点击下方的"管理"按钮后,选择右上角 ...

  • 怎么在PR软件中制作简易漫画效果

    怎么在PR软件中制作简易漫画效果

    PR即Premiere,是一款常用的视频编辑软件,今天给大家介绍一下怎么在PR软件中制作简易漫画效果的具体操作步骤.1首先打开电脑上的pr软件,进入主页面后,选择新建一个项目.2然后将想要添加漫画效果 ...

  • 腾讯电脑管家怎么设置显示监测悬浮框

    腾讯电脑管家怎么设置显示监测悬浮框

    腾讯电脑管家是我们常用的防护软件之一,有小伙伴问怎么设置悬浮框显示,下面小编介绍一下.具体如下:1.打开"腾讯电脑管家"图标,点击右上角的[三],弹出窗口选择"设置中心& ...

  • 用PS软件怎么制作简易透明logo

    用PS软件怎么制作简易透明logo

    今天给大家介绍一下用PS软件怎么制作简易透明logo的具体操作步骤.1. 首先打开电脑上的ps软件,进入主页面后,依次点击左下角的文件---新建选项.2. 然后根据自己的需要,选择创建画布的大小,然后 ...

  • 3dmax如何制作简易地形

    3dmax如何制作简易地形 操作方法 01 打开软件,我用的是2010版本的 02 用几何体创建一个长方体,设置长跟宽的分段数为100,稍微大点就可以了 03 右击鼠标,将长方体转化为可编辑多边形 0 ...