Dreamweaver中导航栏右侧下拉三角该如何制作

 时间:2024-10-15 11:18:31

1、下拉三角虽然可以使用代码敲出来,不过太过于负责,最长用的就是自己制作一个三角形图片,将图片保存到相应的位置

Dreamweaver中导航栏右侧下拉三角该如何制作

2、打开Dreamweaver软件,做出一个导航栏来,然后将文件保存,html文件和图片文件保存在一个站点中

Dreamweaver中导航栏右侧下拉三角该如何制作
Dreamweaver中导航栏右侧下拉三角该如何制作

3、我们选择第一个标题栏,在其右侧中间添加下拉三角形,这样可以分析出:将li作为一个盒子,然后里面包含a和三角形;这样li是父集,a和img就是其中的子集;在处理图片文件时,经常会将图片转为块状,display:block;在第一个标题栏li内,插入图片,如下图所示

Dreamweaver中导航栏右侧下拉三角该如何制作
Dreamweaver中导航栏右侧下拉三角该如何制作

4、因为在ul内含有多个li标签,不易于对其进行修饰,在第一个li内添加一个类标签,如下图所示

Dreamweaver中导航栏右侧下拉三角该如何制作

5、在CSS样式中,添加对one_list的修饰,添加类标签名字,在修饰时,在前面会添加一个点,.one_list{};如下图所示,对li添加相对定位

Dreamweaver中导航栏右侧下拉三角该如何制作

6、对其子集img添加绝对定位,这样让img图片只能在父集li中移动方向

Dreamweaver中导航栏右侧下拉三角该如何制作

7、然后对img进行位置的移动,top:50%;距离顶部50%的位置,right:20px;距离右侧20px;浏览器中预览查看效果

Dreamweaver中导航栏右侧下拉三角该如何制作
Dreamweaver中导航栏右侧下拉三角该如何制作

8、right:20px;在里面移动为正值,如果想要移动到外面,只需要输入负值即可,right:-20px;

Dreamweaver中导航栏右侧下拉三角该如何制作
Dreamweaver中导航栏右侧下拉三角该如何制作
  • DW里面怎么设置首行缩进
  • DW滚动文字代码怎么添加
  • Dreamweaver文档中如何插入Div标签?
  • DW怎么在网页标题前加图标logo
  • 在Dreamweaver HTML文档中如何新建CSS样式?
  • 热门搜索
    感恩励志手抄报 文明伴我行手抄报内容 家长会手抄报 交通安全手抄报题目 保护环境的手抄报内容 一年级手抄报怎么写 快乐读书手抄报内容 法律伴我行手抄报内容 五年级读书手抄报 黑白手抄报图片