Dreamweaver页面怎么制作悬浮在固定位置的导航?Dreamweaver中想要制作一个悬浮效果的导航,该怎么制作呢?下面我们就来看看详细的教程,需要的朋友可以参考下

html页面中想要制作一个悬浮在固定位置的一个导航,该怎么制作悬浮导航呢?我们可以使用Dreamweaver来制作,请看下文详细介绍。

1、启动Dreamweaver,并新建一个html软件

2、新建好以后可以看到自动生成的网页代码

3、在head中添加样式代码<style type="text/css"></style>,body中插入一个div

4、为了方便查看效果,可以给diV定义高于屏幕的高度。并引入样式a。

.a{
width: 1920px;
height: 10000px;
background: #BFBFBF;
}

5、在写一个DIV模块,并引入CSS模拟一个方形的红色代码,刷新后可以看到写好的模块只在顶部,并不是悬浮在固定位置的哦

.b{
width: 100px;
height: 100px;
background: #ff0000;
}

6、这时候就需要用到position: fixed;代码了。代码如下:

position: fixed;
left: 100px;
top: 100px;
z-index: 100;

宽度和高度设置好后就固定在一个位置了,z-index是把DIV设置到了最顶层,这样就可以啦,往下拉页面看看是不是固定在这个位置不变的呢

以上就是Dreamweaver制作悬浮在固定位置的一个导航的方法,希望大家喜欢,请继续关注爱安网。

相关推荐:

Dreamweaver怎么给页面添加时间?

Dreamweaver无法打开提示javascript错误怎么办?

最新资讯
苹果新品发售首日:不支持5G未影响消费者判断

苹果新品发售首日:不支

消费者的购买目标并不在追求高配和新颖的颜色,而是针对
独家对话毕福康:贾跃亭真的放手了 相信FF会融到钱

独家对话毕福康:贾跃亭

毕福康到底在想什么,他真的信赖贾跃亭,相信自己能救活FF
中国电信:2020年5G手机终端规模达1.7亿

中国电信:2020年5G手机

中国电信市场部副总经理陆良军在谈到5G终端技术策略时
新款iPhone发售现场:11 Pro暗绿黄牛市场加价千元

新款iPhone发售现场:11

一个黄牛称,11 Pro 暗夜绿256G、512G版本均加价1000元,
苏宁保险销售有限公司投资人变更 苏宁电器退出

苏宁保险销售有限公司

9月19日,天眼查数据显示,苏宁保险销售有限公司发生投资
FF公布融资及FF 91交付规划 还需8.5亿美元融资

FF公布融资及FF 91交

Faraday Future(FF)在其年度919 Futurist Day活动上正
最新文章
Dreamweaver cs5命令列表怎么删除命令?

Dreamweaver cs5命令

Dreamweaver cs5命令列表怎么删除命令?Dreamweaver cs5
Dreamweaver怎么设置不可见元素的参数?

Dreamweaver怎么设置

Dreamweaver怎么设置不可见元素的参数?Dreamweaver中有
Dreamweaver cs5怎么插入AppLet类型文件?

Dreamweaver cs5怎么

Dreamweaver怎么插入AppLet类型文件?Dreamweaver制作网
Dreamweaver cs5字体家族怎么添加删除字体?

Dreamweaver cs5字体

Dreamweaver cs5字体家族怎么添加删除字体?Dreamweaver
dreamweaver cs5网页怎么链接css样式?

dreamweaver cs5网页

dreamweaver cs5网页怎么链接css样式?dreamweaver cs5
Dreamweaver页面怎么制作悬浮在固定位置的导航?

Dreamweaver页面怎么

Dreamweaver页面怎么制作悬浮在固定位置的导航?Dreamwe