HTML ลอกเลียนแบบฟังก์ชั่นเมนูแบบเลื่อนลงของสารานุกรม Baidu Baidu, รหัสเฉพาะมีดังนี้:
ตัวอย่างรูปที่ 1
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> 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 = stylesheet type = text/css/> </head> <body> class = nav-top> <div class = nav-content> <ul class = nav-content-box> <li class = index on> <pan> <a href =#> บ้าน </a> </pan> </li> <li class = cat> <pan> <a href =#> การจำแนก href =#> วัฒนธรรม </a> </li> <li> <a href =#> ภูมิศาสตร์ </a> </li> <li> <a href =#> ภูมิศาสตร์ </a> </li> <li> <a href =#> ประวัติศาสตร์ </a> </li> <li> <li> <a href =#> art </a> </li> <li> <a href =#> ผู้คน </a> </li> <li> <a href =#> เศรษฐกิจ </a> </li> <li> <a href =#> เทคโนโลยี </a> </li> <li> href =#> กีฬา </a> </li> </li> </li> <li> <a href =#> กีฬา </a> </li> </li> <li> <a href = javascript: void (0)> encyclopedia </a> href =#> พิพิธภัณฑ์ดิจิตอล </a> </li> <li> <a href =#> href =#> สารานุกรมเมือง </a> </li> <li> <a href =#> สารานุกรมมหาวิทยาลัย </a> </li> <li> Encyclopedia </a> </li> </li> </li> <li> <a href =#> Science Encyclopedia </a> </li> </li> </li> <li> <a href = javascript: void (0)> ผู้ใช้ </a> href =#> แผนการเผาไหม้ในฝัน </a> </li> <li> <a href =#> งานสารานุกรม </a> </li> <li> <a href =#> Mall Mall </a> </li> </li> </li> </li> <li class = ความร่วมมือ> <span> <a href =#> Mall Mall </a> </li> </li> </li> <Li class = ความร่วมมือ> <pan> <a href = JavaScript: Void (0)> ความร่วมมือที่เชื่อถือได้ </a> </span> href =#> คำถามที่พบบ่อย </a> </li> <li> <a href =#> ข้อมูลการติดต่อ </a> </li> </li> </li> </li> <li> <a href =#> ข้อมูลการติดต่อ </a> </li> </li> </li> สารานุกรม </a> </span> <ul> <li> <a href =#> ไคลเอนต์ </a> </li> <li> <a href =#> เวอร์ชันเว็บ </a> </li> </li> </li> </li>สไตล์
ร่างกาย {มาร์จิ้น: 0; การทำ: 0; Font-Family: Arial, Tahoma, 'Microsoft Yahei', '/5b8b/4f53', sans-serif ;;} .Top-bar {พื้นหลังสี:#f3f3f3; text-allign: center; padding: 2.5em;} a {padding-bottom: 3px; สี: สีขาว; การกำหนดข้อความ: ไม่มี;} ul {list-style: none; padding: 0; .nav-bar {ตำแหน่ง: ญาติ; z-index: 1000; ล้น: ซ่อน; ขั้นต่ำสุด: 900px; ความสูง: 45px;}. nav-bar: Hover {overflow: มองเห็น; -webkit-transition: 05S ทั้งหมด; EASE;}. NAV-BG {ตำแหน่ง: Absolute; Width: 100%; ความสูง: 272px; พื้นหลัง:#24619C; พื้นหลัง: RGBA (36,97,158, .95);-WebKit-Transition: .3S; การเปลี่ยนแปลง: .3S; Z-INDEX: 9999;}. #5895D5; ขอบด้านล่าง: 1px Solid #3B92E9; ความเป็นมา:#459DF5;}. NAV-Content {ตำแหน่ง: Absolute; Width: 80%; ซ้าย: 10%;}. Nav-Content-Box {ตำแหน่ง: Absolute; Top: 0; ซ้าย: 0; Width: 1 00%;}. nav-content-box> li {float: left; line-height: 43px;}. nav-content-box> li: hover {พื้นหลัง:#19508b;}. nav-content-box> li> span> a {แสดง : block; ความกว้าง: 100%; มาร์จิ้น: 0; ความสูง: 41px; สายไฟ: 41px;}. nav-content-box> li: hover> span> a {พื้นหลัง:#338ce6;} ul> li.index, ul> li.cat, ul, ul > li.special, ul> li.user, ul> li.cooperation, ul> li.mobile {width: 120px;} ul> li.index {ความสูง: 43px;} ul.nav-content-box> li> ul {ชายแดนขวา: ของแข็ง 1PX #3A6FA2; มาร์จิ้น: 10px 0 6px} ul.nav-content-box> li> ul: หลังจาก {การมองเห็น: ซ่อน; แสดง: บล็อก; ตัวอักษรขนาด: 0; เนื้อหา: ; Clear: ทั้งสอง; ความสูง: 0} .nav-content-box> li: hover> ul {border-right: none; padding-right: 1px;} ul.nav-content-box> li> ul> li {float: ซ้าย; 0%; จุดสูง: 2; Text-Align: center;} 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 Navigation Menu Function Drop-Down Menu แนะนำให้คุณรู้จักโดย Editor ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณโปรดพิมพ์ซ้ำ โปรดระบุแหล่งที่มาขอบคุณ!