首頁  >  文章  >  web前端  >  html下拉選單怎麼做? html下拉式選單的實作方法

html下拉選單怎麼做? html下拉式選單的實作方法

不言
不言原創
2018-10-19 11:42:1521464瀏覽

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

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下拉式選單的實作方法

##說明:上述程式碼中:hover 選擇器用於在使用者將滑鼠移到下拉按鈕上時顯示下拉式選單。

這篇文章到這裡就全部結束了,更多精彩內容大家可以追蹤php中文網的相關欄位! ! !


以上是html下拉選單怎麼做? html下拉式選單的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn