html css練習(二)下拉列表

2021-10-22 11:23:54 字數 1158 閱讀 7547

1. 文字下拉列表

2.按鈕下拉列表

效果:當滑鼠放在文字上時,出現下拉列表

<

!doctype html>

"en"

>

"utf-8"

>

5.下拉列表<

/title>

/* 滑鼠放的地方 */

.dropdown

.dropdown-content

/* 組合選擇器 */

.dropdown:hover .dropdown-content

<

/style>

<

/head>

="dropdown"

>

here!

<

/span>

="dropdown-content"

>

can you see me?

<

/span>

<

/div>

<

/div>

<

/body>

<

/html>

<

!doctype html>

"en"

>

"utf-8"

>

下拉列表2.0

<

/title>

/* 設定button的樣式 */

button

button:hover

button:active

ul/* 組合選擇器 */

button:hover ul

a<

/style>

<

/head>

下拉列表

<

!-- div 也可以有同樣的效果 --

>

"#">content111111111<

/a>

<

/li>

content2<

/li>

content3<

/li>

<

/ul>

<

/button>

<

/body>

<

/html>

1 8 9 下拉列表

使用select控制項定義下拉列表的基本語法格式如下 select name id option value 選項一 option option value 選項二 option option value 選項三 option select 1.在select中至少包含一對option 2.在opt...

1 5 下拉列表框

1.5 下拉列表框 1.5.1 基本形制 1.5.1.1 單選方式 下面是常見的單選下拉列表框 紐約倫敦 巴黎柏林 1.5.1.2 多選方式 下面是不常見的多選方式的列表框 紐約倫敦 巴黎柏林香港 1.5.1.3 分組方式 當選項過多容易紛亂時,可以將其分組顯示 北京上海 廣州深圳 杭州南京 蘇州東...

select2 下拉列表外掛程式

如何使用select2?1.1 通過cdn引用 將以下兩行 新增到html頁面,即完成了select2的引入 注意 還需引入jquery支援select2的使用 1.2 通過離線引用 1.2.1 引入js資源庫 因此引入路徑為 js select2.min.js 1.2.2 引入css樣式 sele...