CSS 웹 페이지 레이아웃 입문 튜 토리 얼 11:현재 표 지 를 가 진 태그 식 가로 네 비게 이 션 이미지 미화 판

라벨 네 비게 이 션 을 완 성 했 지만 광장 모양 의 네 비게 이 션 은 현재 의 디자인 트 렌 드 에 부 응 하지 못 하 는 것 같다.사실은 네 비게 이 션 은 css 의 색상 으로 정의 할 수 있 을 뿐만 아니 라 정성 들 여 디자인 한 이미지 나 다른 요소 로 네 비게 이 션 을 구축 할 수 있다.여기 서 우 리 는 네 비게 이 션 의 디자인 을 개선 하여 더욱 좋 은 라벨 효과 가 되도록 할 것 이다.우 리 는 단일 한 사각형 배경 요 소 를 제거 하고 색채 가 있 는 원 각 라벨 로 우리 의 디자인 을 완성 하 는 것 을 고려 할 것 이다.그러나 이 개선 에서 css 디자인 의 또 다른 장점 을 느 낄 수 있 습 니 다.바로 구조 코드 를 수정 하지 않 고 스타일 만 수정 하면 개선 을 완성 할 수 있 기 때문에 css 코드 의 디자인 을 직접 볼 수 있 습 니 다.상기 코드 를 통 해 알 수 있 듯 이 우 리 는 배경 색 의 설정 을 제거 하고 페이지 의 body 태그 에 검은색 배경 을 추가 했다.a 대상 은 우리 가 다시 만 든 gif 그림 을 배치 했다.일반,마우스 이동,현재 페이지 의 세 가지 상호작용 상 태 를 포함한다.하지만 이 세 가지 상태의 그림 이 한 장 에 있 습 니 다.왜 일 까요?여 기 는 소프트웨어 의 디자인 방식 을 사용 하여 한편 으로 는 이미지 관 리 를 사용 하고,다른 한편 으로 는 웹 페이지 에서 다운로드 할 때 하나의 그림 만 다운로드 하면 된다.이 그림 을 배경 그림 으로 설정 할 때 css 로 그림 의 위 치 를 제어 하면 됩 니 다.css 기능 이 정말 강 한 것 같 습 니 다.css 코드 를 수정 하 는 것 만으로 네 비게 이 션 의 외관 을 바 꾸 었 습 니 다.대형 사이트 의 응용 에서 만약 에 우리 가 특정한 유 니 버 설 모듈 에 만족 하지 않 으 면 모든 페이지 를 수정 하지 않 아 도 되 고 스타일 만 바 꾸 면 이 루어 집 니 다.css 는 당신 의 디자인 을 진정 으로 가볍게 합 니 다!