高手教你如何在HTML和CSS中创建下拉菜单

最新推荐文章于 2023-07-20 20:36:22 发布

猿说前端

最新推荐文章于 2023-07-20 20:36:22 发布

阅读量1.3k

点赞数

文章标签： css html 前端 web前端前端入门

本文链接：https://blog.csdn.net/ITZ1992/article/details/106984528

版权

html下拉菜单怎么做？html下拉菜单代码是什么？这些对于刚刚入门的新手，还不是很明白，下面高手教你如何在HTML和CSS中创建下拉菜单？

很多人都会遇到将鼠标悬停在导航上，会出现下拉菜单; 一般出现下拉菜单，用户就可以点击其中一个选项来访问来进入另外一个网址。

一：首先我们打开Notepad ++，如果使用Notepad ++的话，请在HTML窗口顶部的“ 语言”菜单设置成“H”。

二：创建下拉菜单代码，输入以下代码以确定下拉菜单的大小和颜色，确保将“＃”替换为您要使用的数字（数字越大，下拉菜单越大）。您还可以使用您选择的任何颜色（或HTML颜色代码）替换“背景颜色”和“颜色”值。

三：表示您要将链接放在下拉菜单中，也可以将添加指向下拉菜单的链接，您可以通过输入代码将它们放在下拉菜单中。

四：创建下拉菜单的外观，可以确定下拉菜单的大小，以及其他网页元素时的位置以及颜色。请务必将“min-width”部分的“＃”替换为编号（例如250），并将“background-color”标题更改为自己喜欢的颜色。

五：在下拉菜单的内容中添加细节，当我们解决了下拉菜单的文本颜色和下拉菜单按钮的大小，请务必将“＃”替换为像素数，来指定按钮的大小。

六：编辑下拉菜单的悬停操作，将鼠标悬停在下拉菜单按钮上时，需要更改几种颜色，第一个“背景颜色”线指的是在下拉菜单中选择出现的颜色变化。

七：下一步我们来创建下拉按钮的名称，输入以下代码，确保将“名称”替换为您想要的下拉按钮名称（例如，菜单）：

> < divclass = “dropdown” >
> 
>  < buttonclass = “dropbtn” >名称< / button>
> 
> < divclass = “dropdown-content” >

八：添加下拉菜单的链接，下拉菜单中的每个子选项都应链接到某个内容，可以是网站上的页面或外部网站，可以添加到下拉菜单中，确保使用链接的地址（保留引号）和“名称”替换链接的名称正常。

代码实例：


> <!DOCTYPE html>
> 
> <html>
> 
> <head>
> 
> <style>
> 
> .dropbtn {
> 
>     background-color: black;
> 
>     color: white;
> 
>     padding: #px;
> 
>     font-size: #px;
> 
>     border: none;
> 
> }
> 
> .dropdown {
> 
>     position: relative;
> 
>     display: inline-block;
> 
> }
> 
> .dropdown-content {
> 
>     display: none;
> 
>     position: absolute;
> 
>     background-color: lightgrey;
> 
>     min-width: #px;
> 
>     z-index: 1;
> 
> }
> 
> .dropdown-content a {
> 
>     color: black;
> 
>     padding: #px #px;
> 
>     text-decoration: none;
> 
>     display: block;
> 
> }
> 
> .dropdown-content a:hover {background-color: white;}
> 
> .dropdown:hover .dropdown-content {display: block;}
> 
> .dropdown:hover .dropbtn {background-color: grey;}
> 
> </style>
> 
> </head>
> 
> <body>
> 
> <divclass="dropdown">
> 
> <buttonclass="dropbtn">Name</button>
> 
> <divclass="dropdown-content">
> 
> <ahref="http://www.php.cn/">Name</a>
> 
> <ahref="http://www.php.cn/">Name</a>
> 
> <ahref="http://www.php.cn/">Name</a>
> 
> </div>
> 
> </div>
> 
> </body>
> 
> </html>

效果如图：

以上就是对高手教你如何在HTML和CSS中创建下拉菜单的全部介绍，需要更多内容请关注我。

专门建立的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和需要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制作，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，我们是认真的

猿说前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高手教你如何在HTML和CSS中创建下拉菜单

html下拉菜单怎么做？html下拉菜单代码是什么？这些对于刚刚入门的新手，还不是很明白，下面高手教你如何在HTML和CSS中创建下拉菜单？很多人都会遇到将鼠标悬停在导航上，会出现下拉菜单; 一般出现下拉菜单，用户就可以点击其中一个选项来访问来进入另外一个网址。一：首先我们打开Notepad ++，如果使用Notepad ++的话，请在HTML窗口顶部的“ 语言”菜单设置成“H”。二：创建下拉菜单代码，输入以下代码以确定下拉菜单的大小和颜色，确保将“＃”替换为您要使用的数字（数字越大，下拉菜单越大）。
复制链接

扫一扫