HTML은 Baidu Encyclopedia Navigation 드롭 다운 메뉴 기능을 모방합니다. 특정 코드는 다음과 같습니다.
데모 그림 1
<! doctype html public- // w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> html xmlns = http : //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <title> html+css 모방 Baidu 백과 사전 내비게이션 드롭 다운 메뉴 </title> <link href = css/style.css rel = stylesheet type = text/css/> </head> <body> <div class = header> <head-bar 컨텐츠 </div> <nav-bar> <nav-bar> <nav-bar> <div class> </head> </head>. 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> <ul> <li> <a href =#> href =#> 문화 </a> </li> <li> <a href =#> 지리학 </a> </li> <li> <a href =#> 지리학 </a> </li> <li> <a href =#> history </a> </li> <li> <a href =#> life </a> </li> <li> <li> <a href =#> art </a> </a> </li> <li> <a href =#> people </a> </li> <li> <a href =#> 경제 </a> </a> </a> </li> <li> <a href =#> 기술 </a> </li> <li> <a href =#> </li> </li>> </li>> </li> </li> </li> </li> href =#> sports </a> </li> </li> </li> <li> <a href =#> sports </a> </li> </li> </li> </li> <a href = javaScript : void (0)> 백가비피아 </a> </span> <ul> <li> <a href =#> href =#> 디지털 박물관 </a> </li> <li> <a href =#> href =#> City 백과 사전 </a> </li> <li> <a href =#> 대학 백과 사전 </a> </li> <li> <a href =#> Art actyclopedia </a> <li> <a href = <a href = <a href = <a href = <li> 백과 사전 </a> </li> </li> </li> <li> <a href =#> Science 백과 사전 </a> </li> </li> </li> <li> <a href = javascript : void (0)> users </a> </span> <ul> <li> <a href =#> tailpole </a> </a> </a> href =#> Dream Burning Plan </a> </li> <li> <a href =#> 백과 사전 작업 </a >> </li> <a href =#> 백과 사전 mall </a> </li> </li> </li> <li class = cooperation> </li> </li>> </a>> href =# </li> <li class = cooperation> <span> <a href =#> Encyclopedia mall </a> </li> </li> <li class = cooperation> <span> <a href = javaScript : void (0)> 권위있는 협력 </a> </span> <ul> <li> <a href =####ahref =# href =#> faq </a> </li> <li> <a href =#> 연락처 정보 </a> </a> </li> </li> </li> </li> <li> <a href =#> 연락처 정보 </a> </li> </li> </li> <li class = mobile> <a href = javascript : void (0)> 백과 사전 </a> </span> <ul> <li> <a href =#> 클라이언트 </a> </a> </a> </li> <li> <a href =#> 웹 버전 </a> </li> </li> </li> </li> </ul> </div> </div> </div> </div> </html> </html> </html.스타일
Body {margin : 0; Padding : 0; Font-Family : Arial, Tahoma, 'Microsoft Yahei', '/5b8b/4f53', Sans-Serif ;;} .top-bar {배경색 :#f3f3f3; 텍스트-정렬 : 중심; 패딩 : 2.5em;} a {padding-bottom : 3px; 컬러 : 흰색; 텍스트-결정 : none;} ul {list 스타일 : 없음; 패딩 : 0; margin : 0;} li {text-align;}. .nav-bar {위치 : 상대; z- 인덱스 : 1000; 오버 플로우 : 숨겨진; 최소 넓음 : 900px; 높이 : 45px;}. nav-bar : 호버 {오버 플로우 : 가시적; -webkit-transition : 모든 0.5s 편의; 전이 : 모든 0.5s EASE;}. NAV-BG {위치 : 절대; 폭; 폭; 높이 : 높이 : 272px; 배경 :#24619C; 배경 : RGBA (36,97,158, .95);-WebKit-Transition : .3S; 전이 : .3S; z-index : 9999;} #5895d5; 국경-바닥 : 1px 고체 #3B92E9; 배경 :#459df5;}. NAV-Content {위치 : 절대; 너비 : 80%; 왼쪽 : 10%;}. Nav-Content-Box {위쪽; 상단 : 0; 왼쪽 : 0; 너비 : 1 00%;}. nav-content-box> li {float : 왼쪽; line-height : 43px;}. nav-content-box> li : hover {backgre :#19508b;}. Nav-content-box> li> span> a {display : 블록; 너비 : 100%; 마진 : 0; 높이 : 41px; 선-높이 : 41px;}. nav-content-box> li : hover> span> a {배경 :#338ce6;} ul> li.index, ul> li.cat, ul > li.special, ul> li.user, ul> li. cooperation, ul> li.mobile {너비 : 120px;} ul> li.index {height : 43px;} ul.nav-content-box> li> ul {Border-Right : Solid 1px #3a6fa2; 마진 : 10px 0 6px} ul.nav-content-box> li> ul : {가시성 : hidden; display : block; font-size : 0; content : ; clear : 둘 다; 높이 : 0} .Nav-content-box> li : hover> ul {border-right : none; padding-right : 1px;} ul.nav-content-box> li> li {float : 왼쪽; 너비 : 10 0%; line-leight : 2; 텍스트-정렬 : 중심;} ul.nav-content-box> li.cat> ul> li {너비 : 49%;} ul.nav-content-box> li> ul> a {display : block; width : 100%;} 요약위의 것은 HTML 모방 Baidu 백과 사전 내비게이션 드롭 다운 메뉴 기능입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!
이 기사가 도움이된다고 생각되면 다시 인쇄하십시오. 소스를 표시하십시오. 감사합니다!