css css製作下拉列表

2021-08-14 02:20:33 字數 1042 閱讀 8553

css基礎樣式:

ul

/*使用左浮動製作水平選單*/

li li

a, .dropbtn

lia:hover,

.dropdown

:hover

.dropbtn

.dropdown

.dropdown-content

.dropdown-content

a .dropdown-content

a:hover

/*下拉列表 hover時候改變display*/

.dropdown

:hover

.dropdown-content

html**:

class="active"

href="#home">主頁a>

li>

href="#news">新聞a>

li>

class="dropdown">

href="#"

class="dropbtn">下拉列表a>

class="dropdown-content">

href="#">鏈結 1a>

href="#">鏈結 2a>

href="#">鏈結 3a>

div>

div>

ul>

導航欄上的下拉列表h3>

滑鼠移動到 "下拉列表" 鏈結先顯示下拉列表。p>

小結:

1.css選擇器組合不要超過三層。

2.注意hover的寫法。

.dropdown

:hover

.dropdown-content

3.div是層級巢狀,組合選擇器時注意權重,小心樣式覆蓋問題。

4.a標籤是內聯元素。注意常用的內聯元素和塊級元素。

5.display是個重要的屬性,需要多用多體會。

Unity UGUI 製作下拉列表

1.新建scroll view 2.找到viewport下的content,新增vertical layout group 垂直布局 元件 padding 表示填充 spacing 表示 每個 item 之間的距離。child alignment 表示對齊方式。child force expand ...

多級下拉列表導航製作

水平導航選單的製作思路 1 進行初始化的設定,將文件中所有元素的margin和padding設為0 2 將所有的a元素設定為塊元素,去掉下劃線,新增背景色 c和padding值 3 滑鼠移入li時改變子元素a的背景色,此處應為 li hover a 意思為滑鼠劃過li時,其直屬的子元素背景色改變 d...

Excel多級下拉列表製作

通過excel2010中的資料有效性實現多級聯動下拉列表的製作,多級聯動下拉列表就是第一列選擇了某項,第二列則會提供相對應的選項供我們選擇。現在excel2010可以實現這樣的效果,主要利用indirect函式和資料有效性,操作演示詳見下面兩個gif動態演示圖。1 excel 2010中建立二級下拉...