Artikel ini memberi tahu Anda ikon ke sisi kanan kotak H5 dan pilih drop -down untuk meningkatkan efek pengalaman pengguna pada halaman kecantikan yang dalam
1. Kalau begitu mari kita lihat efeknya terlebih dahulu!
2. Lihatlah struktur H5 lagi:
<Div ID = Login-Div> <Div class = Select-wrapper> <pilih id = selector1> <option value = dispoded selectd> silakan pilih sistem: </option> <option = 1> weChat-apple </op < /OP </OP </OP </OP Tion> <Nilai opsi = 2> weChat-android </pection> </dectt> <img src = ossweb-img/arrow.png </div> <div class = pilih -wrapper> <pilih id = selector2> <option = disabled select> silakan pilih saluran: </pection> <option value = 1> saluran 1 </tiption> <option value = 2> saluran 2 </pection> <img src = OssWeb-IMG/Arrow.png.png </div> <div class = select-wrapper> <pilih id = selector3> <option value = dispoded selectd> silakan pilih wilayah: </option> <option value = 1> Ue = 2> Daerah 2 </tiption> </dectt> <img src = ossweb-img/arrow.png </div> <div class = select-wrapper> <pilih id = selector4> <option value = disabled selec ted > Pilih karakter: </tiption> <option value = 1> karakter 1 </pection> <option value = 2> karakter 2 </tiption> </tect> <img src = ossweb-img/arrow.png < /div> <p id = natu> satu akun hanya dapat menerima sekali penghargaan </p> <img src = ossweb-img/comfire1.png </div>
3. Bagian gaya dikendalikan oleh Sass. Tidak ada operasi khusus yang harus diubah, jadi mudah untuk menggantikan CSS
@function Rem ($ n) {@return $ n/$ rem*1rem;} #login-div {latar belakang: url (../ ossweb-img/kuang1.png) 0 0 no-rePeat; % 100%; Tinggi; 1px Solid #23282D; : 41); 20); Margin-heft: rem (174);}}4. Analisis: Terutama kontrol posisi ikon sisi kanan sisi kanan kanan. Memanfaatkan posisi atribut untuk mengontrol posisi dengan kepemilikan: absolut;
MeringkaskanDi atas adalah kotak drop -down HTML5 dan pilih ke sisi kanan HTML5 dan pilih. Saya harap ini akan membantu semua orang. Terima kasih banyak atas dukungan Anda untuk situs web VEVB Wulin!