html下拉菜單怎么做?高手教你如何在HTML和CSS中創(chuàng)建下拉菜單

html下拉菜單怎么做?html下拉菜單代碼是什么?這些對于剛剛?cè)腴T的新手,還不是很明白,下面高手教你如何在HTML和CSS中創(chuàng)建下拉菜單?

很多人都會遇到將鼠標(biāo)懸停在導(dǎo)航上,會出現(xiàn)下拉菜單; 一般出現(xiàn)下拉菜單,用戶就可以點擊其中一個選項來訪問來進入另外一個網(wǎng)址。

web前端全棧資料粉絲福利(面試題、視頻、資料筆記、進階路線)



一:首先我們打開Notepad ++,如果使用Notepad ++的話,請在HTML窗口頂部的“ 語言”菜單設(shè)置成“H”。

二:創(chuàng)建下拉菜單代碼,輸入以下代碼以確定下拉菜單的大小和顏色,確保將“?!碧鎿Q為您要使用的數(shù)字(數(shù)字越大,下拉菜單越大)。您還可以使用您選擇的任何顏色(或HTML顏色代碼)替換“背景顏色”和“顏色”值。

三:表示您要將鏈接放在下拉菜單中,也可以將添加指向下拉菜單的鏈接,您可以通過輸入代碼將它們放在下拉菜單中。

四:創(chuàng)建下拉菜單的外觀,可以確定下拉菜單的大小,以及其他網(wǎng)頁元素時的位置以及顏色。請務(wù)必將“min-width”部分的“#”替換為編號(例如250),并將“background-color”標(biāo)題更改為自己喜歡的顏色。

五:在下拉菜單的內(nèi)容中添加細節(jié),當(dāng)我們解決了下拉菜單的文本顏色和下拉菜單按鈕的大小,請務(wù)必將“?!碧鎿Q為像素數(shù),來指定按鈕的大小。

六:編輯下拉菜單的懸停操作,將鼠標(biāo)懸停在下拉菜單按鈕上時,需要更改幾種顏色,第一個“背景顏色”線指的是在下拉菜單中選擇出現(xiàn)的顏色變化。

七:下一步我們來創(chuàng)建下拉按鈕的名稱,輸入以下代碼,確保將“名稱”替換為您想要的下拉按鈕名稱(例如,菜單):

< divclass = “dropdown” >

?< buttonclass = “dropbtn” >名稱< / button>

< divclass = “dropdown-content” >

八:添加下拉菜單的鏈接,下拉菜單中的每個子選項都應(yīng)鏈接到某個內(nèi)容,可以是網(wǎng)站上的頁面或外部網(wǎng)站,可以添加到下拉菜單中,確保http://www.php.cn/使用鏈接的地址(保留引號)和“名稱”替換鏈接的名稱正常。

代碼實例:

<!DOCTYPE html>

<html>

<head>

<style>

.dropbtn {

????background-color: black;

????color: white;

????padding: #px;

????font-size: #px;

????border: none;

}

.dropdown {

????position: relative;

????display: inline-block;

}

.dropdown-content {

????display: none;

????position: absolute;

????background-color: lightgrey;

????min-width: #px;

????z-index: 1;

}

.dropdown-content a {

????color: black;

????padding: #px #px;

????text-decoration: none;

????display: block;

}

.dropdown-content a:hover {background-color: white;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: grey;}

</style>

</head>

<body>

<divclass="dropdown">

<buttonclass="dropbtn">Name</button>

<divclass="dropdown-content">

<a>Name</a>

<a>Name</a>

<a>Name</a>

</div>

</div>

</body>

</html>

效果如圖:


以上就是對html下拉菜單怎么做?高手教你如何在HTML和CSS中創(chuàng)建下拉菜單的全部介紹,需要更多內(nèi)容請關(guān)注我。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容