純CSS開發的兩級選單模型

2021-09-06 03:44:04 字數 3968 閱讀 6119

自從做完畢業設計,好久都沒有折騰過div+css了,雖然ccs裡面的屬性就那麼幾個,可是要是真認真研究出來,其實還是可以做出蠻多的東西的呢!~特別css ,在網上看到太多有關它的「光榮事蹟」,特別的牛氣哄哄。所以說,對它頂禮膜拜一點也不過分。

其實,參照《w3c標準深入體驗》 css做二級選單,網上也很多,今天我也在這裡班門弄斧一下。

我想說的是,用css 開發 級聯的二級選單,其實不算難,只要理解幾個東西。比如  當一進入的時候,把子選單給隱藏了;當把滑鼠移動到父級選單的時候,把它下面的子選單給顯示出來;還有就是我覺得很重要的就是要比較深刻的理解 絕對定位(absolute)和相對定位(relative)的概念,這樣就能把子選單的位置定在恰當的位置。

下面是html的**:主要就是用ul來進行。

<

div

class

="menu"

>

<

ul>

<

li><

a class

=""href

="">首頁a

>

<

ul>

<

li><

a href

=""title

="">註冊a

>

li>

<

li><

a href

=""title

="">登入a

>

li>

<

li><

a href

=""title

="">登出a

>

li>

<

li><

a href

=""title

="">

行業新聞

a>

li>

ul>

li>

<

li><

a class

=""href

="">

商務中心

a>

<

ul>

<

li><

a href

=""title

="">

客戶首單

a>

li>

<

li><

a href

=""title

="">

新建任務單

a>

li>

<

li><

a href

=""title

="">

客戶單跟蹤

a>

li>

<

li><

a href

=""title

="">

歷史往來記錄

a>

li>

<

li><

a href

=""title

="">

業務簽收

a>

li>

ul>

li>

<

li><

a class

=""href

="">

配送中心

a>

<

ul>

<

li><

a href

=""title

="">

新建配送單

a>

li>

<

li><

a href

=""title

="">

車輛檢查

a>

li>

<

li><

a href

=""title

="">

業務跟蹤

a>

li>

ul>

li>

<

li><

a class

=""href

="">

運輸中心

a>

<

ul>

<

li><

a href

=""title

="">

新建派車單

a>

li>

<

li><

a href

=""title

="">

車輛跟蹤

a>

li>

ul>

li>

<

li><

a class

=""href

="">

系統維護

a>

<

ul>

<

li><

a href

=""title

="">

城市資料

a>

li>

<

li><

a href

=""title

="">

集團公司資訊

a>

li>

<

li><

a href

=""title

="">

部門資訊

a>

li>

<

li><

a href

=""title

="">

員工資訊

a>

li>

<

li><

a href

=""title

="">

倉庫資料

a>

li>

ul>

li>

<

li><

a class

=""href

="">

我的任務

a>

<

ul>

<

li><

a href

=""title

="example one"

>

我提交的任務

a>

li>

<

li><

a href

=""title

="">

我收到的任務

a>

li>

<

li><

a href

=""title

="">

被退回的任務

a>

li>

ul>

li>

<

li><

a class

=""href

="">

技術支援

a>

<

ul>

<

li><

a href

=""title

="">

技術架構

a>

li>

<

li><

a href

=""title

="">

應用說明

a>

li>

<

li><

a href

=""title

="">

a>

li>

ul>

li>

ul>

<

div

class

="clear"

>

div>

div>

下面就是css**了:

都挺好理解的~在把這圖給貼上吧,效果圖如下:

mybatis的兩級快取

mybatis的快取有兩種,分為一級快取和二級快取,它們的作用域不同。一級快取我個人也叫session快取,它預設是開啟的,不可配置的。為啥叫session快取,是因為它的作用域是session範圍內的,也就是說同乙個session的情況才能使用到一級快取,目前我遇到的情況就是在乙個事務內查詢兩次資...

兩級節點的樹

兩級節點的樹 效果圖 說明 這是只顯示兩級節點的樹,並且窗體載入的時候樹就成展開形式,並不需要非同步載入!jsp 初始投訴分類 function p initpreclass single true function listcomplain classid d5 gridmanager.loadd...

純CSS實現3級導航選單效果。

href 導航1a class item02 class arrow right span href 李四導航2a href 李四導航3a li href 李四導航3a li ul li ul li class item01 class arrow right span href 導航1a clas...