养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

dreamweaver创建可以关闭和拖动的通知窗口

时间:2024-10-22 11:06:29

、​相信大家见到过很多种这样的通知窗口,它有两个特性,一是可以拖动,而是可以点击关闭按钮关间糈尢各闭该窗口,现在我们就是要做一个通知窗口,实现这两个效果,下面是具体的方法:

dreamweaver创建可以关闭和拖动的通知窗口

工具/原料

方法/步骤

1、打开dw以后,在布局选项下,找到apdiv,添加一个层

dreamweaver创建可以关闭和拖动的通知窗口

2、​在该层中,添加一个一列三行的表格,表格属性如图所示​

dreamweaver创建可以关闭和拖动的通知窗口

dreamweaver创建可以关闭和拖动的通知窗口

3、​这就是我们插入的表格,填充通知内容​,剩下最后一行填,哪里添加关闭按钮。

dreamweaver创建可以关闭和拖动的通知窗口

dreamweaver创建可以关闭和拖动的通知窗口

4、​将光标移动到第三行的表格,然后点击表单下的按钮选项​

dreamweaver创建可以关闭和拖动的通知窗口

5、​打开按钮​添加对话框,在这里,一定要输入的就是id,这就相当于按钮的名字,一会要用到的

dreamweaver创建可以关闭和拖动的通知窗口

dreamweaver创建可以关闭和拖动的通知窗口

6、​切换到代码视图,将input标签下的value后面的值修改为‘关闭’,这样就改变了按钮上面的字样

dreamweaver创建可以关闭和拖动的通知窗口

7、​选中按钮以后,打行为面板,给按钮添加一个行为,在菜单中选择显示隐藏元素

dreamweaver创建可以关闭和拖动的通知窗口

8、​打开显示隐藏对话框,找到通知所在层的id,也就是apdiv1,点击下面的隐藏,然后点击姑百钠恁确定按钮。​

dreamweaver创建可以关闭和拖动的通知窗口

9、​这样基本的通知界面就做好了,怎么实现可以拖拽的效果呢?继续讲光标放到这个层以外的任何的溴腻男替位置,主要是选中body部分​

dreamweaver创建可以关闭和拖动的通知窗口

10、​切换到行为面板,添加拖动ap元素行为​

dreamweaver创建可以关闭和拖动的通知窗口

11、​弹出对话框,不要修改任何东西,知己点击确定按钮。​

dreamweaver创建可以关闭和拖动的通知窗口

12、​最后就完成了制作,点击关闭按钮可以关闭通知,鼠标拖动这个窗口还能移动该窗口。​

dreamweaver创建可以关闭和拖动的通知窗口

© 一点知识