html下拉選單怎麼做？ html下拉式選單的實作方法
- 不言原創
- 2018-10-19 11:42:1521448瀏覽
在瀏覽網站的時候，我們常常可以看到下拉選單的效果，所以網頁的開發過程中下拉選單有時是必須使用的，今天的這篇文章就來給大家分享一下html下拉選單的實現方法，有需要的朋友可以參考一下。
話不多說，讓我們來直接看正文~
在html中有一個select標籤可以創建單選和多選菜單，select標籤中的option屬性用於定義列表中的可用選項。
下面我們就來看看html下拉選單的具體程式碼：
<html> <body> <form> <select name="cars"> <option value="city">城市</option> <option value="hefei">合肥</option> <option value="wuhu">芜湖</option> <option value="nanjing">南京</option> <option value="gaoyou">高邮</option> </select> </form> </body> </html>
html下拉式選單效果如下：
#在這裡說明一下：select 元素是一種表單控件，可用於在表單中接受使用者輸入。
上面的這個html下拉選單感覺太過單調，接下來我們就來看看利用css來實現一個好看一點的下拉式選單。
html css實作的下拉選單程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
width: 200px;
}
.b{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background: lightblue;
font-size: 30px;
}
.c{
height: 200px;
width: 100px;
display: none;
background: gray;
}
.b:hover{
background: green;
cursor: pointer;
}
.a:hover .c{
display: block;
}
a{
display: block;
text-decoration: none;
height: 40px;
text-align: center;
line-height: 40px;
color: #ccc;
}
a:hover{
background: green;
color: pink;
}
</style>
</head>
<body>
<div class="a">
<div class="b">城市</div>
<div class="c">
<a href="#">合肥</a>
<a href="#">南京</a>
<a href="#">芜湖</a>
<a href="#">高邮</a>
<a href="#">上海</a>
</div>
</div>
</body>
</html>#下拉選單效果如下：
以上是html下拉選單怎麼做？ html下拉式選單的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn