如何創建下拉式CSS菜單(Create Drop down CSS Menus)？

層疊樣式表（CSS）是一個用于描述超文本標記語言（HTML）或可擴展標記語言（XML）文檔格式的名稱。它可以用于任何類型的XML文檔，但最常用于用HTML編寫的網頁。CSS可用于在網頁上創建下拉菜單。下拉CSS菜單具有在訪問者使用鼠標懸...

層疊樣式表（CSS）是一個用于描述超文本標記語言（HTML）或可擴展標記語言（XML）文檔格式的名稱。它可以用于任何類型的XML文檔，但最常用于用HTML編寫的網頁。CSS可用于在網頁上創建下拉菜單。下拉CSS菜單具有在訪問者使用鼠標懸停在菜單上之前顯示的單個文本項，此時將顯示項目的整個列表。菜單是使用CSS標識和類標記創建的。類描述包含在兩個大括號之間。下拉式CSS菜單以ID選擇器開頭。此選擇器看起來像#，后跟ID名稱。您可以為ID命名任何內容，但它應該是描述性的，以便其他人可以閱讀您的代碼。例如，下拉菜單可以使用代碼drop1。使用類選擇器為下拉菜單中的第一項創建類，它看起來像句點。該類將是HTML列表元素的一部分。列表元素由字符“li”指定。通過鍵入“li.top”創建頂級類。類描述包含在兩個大括號之間。下面的示例顯示了列表中第一個項的完整CSS代碼：#drop1 li.top{font-family:Verdana，Geneva，san-serif；font-size:100%；color:#FF00FF；}下一步，為將隱藏在CSS菜單中第一項下的項創建一個類。該類將描述用字符“ul”指定的HTML無序列表。該描述與頂級菜單項基本相同，再加上一句話”顯示：無#59“在說明的開頭。這表示在指針懸停在下拉CSS菜單上之前，無序列表中的項目將被隱藏。下面是這部分CSS代碼的示例：#drop1 ul鏈接{顯示：無#59font-family:Verdana，Geneva，san serif；字體大小：100%；顏色：#FF00FF；}您希望下拉式CSS菜單顯示在HMTL文檔的其余部分上。否則，當訪問者將鼠標懸停在菜單上時，它會將文檔的其余部分向下推，為列表騰出空間。將position元素設置為absolute就可以了。設置位置的代碼是：#drop1{位置：絕對；}這就是下拉菜單的CSS部分所需的全部內容。下拉菜單的其余部分是在HTML文檔中使用“div”、“id”、“class”、“li”和“ul”元素創建的。“div”標記分隔文檔的菜單部分。鍵入div id=“drop1”創建下拉菜單部分。然后啟動無序列表使用HTML“ul”元素。將top類添加到第一個列表項，并為其余項添加link類。HTML代碼應該類似于：div id=“drop1”li class=“top”top item/li li class=“link”a href=“#”項/a/li li class=“link”a href=“35;”項/a/li li class=“link”a href=“35;”項/a/li/ul/div瀏覽器中，下拉式CSS菜單將在頁面上顯示為單個項目。當您將鼠標移到頂部項目上時，菜單的其余部分將顯示。頁面上的其余文本將不會移動，但菜單將隱藏一部分

發表于 2020-08-06 23:35
閱讀 ( 741 )
分類：電腦網絡

如何創建下拉式CSS菜單(Create Drop down CSS Menus)？

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章