บทความนี้จะบอกไอคอนทางด้านขวาของ H5 และเลือกกล่อง Drop -Down เพื่อปรับปรุงเอฟเฟกต์ประสบการณ์การใช้งานในหน้าการตกแต่งลึก
1. มาดูเอฟเฟกต์ก่อน!
2. ดูโครงสร้างของ H5 อีกครั้ง:
<div id = login-div> <div class = select-wrapper> <select id = selector1> <ตัวเลือกค่า = dispoded selectd> โปรดเลือกระบบ: </optup> <opovie = 1> weChat-Apple </op </option> /op </op </op </op tion> <ตัวเลือกค่า = 2> weChat-Android </opotion> </select> <img src = ossweb-img/arrow.png </div> <div class = เลือก -wrapper> <select id = selector2> <opotion = ปิดการใช้งานเลือกเลือก> โปรดเลือกช่อง: </optural> <opption value = 1> channel 1 </potion> <opovie value = 2> channel 2 </potion> <img src = ossweb-img/arrow.png.png </div> <div class = select-wrapper> <select id = selector3> <ตัวเลือกค่า = dispoded selectd> โปรดเลือกภูมิภาค: </ตัวเลือก> <ตัวเลือกค่า = 1> ue = 2> regions 2 </opturf> </select> <img src = ossweb-img/arrow.png </div> <div class = select-wrapper> <select id = selector4> <opturf value = ปิดใช้งาน selec ted > โปรดเลือกอักขระ: </ตัวเลือก> <ตัวเลือกค่า = 1> อักขระ 1 </ตัวเลือก> <ค่าตัวเลือก = 2> อักขระ 2 </petion> </select> <img src = ossweb-img/Arrow.png < /div> <p id = ประกาศ> บัญชีเดียวสามารถรับได้เมื่อได้รับรางวัล </p> <img src = ossweb-img/comfire1.png </div>
3. ส่วนสไตล์ถูกควบคุมโดย SASS ไม่มีการดำเนินการพิเศษที่จะเปลี่ยนดังนั้นจึงเป็นเรื่องง่ายที่จะเปลี่ยน CSS
@function rem ($ n) {@return $ n/$ rem*1REM;} #login-div {พื้นหลัง: url (../ ossweb-img/kuang1.png) 0 0 ไม่มีการทำซ้ำ; ความกว้าง 100%; : ความสูง: REM (50); 1px Solid #23282d; : REM (41); 20); สี: #92989F; ระยะขอบ-heft: rem (174);}}4. การวิเคราะห์: ส่วนใหญ่การควบคุมตำแหน่งของไอคอนทางด้านขวาของด้านขวาของด้านขวา การใช้ตำแหน่งของแอตทริบิวต์เพื่อควบคุมตำแหน่งด้วยความเป็นไปได้: Absolute;
สรุปด้านบนเป็น HTML5 และเลือกกล่องลดลงไปทางด้านขวาของ HTML5 และเลือก ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Vevb Wulin!