دعونا نأخذ مثالًا آخر قاله أحدهم اليوم: قائمة المنسدلة CSS النقية:
رسم تخطيطي للتكاثر
إن تنفيذ هذا بسيط للغاية ، بشكل رئيسي: استخدام تحويم السمة والانتقال.
شفرة:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin: 0 ؛ الحشو: 0 ؛ حجم الخط: 16 بكسل ؛ Font-Family: "Microsoft Yahei" ؛ } #container {width: 100px ؛ الهامش: 0 Auto ؛ محاذاة النص: المركز ؛ الموقف: قريب } #container ul {style-style: none ؛ } #container span {display: inline block ؛ العرض: 100px ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ المؤشر: مؤشر. } #container ul {height: 0 ؛ العرض: 100px ؛ الفائض: مخفي. الانتقال: كل 1S ؛ الموقف: مطلق ؛ أعلى: 30 بكسل ؛ اليسار: 0px ؛ } #container: hover ul {height: 330px ؛ } #container ul li {background: #EEE ؛ الهامش: 3px ؛ المؤشر: مؤشر. الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ } </style> </head> <body> <div id = "container"> <span> mobile </span> <ul> <li> 1 هنا </li> 2 هنا </li> <li> 3 هنا </li> </li> هنا </li> </li> 5 هنا </li> </li> </li> هنا </li></ul> </viv> </body> </html>لأن UL هو كائن تحجيم ، يجب فصله عن تدفق المستند. لن يؤثر على التصميم عندما يكون عمليًا ، فقط أعطه موقفًا مطلقًا.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.