本文摘自PHP中文网,作者寻∝梦,侵删。
本篇文章主要的介绍了关于HTML select标签下拉菜单的做法实例,还有一个html的一些网站的下拉菜单的用法都放在了文章中,下面就让我们一起来看看这篇文章吧首先我们要知道html下拉菜单的代码是什么?
很明显是select元素可创建单选或多选菜单。
<select>元素中的<option>标签用于定义列表中的可用选项。
提示:select 元素是一种表单控件,可用于在表单中接受用户输入。
来看个下拉菜单代码的实例:
创建带有 4 个选项的选择列表:
1 2 3 4 5 6 | < select >
< option value = "volvo" >PHP中文网</ option >
< option value = "saab" >百度</ option >
< option value = "opel" >腾讯</ option >
< option value = "audi" >新浪</ option >
</ select >
|
就这样一个简单的下拉菜单就完成了,我们来看看效果:
这样是最基础的,如果加个css样式的话,就可以把这个表单做的很美观了。基本上没什么网站就这么做上去的,都是试试手的情况才这么做。
现在让你们看看真正的网站做的这种下拉框都像什么样子。
这里有个完整的代码实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
< html >
< head >
< meta charset = "UTF-8" >
< title ></ title >
< style > .a{ width: 205px; } .b{ width: 200px; height: 50px; background-color: limegreen; text-align: center;
line-height: 50px; color: #ffffff; } .c{ width: 200px; height: 300px; background-color: gainsboro; display: none;
/*visibility: hidden;*/ } ul{ list-style: none; margin-left: -40px; } ul li{ line-height: 50px; display: block;
width: 200px; text-align: center; } .a:hover{ cursor: pointer; } .a:hover .c{ display: block; } .a:hover
.b{ background-color: green; } li:hover{ background-color: gray; color: #FFFFFF; }
</ style >
</ head >
< body >
< div class = "a" >
< div class = "b" >PHP中文网</ div >
< div class = "c" >
< ul > < li >HTML在线学习</ li >
< li >PHP在线学习</ li >
< li >python在线学习</ li >
< li >html5在线学习</ li >
</ ul >
</ div > </ div >
</ body >
</ html >
|
虽然多了点,可做成的效果可是很好的,让我们看看在浏览器中的怎么显示的吧。
这个是刚刷新的样式,现在看看鼠标放上去之后的变化:
完成之后就是这个样子,大家也可以去用这个代码试试,或者可以自己敲出这样代码出来,这样的样式,才是我们平时逛网站的时候的样子,一把鼠标移开这个效果就又恢复了上图的样式。
本篇关于HTML下拉菜单的文章到这也就结束了,有问题的可以在下方提问。
【小编推荐】
html中的document对象是什么?一篇文章让你了解document对象
HTML中添加图片的代码是什么?html如何正确的添加图片路径?
以上就是html下拉菜单怎么做?html下拉菜单的代码实例介绍的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
html label标签是什么意思?html label标签作用和属性的用法实例
纯css+div隐藏滚动条的实现方法(代码示例)
html中table边框颜色怎么设置
html怎么取消滚动
html怎么让图片居中
在html里select标签有哪些用法
html cite标签怎么用
html怎么导入背景图
html给图片设置链接的方法
html <b>加粗与<strong>加粗标签区别
更多相关阅读请进入《select》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » html下拉菜单怎么做?html下拉菜单的代码实例介绍