html下拉选择框;html下拉框_IT百科

在很多网站都有看到下拉框的功能，让我们一起来看看html如何制作下拉框。

新建一个html文件。如图

在html页面找打body标签，在这个标签里新建select标签，在select标签内创建option标签并设置内容。如图

代码：

</select>

保存好html文件后使用浏览器打开，即可看到效果。如图：

所有代码。可直接把所有代码复制到html文件上运行即可看到效果。如图：

所有代码：

<!DOCTYPE html>

<html>

<head>

<title>下拉选择框</title>

</head>

<body>

</select>

</body>

</html>

以将 下拉菜单嵌入由盒子中充当的按钮 为例来说明问题，以类选择器为button的盒子当作触发下拉菜单的容器(即是当鼠标移动到该按钮上面出现下拉框)，则必须将hover属性附着在按钮盒子的上一级盒子上，但是通常上一级的盒子比当前盒子大或者里面有多个小盒子，那么鼠标放在按钮外部和上一级盒子的内部仍然可以将下拉带单显示，于是尝试在按钮盒子的上一级加上了一个与按钮大小一样的按钮，并将下拉菜单附着于此。

第一想法就是给未显示（默认隐藏时）的下拉菜单栏添加，其结果就是边框一直处于显示状态，在下拉菜单栏隐藏时无法隐藏。解决方法就是将边框的属性加在hover属性里面，未显示时的边框设置为零。

未显示时属性为（ display: none）显示时属性为（display: block），结果就是能够显示与隐藏，但是动画效果没有表现出来。想不通...

除了使用display的属性之外，还可以使用：下拉菜单栏的隐藏通过使菜单栏的属性overflow: hidden 来实现。

list中（隐藏时）的height设置为零，hover中（显示时）的height设置为110px，使用动画transition属性来过渡。

同样是通过overflow: hidden实现隐藏，但是是通过visibility:visible显示隐藏，动画效果仍然有效。

就是相比方法二将hover里面的属性由display: block改为visibility:visible

以上均为鄙人实践的结果，理解甚微，纰漏繁多，还请斧正。

比如说：下拉菜单收起时的动画没有搞明白怎样控制，而且下拉菜单收起时的动画没有边框；假如使用visibility: hidden和visibility:visible实现隐藏和显示时，会出现动画效果播放完之前，下拉菜单栏内容已经展示出来。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/11902644.html

html下拉选择框;html下拉框

发表评论

评论列表（0条）