이 글에서는 대부분의 인기 있는 전자상거래 웹사이트와 유사한 카테고리 탐색 메뉴를 구현합니다. 메뉴 구현의 어려움은 주로 CSS 작성에 있으며, 다음은 몇 가지 핵심 사항입니다. 자세한 구현은 소스코드를 직접 보실 수 있습니다.
(1) 그림의 1번 항목을 구현하는 방법은? 절대 p로 설정된 위치, 이 p는 왼쪽으로 정확히 1픽셀 오프셋되어 왼쪽의 메뉴 표시줄이 테두리를 누르고 선택한 메뉴에 흰색 테두리가 생겨 간격이 형성됩니다.
(2 ) 그림에 표시 각 연결에서 줄바꿈 없이 2번을 달성하는 방법은 무엇입니까? 요소의 표시 속성을 inline-block으로 설정하면 대부분의 브라우저에서 다음을 추가할 수 있습니다.
코드 복사 코드는 다음과 같습니다.
<!--[if IE 7]> <style type="text/css"> #sidebar-menu p.menu-panel p.link-wrapper { display : inline; zoom : 1; } </style> <![endif]-->
(3) 살펴보기 처음 두 메뉴에는 아이콘이 있습니다. 실제로 각 메뉴에는 아이콘이 두 개 있는데, 하나는 초기 상태이고 다른 하나는 마우스 오버 상태입니다. 명명 규칙은 초기 상태가 tubeao.jpg이면 아이콘의 크기는 220px * 25px이어야 합니다. 그러면 각 메뉴의 아이콘은 어떻게 지정합니까? 예를 들어
코드 복사 코드는 다음과 같습니다.
<p class="menu-item" style="background-image : url(images/tubiao.jpg);"> <span>图书音像</span> </p>
이때, 이미지 위에 마우스를 올렸을 때 초기 상태의 이미지 주소는 지정할 필요가 없습니다. 단, 초기 이미지와 동일한 디렉토리에 있어야 합니다. 🎜>다음은 전체 소스코드 파일입니다.sidebar.html