html下拉菜单怎么做?html下拉菜单的代码实例介绍
第一我们要知道html下拉菜单的代码是啥?
很明显是select元素可创立单选或多选菜单。
<select>元素中的<option>标签用于定义列表中的可用选项。
提醒:select 元素是一种表单控件,可用于在表单中接受会员输入。
来看个下拉菜单代码的实例:
创立带有 4 个选项的选中列表:
<select> <option value ="volvo">PHP中文网</option> <option value ="saab">baidu</option> <option value="opel">腾讯</option> <option value="audi">新浪</option> </select>
就这样一个简便的下拉菜单就完成了,我们来看看结果:
这样是最根基的,假如加个css样式的话,就可以把这个表单做的很美妙了。根本上没什么网站就这么做上去的,都是试试手的状况才这么做。
此刻让你们看看真正的网站做的这种下拉框都像什么模样。
这里有个完全的代码实例:
<!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下拉菜单的代码实例介绍的具体内容,更多请关注百分百源码网其它相关文章!