HTML يقلد وظيفة القائمة القائمة المنسدلة في موسوعة Baidu ، الرمز المحدد كما يلي:
العرض التوضيحي 1
<! doctype html public -// w3c // dtd xhtml 1.0 transitional // en http://www.w3 xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html ؛ charset = utf-8/> <title> html+css تقليد BAIDU Encyclopedia التنقل القائمة المنسدلة </title> <link href = css/style.css rel = to typeheet type = text/css/> class = nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = index on> <span> <a href =#> home </a> </span> </li> <li class = cat> <span> <a href =#> تصنيف </a> </span> <li> <li> HREF =#> الثقافة </a> </li> <li> <a href =#> الجغرافيا </a> </li> <li> <a href =#> geography </a> </li> <li> <a href =#> history </a> </li> <shref = <li> <a href = #> art </a> </li> <li> <a href =#> people </a> </li> <li> <a href =#> اقتصادي </a> </li> <li> <a href =#> href =#> Sports </a> </li> </li> </li> <li> <a href =#> Sports </a> </li> </li> <li> <a href = javaScript: void (0 )> incyclopedia </a> </li> <li> HREF =#> المتحف الرقمي </a> </li> <li> <A HREF =#> HREF =#> City Encyclopedia </a> </li> <li> <a href =#> encyclopedia encyclopedia </a> </li> <li> Encyclopedia </a> </li> </li></li><li> <a href =#> Encyclopedia </a> </li> </li> </li> <li> <a href = javaScript: void (0)> المستخدمين </a> </li> <li> HREF =#> خطة حرق الأحلام </a> </li> <li> <a href =#> Encyclopedia مهمة </a> </li> <li> <a href =#> encyclopedia mall </a> </li> </li> </li> <li> <liperation> <span> </li> <li class = coperation> <span> <a href =#> Encyclopedia Mall </a> </li> </li> </li> <li class = coperation> <span> <a href = javaScript: void (0)> تعاون موثوق </a> </span> <li> <li> <li> href =#> faq </a> </li> <li> <a href =#> معلومات الاتصال </a> </li> </li> </li> </li> <li> <a href =#> معلومات الاتصال </a> </li> </li> </li> </li> <li class = mobile> <s spanf = a href = Encyclopedia </a> </span> <ul> <li> <a href =#> العميل </a> </li> <li> <a href =#> إصدار الويب </a> </li> </li> </li> </li> </li> </ul>أسلوب
body {margin: 0 ؛ padding: 0 ؛ font-family: arial ، tahoma ، 'Microsoft yahei' ، '/5b8b/4f53' ، sans-serif ؛؛} .top-bar {background-color:#f3f3f3 ؛ text-align: center ؛ padding: 2.5em ؛} a {padding-bottom: 3px ؛ color: white ؛ decoration text: none ؛} ul {style style: none ؛ padding: 0 ؛ 0 ؛} li {text-align: center ؛} .NAV-BAR {الموضع: النسبية ؛ z-index: 1000 ؛ تجاوز: مخفي ؛ min-width: 900px ؛ الارتفاع: 45px ؛}. سهولة ؛} #5895d5 ؛ الحدود القاع: 1 بكسل الصلبة #3b92e9 ؛ الخلفية:#459df5 ؛} 00 ٪ ؛} : block ؛ العرض: 100 ٪ ؛ الهامش: 0 ؛ الارتفاع: 41px ؛ خط الارتفاع: 41px ؛} > li.special ، ul> li.user ، ul> li.cooperation ، ul> li.mobile {width: 120px ؛} ul> li 1px #3a6fa2 ؛ الهامش: 10px 0 6px} ul.nav-content-box> li> ul: بعد {الرؤية: hidden ؛ display: block ؛ font-size: 0 ؛ content: ؛ واضح: كلاهما ؛ الارتفاع: 0} .NAV-Content-box> li: hover> ul {border-right: none ؛ padding-right: 1px ؛} ul.nav-content-box> li> ul> li {float: left ؛ width: 10 0 ٪ ؛ خط الارتفاع: 2 ؛ النصوص النصية: المركز ؛} ul.nav-content-box> li.cat> ul> li {width: 49 ٪ ؛} ul.nav-content-box> li> ul> li> a {display: block ؛ width: 100 ٪ ؛} لخصما سبق هو وظيفة القائمة المنسدلة لـ HTML Imitation Baidu Encyclopedia المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!
إذا كنت تعتقد أن هذه المقالة مفيدة لك ، فيرجى إعادة طباعتها. يرجى الإشارة إلى المصدر ، شكرا لك!