코드가 매우 간단하므로 너무 장황하게 설명하지 않고 코드만 알려드리겠습니다. 코드 복사 코드는 다음과 같습니다. <br> 함수 hoversee(){<br> var list = document.getElementById('nav');<br> var zu = list.getElementsByTagName("li");<br> for(var i=0;i {<br> zu[i].onmouseover = 함수(){<br> this.getElementsByTagName('dl')[0].style.display = "차단";<br> }<br> zu[i].onmouseout = 함수(){<br> this.getElementsByTagName('dl')[0].style.display = "없음";<br> }<br> }<br> }<br> window.onload = hoversee;<br> <br> <스타일><br> *{<br> 글꼴 계열:Microsoft YaHei;<br> 여백:0;<br> 패딩:0;<br> }<br> 본문{너비:100%;}<br> ul{목록 스타일: 없음;}<br> a{텍스트 장식: 없음;}<br> #헤더{<br> 높이:50px;<br> 줄 높이:50px;<br> 배경:#455A6E;<br> }<br> #헤더 h2,#헤더 h3{<br> 글꼴 두께:500;<br> }<br> #헤더 h2{<br> 색상:#fff;<br> 글꼴 크기:18px;<br> 너비:180px;<br> 텍스트 정렬: 중앙;<br> 배경:#0D2E49;<br> }<br> #헤더 h3{색상:#fff;글꼴 크기:16px;}<br> .mycenter{<br> 너비:900px;<br> 여백:0 자동;<br> }<br> #헤더 div.mycenter{<br> /*상호결정체*/<br> 위치:상대;<br> }<br> #nav {<br> 너비:180px;<br> 배경:rgba(0, 102, 173, 0.5);<br> Z-색인:999;<br> }<br> #nav 리{<br> 높이:40px;<br> 왼쪽 패딩:40px;<br> 줄 높이: 40px;<br> 위치:상대;<br> }<br> #nav h3{높이:40px;}<br> #nav li dl{<br> 위치:상대;<br> 왼쪽:140px;<br> 상단:-40px;<br> 너비:150px;<br> 배경:#fff;<br> 디스플레이:없음;<br> 패딩:8px 10px;<br> }<br> #navdt{<br> 너비:150px;<br> 줄 높이: 30px;<br> 높이:30px;<br> 배경:#36C1AF;<br> 색상:#fff;<br> 텍스트 정렬: 중앙;<br> }<br> #nav dd a{<br> 디스플레이:블록;<br> 높이:30px;<br> 너비:150px;<br> 글꼴 크기:14px;<br> 색상:#858585;<br> }<br> #nav dd a:hover{<br> 텍스트 장식: 밑줄;<br> }<br> #콘텐츠{<br> 배경:#E95200;<br> 높이:500px;<br> }<br> </스타일><br> </머리><br> <br> <div id="header"><br> <div class="mycenter"><br> & Lt h2 & gt; 배경 관리 메뉴 & lt;/h2 & gt; <ul id="nav"><br> > ~ ~ <h3>계정 관리</h3><br> > ~ ~ ~ | ;<br> & Lt; a href = "#" & gt; 사용자 이름 수정 & lt;/a & gt; & Lt; a href = "#" & gt; 비밀 문제 설정 & lt;/a & gt; ~ ~ > > <h3>홈페이지 관리</h3><br> ~ <dt>홈페이지 관리</dt><br> ~ & Lt; a href = "#" & gt; 사진 설정 & lt;/a & gt; & Lt; a href = "#" & gt; 제품 디스플레이 사진 설정 & lt;/a & gt; <a href="#">하단 정보 수정</a><br> ~ ~ > >~ <br> ~ ~ ~ <dt>제품 관리</dt><br> ~ ~ ~ <a href="#">새 제품 추가</a><br> ~ > ~ ~ <a href="#">카테고리 관리</a><br> ~ ~ > > ~ > ;/h3><br> ~ <dt>뉴스 관리</dt><br> ~ <a href="#">뉴스 게시</a><br> <a href="#">모든 뉴스 관리</a><br> <a href="#">시리즈 추가</a><br> <a href="#">뉴스 시리즈 관리</a><br> ~ ~ > > ~ > <br> ~ ~ ~ ~ & lt; a href = "#"& gt; 모든 피드백을 관리합니다~ ~ > > ~ > ~ <dt>기업 정보 관리</dt><br> ~ <a href="#">회사 프로필</a><br> & Lt; a href = "#" & gt; 회사 연락처 정보 설정 & lt;/a & gt; <a href="#">인재 채용 관리</a><br> ~ ~ > > & Lt; h3 & gt; 권한 & lt;/h3 & gt; ~ 안에 ~ ~ <a href="#">새로 추가 관리자</a><br> <a href="#">모든 계정 권한 보기</a><br> 안에 ~ ~ > > <h3>기능 관리</h3><br> ~ <dt>기능 관리</dt><br>~ & Lt; a href = "#" & gt; 첫 번째 수준 기능 설정 & lt;/a & gt; ~ ~ > > <h3>권한 확인 및 적용</h3><br> ~ > ~ ~ > 권한 보기</a><br> & Lt; a href = "#" & gt; 애플리케이션 권한 & lt;/a & gt; ~ ~ > </ul><br> > </div><br> <div id="content"><br> </div><br> <div id="footer"><br> </div><br> </본문><br> </div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
