html下拉菜单怎么做?html下拉菜单的代码实例介绍


本文摘自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>

就这样一个简单的下拉菜单就完成了,我们来看看效果:

tuyi.png

这样是最基础的,如果加个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>

虽然多了点,可做成的效果可是很好的,让我们看看在浏览器中的怎么显示的吧。

tuer.png

这个是刚刷新的样式,现在看看鼠标放上去之后的变化:

tusan.png

完成之后就是这个样子,大家也可以去用这个代码试试,或者可以自己敲出这样代码出来,这样的样式,才是我们平时逛网站的时候的样子,一把鼠标移开这个效果就又恢复了上图的样式。

本篇关于HTML下拉菜单的文章到这也就结束了,有问题的可以在下方提问。

【小编推荐】

html中的document对象是什么?一篇文章让你了解document对象

HTML中添加图片的代码是什么?html如何正确的添加图片路径?

以上就是html下拉菜单怎么做?html下拉菜单的代码实例介绍的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html 基础

html article标签怎么用

js的dom是什么?

html怎么设置文本框边框颜色

html写网页如何布局

html frameset标签怎么用?html frameset标签属性详解

html的特点

html5 表单、select 下拉、textarea多行文本的介绍

html中的label标签怎么设置高度?label标签的使用方法介绍

link标签是什么意思?

更多相关阅读请进入《select》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...