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

資訊專欄INFORMATION COLUMN

UI 積累之select section

monw3c / 412人閱讀

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

需求

一個select下拉列表,有border, bg, 還有從設計拿來的向下的箭頭。當點擊的時候能有下拉列表。
大概UI如下

具體思路

需要的dom有三個

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

select ----> 作用:點擊時,彈出的下拉選項

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

dom具體是:

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

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

雪碧圖

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

雪碧圖的運用在第四象限,即如上例,應用第一個箭頭,則創建一個div,長寬為12*12,運用的樣式為:

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

如要運用第二個箭頭,那么運用的樣式為:

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

自行類推

另一套方案

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

dom仍舊是:

  • <option id="aago4"><dl id="aago4"></dl></option>
  • <button id="aago4"></button>
  • <option id="aago4"></option>
    <