国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

UI 積累之select section

Alliot / 707人閱讀

摘要:需求一個(gè)下拉列表,有還有從設(shè)計(jì)拿來的向下的箭頭。擠出文檔流做法有點(diǎn)惡心,不考慮擋住的話,那就無法做到點(diǎn)擊的時(shí)候出發(fā)的點(diǎn)擊事件除非用所以,讓變成透明。

需求

一個(gè)select下拉列表,有border, bg, 還有從設(shè)計(jì)拿來的向下的箭頭。當(dāng)點(diǎn)擊的時(shí)候能有下拉列表。
大概UI如下

具體思路

需要的dom有三個(gè)

div ----> 作用:定位置,設(shè)置背景樣式,包括border

select ----> 作用:點(diǎn)擊時(shí),彈出的下拉選項(xiàng)

span -----> 作用:顯示字

dom具體是:

Please select one option...
); } } export default App;
鞏固知識 背景顏色漸變
background:linear-gradient(#F8F8F8, #FDFDFD 30%, #E8E8E8);

設(shè)置背景顏色漸變---再也不用切背景圖啦!mb當(dāng)年bg_*.png這種圖真的切多了

雪碧圖

這里沒有例子,但是做項(xiàng)目的時(shí)候遇到,具體是有一張圖,包含了“黑,灰,紅”三色的箭頭
具體長寬是(12+12+12 )*12,靠你們自己腦補(bǔ)了。

雪碧圖的運(yùn)用在第四象限,即如上例,應(yīng)用第一個(gè)箭頭,則創(chuàng)建一個(gè)div,長寬為12*12,運(yùn)用的樣式為:

background:url(${arrow}) 0 0 no-repeat;

如要運(yùn)用第二個(gè)箭頭,那么運(yùn)用的樣式為:

background:url(${arrow}) 0 -24px no-repeat;

自行類推

另一套方案

holy shit差點(diǎn)忘了俺自己的土村方法,不過挺有意思的。

dom仍舊是: