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的项目实战【视频+工具+系统路线图】全栈工程师学习路线以及规划都有整理,分享给小伙伴)点:学习前端,我们是认真的