下拉列表怎麼寫
- 綜合知識
- 關注:1.81W次
方法如下: 方法一:HTML1、建立CSS選單的HTML程式碼框架。
我們使用class=“nav”屬性的'div'標籤作為選單的容器。在截圖中,在圖示的HTML程式碼中,一個簡單的無序列表(ul)來表示主選單項。
2、在主選單區域中新增連結。在本步驟中,在無序列表(ul)每一項上新增連結。
3、在“關於我們(About Us)”下方LI標籤內新增一個無序列表,它代表其子選單的連結。4、在HTML程式碼中新增樣式錶鏈接。
目前我們已經完成了HTML程式碼,其內容是一個清晰的選單和子選單的層次佈局結構。我們使用外接的CSS樣式表,因此需要在程式碼的'head'區域新增樣式錶鏈接。
方法二:CSS1、建立CSS檔案。完成HTML框架程式碼後,我們需要使用樣式表來實現下列選單功能。
我們使用CSS選擇器來定位HTML中的選單項,因此無需在HTML中新增額外的ID或class屬性。我們通過UL內嵌UL的方式來定位子選單,並使用display:none;屬性 將其隱藏。
在滑鼠懸停在LI元素上時,我們需要將其轉換為block模式,重新顯示相應的子選單,而>命令可以定位滑鼠懸停位置的LI元素。2、使用CSS樣式表顯示主選單。
position:relative;宣告讓子選單根據主選單相對位置顯示。display:inline-block;宣告可以將選單調整到合適寬度。
3、設定滑鼠懸停時的字型漸變顏色。圖示中的程式碼在懸停時,將連結變為深色漸變背景和白色文字的字型。
4、使用樣式表顯示子選單。當前子選單樣式繼承主選單元素。
我們要讓子選單項垂直顯示在主選單項下方。5、定位下拉選單,並將選單項對齊。
這將會同時去除灰色背景。position:relative;宣告必須新增到列表項頂端。
position:absolute;宣告必須新增到相對位置定位的列表中。下拉選單在計算機應用中,下拉式選單是選單的一種表現形式。
具體表現為:當用戶選中一個選項後,該選單會向下延伸出具有其 他選項的另一個選單。下拉式選單通常應用於把一些具有相同分類的功能放在同一個下拉式選單中,並把這個下拉式選單置於主選單的一個選項下。
下拉選單內的項 目可以據需要設定為多選或單選,可以用來替代一組複選框(設定為多選)或單選框(設定為單選)。這樣比複選框組或單選框組的佔用位置小,但不如它們直觀。
2. 下拉選單怎麼寫樣式給你看看這段程式碼:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 1/DTD/xhtml1-transitional.dtd">
<meta ; charset=gbk" />