この記事では、H5の右側のアイコンと、Deep Beautificationページのユーザーエクスペリエンス効果を改善するためのドロップダウンボックスを選択します。
1。次に、最初に効果を見てみましょう！
2。H5の構造をもう一度見てください：
<div id = login-div> <div class = select-wrapper> <select id = selector1> <option value = deffoded selectd>システムを選択してください：</option> <option = 1> wechat-apple </op << /op </op </op </option> <option value = 2> wechat-android </option> </select> <img src = ossweb-img/arrow.png </div> <div class = select -WRAPPER> <選択ID = selector2> <オプション=無効選択> [チャネル]を選択してください：</option> <オプション値= 1>チャネル1> </option値> <オプション値= 2>チャンネル2 </option> <img src = ossweb-img/arrow.png.png </div> <div class = select-wrapper> <select id = selector3> <option value = distoded selectd>領域を選択してください：</option> <option値= 1>>> ue = 2>領域2 </option> </select> <img src = ossweb-img/arrow.png </div> <div class = select-wrapper> <select id = selector4> <option値= didabled selected >文字を選択してください：</option> <option値= 1>文字1 </option> <option値> <オプション値>文字2 </option> </select> <img src = ossweb-img/arrow.png < /div> <p id = nocation>単一のアカウントは1回しか受信できません</p> <img src = ossweb-img/comfire1.png </div>
3。スタイルの部分はSASSによって制御されています。変換する特別な事業はないので、CSSを簡単に交換するのは簡単です
@function rem（$ n）{@return $ n/$ rem*1rem;}＃login-div {backgrage：url（../ ossweb-img/kuang1.png）0 0 no-repeat：100 ％100％：rem（531）; ：height：rem（10）auto： 1px Solid＃23282d：＃92989f（24）; ：rem（41）; 20）＃92989F;マージンヘフト：rem（174）;}}4。分析：主に右側の右側の右側のアイコンの位置制御。属性の位置を利用して、ポジションで位置を制御します。
要約します上記は、HTML5の右側にあるドロップボックスを選択し、質問がある場合は、Xiaobianをお返事します。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！