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

最新资讯
Q1小米IoT与生活消费产品营收120亿元 同比增长56.5%

Q1小米IoT与生活消费

小米IoT与生活消费产品分部的收入于2019年第一季度同
小米第一季度互联网服务收入43亿元 同比增长31.8%

小米第一季度互联网服

小米互联网服务分部收入于2019年第一季度同比增长31.8
小米第一季度国际市场收入168亿元 同比增长34.7%

小米第一季度国际市场

2019年第一季度,国际市场收入同比增长34.7%至人民币168
小米回应华为谷歌事件风险:高度重视 有技术积累

小米回应华为谷歌事件

针对“华为遭遇谷歌暂停支持部分业务、小米会否面临类
直击|漫威与网易达成合作 将开发原创娱乐内容

直击|漫威与网易达成

两家公司将以广受全球美誉的漫威故事为基础合作开发原
小米2019年一季度净利润20.8亿元 同比增长22.4%

小米2019年一季度净利

小米集团发布2019年第一季度未审计财报。财报显示,小
最新文章
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