二級標籤的製作

2021-10-08 04:58:55 字數 1458 閱讀 7598

#很多網頁會用到二級標籤,那麼二級標籤是怎麼製作的,今天來介紹一下;

##首先,我們先寫一組一級標籤,然後在需要設定二級標籤的一級標籤裡面嵌入一組二級標籤,示例如下:

class

="menu"

>

>

首頁li

>

>

新聞

class

="menu_icon"

>

>

lorem ipsum dolor sit.li

>

>

lorem ipsum dolor sit.li

>

>

laudantium laborum dicta mollitia?li

>

>

expedita obcaecati similique omnis!li

>

ul>

li>

>

軍事

class

="menu_icon"

>

>

lorem ipsum dolor sit.li

>

>

lorem ipsum dolor sit.li

>

>

laudantium laborum dicta mollitia?li

>

>

expedita obcaecati similique omnis!li

>

ul>

li>

>

娛樂 li

>

>

人物li

>

>

遊戲li

>

>

生活li

>

>

綜藝li

>

>

汽車li

>

可見,在新聞和軍事兩欄裡,都有二級標籤的加入,那麼現在我們需要再來設定它的樣式。可以先把二級標籤隱藏,然後在設定一級元素相對定位,二級標籤絕對定位到合適的地方,為了便於分辨和頁面效果,我們還可以將ul的樣式去掉,把二級標籤背景顏色設定一下,示例如下:

.menu li

.menu .menu_icon

li:hover .menu_icon

頁面正常狀態如下:

當滑鼠移入有二級標籤的位置時,顯示如下:

這就是基本的二級標籤設定,希望大家指正。

二級選單的製作

閒話不多扯,前兩天學了二級選單的製作,豎形的耳機選單和橫形的二級選單,每種效果做了兩個demo。其實這是前天做的,但是因為一些事情,現在才貼上來,給各位新人分享一下,有什麼問題請指正。謝謝。一,豎形的二級選單。效果如下 如果豎起來,好像在豎中指,o o 部分 夏天秋天冬天 其中用了相對定位和絕對定位...

二級選單的製作與使用(1)

2021年7月,正式開始了產品經理的新路歷程,初涉產品經理崗位,選單製作佔據了我不少時間去搞定,二級選單是常見的操作樣式,為避免緊急情況下不知如何操作,記錄如下 效果如圖 一 用到的元件 axure 9.0元件庫中的矩形 阿里巴巴向量圖示庫中搜尋的一級選單圖示及向下箭頭。二 一級選單製作 使用滑鼠將...

HTML的select標籤二級聯動

直接上 霍霍霍霍 級聯下拉列表title select bigsel provinces style 是自己定義的乙個方法,用於根據id獲取元素 function v 一級 var p 投資入股類 資金運用類 保險業務類 利益轉移類 提供服務類 二級 p 01 投資入股 投資該保險公司發行的優先股 ...