html下拉選單怎麼做？ html下拉選單的程式碼實例介紹-html教學-PHP中文網

html下拉選單怎麼做？ html下拉選單的程式碼實例介紹

寻∝梦

發布： 2022-04-02 19:46:04

原創

111888 人瀏覽過

本篇文章主要的介紹了關於HTML select標籤下拉選單的做法實例，還有一個html的一些網站的下拉選單的用法都放在了文章中，下面就讓我們一起來看看這篇文章吧

html下拉選單怎麼做？ html下拉選單的程式碼實例介紹

首先我們要知道html下拉式選單的程式碼是什麼？

很明顯是select元素可建立單選或多選選單。

提示：select 元素是一種表單控件，可用於在表單中接受使用者輸入。

來看個下拉式選單程式碼的實例：

建立帶有4 個選項的選擇清單：

<select>
  <option value ="volvo">PHP中文网</option>
  <option value ="saab">百度</option>
  <option value="opel">腾讯</option>
  <option value="audi">新浪</option>
</select>

登入後複製

就這樣一個簡單的下拉選單就完成了，我們來看看效果：

html下拉選單怎麼做？ html下拉選單的程式碼實例介紹

這樣是最基礎的，如果加個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下拉選單的程式碼實例介紹