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错误怎么办?

最新资讯
别叫那个华为人跑了

别叫那个华为人跑了

华为今年在海外招聘人才的策略,显得更为直接和野蛮。
孙宇晨回应取消巴菲特午餐会:先静养 重申取消不延期

孙宇晨回应取消巴菲特

随后,孙宇晨向新京报记者表示,一切先静养。此后,他重申取
孙宇晨名下“广州陪我公司”决议解散

孙宇晨名下“广州陪我

7月18日,广州陪我信息科技有限公司新增注销备案,注销原
华为据悉上半年收入增长约30%

华为据悉上半年收入增

华为据悉上半年收入增长约30%。
红包和表情包别乱用!腾讯获赔90万

红包和表情包别乱用!腾

因认为“吹牛”软件使用了与微信相似的红包界面和聊天
科创板上市委:同意传音控股发行上市

科创板上市委:同意传音

据上交所官网,科创板上市委2019年第16次审议会议结果公
最新文章
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