dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】

时间:2022-01-05 来源:未知网络 作者:996建站网

dreamweaver制作下拉框教程:

1、打开一个Dreamweaver项目。双击该项目的文件。如果要创建新的Dreamweaver项目,则可以打开Dreamweaver,依次单击“ 文件”,“ 新建”,然后按照屏幕上的提示进行操作。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

2、创建一个有序列表。为了创建一个下拉菜单,您必须至少有一个项目符号项。您可以通过以下方法关闭CSS(单击“ 查看”菜单项,选择“ 样式渲染”,然后单击“ 显示样式”,如果已选中,则单击“ 显示样式”),单击要添加该点的位置,单击“项目符号”图标窗口,然后输入点的名称。然后,您应该先打开CSS,然后再继续。

此处的点名称将用作下拉菜单的激活器(例如,悬停或轻击以打开下拉菜单的按钮)。

如果您已经有要转换为下拉菜单的列表项,请跳过此步骤。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

3、确定您的列表名称。单击“ 代码”选项卡,并确保您位于“ 源代码”设置上,然后向下滚动到已排序列表的代码(该代码将位于“ <ul>”标记和“ </ ul>”标记之间)。顶部“ <ul>”标签上方的“ <div id =“ name”>”标签。引号中的单词是您列表的名称。[1]

如果看不到名称,请在标签上方直接插入标签<div id="name">(名称是列表的首选名称)<ul>。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

4、删除项目符号点。通过单击“ 设计”选项卡,然后单击窗口右上角的“ CSS设计器”选项卡,确保您在正确的位置,然后执行以下操作:

单击“选择器”标题右侧的+。

键入#name ul其中“名称”是列表名称的地方。

按↵ Enter两次。

向下滚动并在CSS Designer选项卡底部的窗格中单击list-style-type。

在出现的弹出菜单中单击无。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

5、更改您的排序列表以水平显示。为此:

单击“选择器”标题右侧的+。

键入#name li其中“名称”是列表名称的地方。

在“ CSS设计器”选项卡底部的窗格中找到“浮动”标题。

单击“浮动”标题右侧的向左按钮。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

6、为您的列表添加一个活动标签。单击“选择器”右侧的+按钮,然后键入#name a(其中“名称”是列表名称),然后按↵ Enter两次。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

7、添加背景色。如有必要,选择#name a item,然后单击CSS Designer窗格顶部的框形“ Background color”选项卡,选择background-color选项,然后选择要使用的背景色。

这是下拉列表项将使用的颜色。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

8、使您的列表项使用“阻止”格式。这种格式可确保当有人单击或单击列表中的项目时,他们可以通过在项目上方或下方略微选择来打开它,而不必精确选择文本:

确保在CSS设计器标签中选择了您的#name项目。

向下滚动到窗格中的“显示”标题。

单击“显示”标题的最右侧,然后在出现的菜单中单击“ 阻止 ”。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

9、如有必要,添加填充。如果您发现列表项彼此卡住,则可以通过执行以下操作在它们之间放置一些空间:

确保在CSS设计器标签中选择了您的#name项目。

向下滚动到窗格中的“填充”标题。

将顶部和底部的“ px”文本字段更改为至少读取5。

将左右“ px”文本字段更改为至少读取10。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

10、创建悬停颜色。当您将鼠标光标悬停在下拉菜单中的某个项目上时,将显示以下颜色:

单击“选择器”标题右侧的+。

输入#nave a:hover(其中“名称”是列表名称),然后按↵ Enter两次。

点击“背景色”标签。

选择背景色,然后选择比您使用的背景色浅的颜色。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

11、关闭CSS。单击“ 查看”菜单项,选择“ 样式渲染”,然后在弹出窗口中单击“ 显示样式”选项。

如果“ 显示样式”选项显示为灰色,请单击Dreamweaver文档中的任意位置,然后重试。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

12、创建下拉菜单内容。为此,您可以在要用作下拉菜单按钮的项目符号点下方添加子点:

单击要转换为下拉菜单的列表项目右侧的,然后按↵ Enter。

按。Tab ↹

输入第一个下拉菜单项的名称,然后按↵ Enter。

输入下一个下拉菜单的名称,然后按↵ Enter并根据需要重复。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

13、将下拉菜单内容绑定到项目符号项。为此:

单击“选择器”旁边的+,然后键入#name ul ul并按↵ Enter两次。

向下滚动并单击显示,然后在弹出菜单中单击无。

查找并单击位置,然后在弹出菜单中单击绝对。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

14、自行创建下拉菜单。您必须添加另一个选择器来执行此操作:

单击“选择器”旁边的+,然后键入#name ul li:hover > ul并按↵ Enter两次。

查找并单击显示,然后在出现的弹出菜单中单击阻止。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

15、使下拉菜单的内容垂直显示。默认情况下,下拉菜单内容将显示在水平栏中,但是您可以通过执行以下操作将其强制为垂直列:

单击“选择器”旁边的+,然后键入#name ul ul li并按↵ Enter两次。

找到“浮动”标题。

单击“浮动”标题右侧的“无”()选项。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

16、保存您的项目。按Ctrl+S(Windows)或⌘ Command+S(Mac)。

如果为此项目创建了新的Dreamweaver文件,则需要输入名称,选择保存位置,然后单击“ 保存”以保存文件。

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图

dreamweaver下拉框怎么做?【dreamweaver 下拉框教程】插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序