在瀏覽網站的時候,我們常常可以看到下拉選單的效果,所以網頁的開發過程中下拉選單有時是必須使用的,今天的這篇文章就來給大家分享一下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中文網其他相關文章!