Mari kita ambil contoh lain yang dikatakan seseorang hari ini: menu drop-down CSS murni:
Diagram reproduksi
Implementasi ini sangat sederhana, terutama: penggunaan transisi atribut hover dan transisi.
Kode:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <iteme> css </iteme> <tyle> *{margin: 0; Padding: 0; font-size: 16px; Font-Family: "Microsoft Yahei"; } #container {width: 100px; margin: 0 otomatis; Teks-Align: tengah; Posisi: kerabat; } #Container UL {List-style: None; } #container span {display: inline-block; Lebar: 100px; Tinggi: 30px; Line-Height: 30px; kursor: pointer; } #container ul {height: 0; Lebar: 100px; meluap: tersembunyi; Transisi: Semua 1s; Posisi: Absolute; Atas: 30px; Kiri: 0px; } #container: hover ul {height: 330px; } #container ul li {latar belakang: #eee; margin-top: 3px; kursor: pointer; Tinggi: 30px; Line-Height: 30px; } </tyle> </head> <body> <v id = "container"> <span> seluler </span> <ul> <li> 1 di sini </li> <li> 2 di sini </li> <li> 3 di sini </li> <li> 4 di sini </li> 5 di sini </li> <li> 6 di sini </li> <li> </li> <li> 5 di sini </li> <li> 6 di sini </li> <li> </li> <li> 5 di sini </li> <li> 6 di sini </li> <li> </li> <li> 5 di sini </li> <li> 6 di sini </li> <li> </li> <li> 5 di sini </li> <li> 6 Di sini </li> <li> </li> <li> 5 HERE </li> <li> 6 Di sini </li> <li> </li> <li> 5 HERE </li> <li> 6 Di sini </li> <li> </li> <li> Di sini </li> </ul> </div> </body> </html>Karena UL adalah objek penskalaan, itu harus dipisahkan dari aliran dokumen. Ini tidak akan mempengaruhi tata letak saat praktis, berikan saja posisi absolut.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.