현재 표 지 는 사용자 가 이 채널 이나 항목 을 클릭 하 는 것 을 말 합 니 다.이 항목 의 탭 은 다른 탭 과 다른 색 을 보 여 사용자 가 있 는 위 치 를 알려 줍 니 다.이런 디자인 은 사이트 디자인 에서 상당히 간단 하고 상당히 전형 적 인 사이트 의 가용성 을 증진 시 키 는 방식 이다.사 이 트 는 사용자 가 사용 할 때 사용자 가 조회 하 는 사고 과정 을 고려 해 야 한다.나 쁜 웹 디자인 은 페이지 자체 만 생각 하고 사용자 의 느낌 을 고려 하지 않 는 다.우수한 디자인 은 사용자 중심 으로 출발 해 야 한다.이런 간단 한 현재 채널 의 표 지 는 많은 디자이너 들 이 무시 하 는 내용 이 고 사용 자 는 자신의 위 치 를 알 아야 한다.그리고 자신 이 어디로 갈 수 있 는 지 알 고 현재 위치 에 대한 표 지 를 통 해 사용자 로 하여 금 자신 이 사이트 에서 의 위 치 를 인식 하 게 하고 다른 채널 을 방문 하도록 유도 하 는 데 도움 이 된다.이전 편 에서 코드 를 계속 작 성 했 습 니 다.한 채널 이 현재 소속 채널 이 되도록 하기 위해 서 이 채널 은 다른 채널 과 다른 배경 색 이나 문자 가 있어 야 합 니 다.그러나 현재 우 리 는 모든 a 태그 에 대해 통일 적 으로 설정 한 배경 입 니 다.따라서 첫 번 째 임 무 는 예외 적 인 상황 을 설계 하 는 것 입 니 다.즉,현재 채널 과 같은 특수 한 채널 을 설계 하 는 것 입 니 다.우 리 는 HTML 의 라벨 을 수정 합 니 다.
홈 페이지 DIV+CSS 튜 토리 얼 상용 코드 수정 아이콘 슬라이드 사진 소프트웨어 다운로드 CSS 2.0 실 용 매 뉴 얼 우 리 는 첫 번 째 a 탭 에 새 id 를 추 가 했 습 니 다.current 라 는 이름 으로 css 부분의 작성 을 계속 보 았 습 니 다.먼저 current 라 는 id 에 색상 디자인 을 했 습 니 다.\#nav li a#current { background-color:#2788da; color:#fff;} 효 과 를 미리 봅 시다.첫 페이지 의 배경 색 이 파란색 으로 변 했 습 니 다. [Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]계속 내 비게 이 션 을 보완 하고 페이지 메뉴 에 횡선 을 추가 합 니 다\#nav { height:26px; border-bottom:2px solid #2788da;} 우 리 는 얼 태그 에 높이 를 설정 하고 그 밑 에 2px 의 실선 을 추가 하여 효 과 를 다시 한 번 미리 보 았 습 니 다.우리 가 처음에 상 상 했 던 태그 식 네 비게 이 션 과 크게 다 릅 니 다.nav 요소 의 정의 로 돌아 갑 니 다.border-bottom 은 우리 가 새로 추가 한 속성 입 니 다.요소 의 아래 테두리 설정 을 말 합 니 다.그 매개 변 수 는 2px 의 너비,단일 실선 스타일 을 말 합 니 다.색상 값 은\#2788 da 입 니 다.이러한 설정 을 통 해 우리 의 얼 탭 은 2px 색상 이 있 는 아래 테 두 리 를 가지 고 있 습 니 다. <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <style> #nav { height:26px; border-bottom:2px solid #2788da; list-style:none;} #nav li { float:left;} #nav li a { color:#000000; text-decoration:none; padding-top:4px; display:block; width:120px; height:22px; text-align:center; background-color:#ececec; margin-left:2px;} #nav li a:hover { background-color:#bbbbbb; color:#ffffff;} #nav li a#current { background-color:#2788da; color:#fff;} </style> <ul id="nav"> <li><a id="current" href="https://www.jb51.net/index.asp">홈 페이지</a></li><li><a href="https://www.jb51.net/Sort/List_4.html">DIV+CSS 튜 토리 얼</a></li><li><a href="https://www.jb51.net/Sort/List_5.html">상용 코드</a></li><li><a href="https://www.jb51.net/Sort/List_6.html">크 리 스 탈 아이콘</a></li><li><a href="https://www.jb51.net/Sort/List_7.html">슬라이드 사진</a></li><li><a href="https://www.jb51.net/Sort/List_10.html">소프트웨어 다운로드</a></li><li><a href="https://www.jb51.net/css2/">CSS 2.0 유 틸 리 티 매 뉴 얼</a></li></ul>[Ctrl+A 전체 선택:<a href="https://www.jb51.net/article/23421.htm" title="查看具体详情" rel="noreferrer noopener nofollow">引入外部Js需再刷新一下页面才能执行</a>]간단 한 탭 식 네 비게 이 션 은 css 디자인 을 통 해 완 성 된 것 으로 간주 되 며,채널 페이지 를 바 꿀 때마다 id="current"를 현재 채널 이 있 는 a 요소 로 이동 하면 색상 전환 이 완 료 됩 니 다.속인 들 이 색상 속성 을 만 들 필요 가 없 으 며,수정 이 필요 하 셔 도 css 에서 쉽게 수정 할 수 있 습 니 다.이 예 에서 XHTML 에서 요소 간 의 CSS 속성 계승 을 응용 하 는 문제무엇 을 계승 합 니까?계승 이란 모든 요소 가 여러 가지 스타일 을 가 질 수 있다 는 것 을 말한다.일반적인 상황 에서 그 는 가장 바깥쪽 스타일 디자인 을 지 키 고 자신 에 대한 스타일 디자인 을 만나면 그 는 바깥쪽 스타일 을 계승 하 는 토대 에서 자신의 스타일 을 우선 고려 할 것 이다.내부 스타일 이 외부 스타일 과 충돌 하면 최종 적 으로 내부 스타일 효 과 를 보 여 줍 니 다.이 예 에서 새로운 속성 을 접 했 습 니 다:list-style:none;미리 보기 용 스타일 코드 에 있 습 니 다.기본 적 인 상황 에서 얼 안의 li 목록 형식 앞 에 원점 이 있 는 것 은 이전 장 에서 볼 수 있 습 니 다.이 문장의 뜻 은 앞의 기본 원점 을 없 애 는 것 이다.
