웹 매력적인 일러스트 목차 만들기

긴 기사 / 웹사이트에 콘텐츠를 잘 목차에 의해 제공됩니다. 책에서 그들은 가용성 증가하고 독자들이 직접 특정 섹션보다는 점프 laboriously 뭔가를 찾기 위해 전체 문서를 스크롤함으로써처럼. 전형적인 목차 오히려 재미 좀 보자 색상과 일러스트와 함께 조금이야 양념!

여기에서 우리는 무엇을 만들 것입니다 :

1. 소스 재료

우리가 사용할 캐릭터 일러스트 벡터 이미지 iStockphoto에 일러스트 레이터 9Lives에서 구할 수있습니다. 벡터 파일을 아주 잘, 그래서 여자가 그래픽을 분리 쉽지 지어졌습니다. 난 포토샵에서 정확한 픽셀 크기로 크기를 조정 내가 원했던 그것을했다.

포토샵에서, 나는 "웹 및 장치에 대한"내보내기 옵션을 저장하고는 PNG - 24를 사용 옵션을 사용하여 저장된. 이것은 전체 32에 대한 설정입니다 비트 알파 - 투명 PNG로. 즉, 그래서 만약 당신이 문제가 될 것이 IE 6에 어떤 문제가 유일한 브라우저가 것입니다, 당신이 중 하나를 PNG로 해킹을 사용하여, GIF 또는 8로 저장을 찾아봐야 할것 비트 PNG는 대신에, 또는 사용 조건부 스타일 시트를 인터넷 익스플로러 6에서 그래픽을 숨길 수있습니다.

2. HTML 마크업 작성

중첩된 목록을 목차의 고기입니다 지시했다. 우리의 마크업,하지만 그때 그 사용하여 모든 일을 마무리 DIV 우리가 갈색 상자를 만드는 데 사용됩니다. 우리는 또한 헤더에 대한 전통은 H1 태그를 사용합니다. 청소 및 간단한.

<div id="ToC"> <img src="images/woman.png" alt="" class="woman" /> <h1>Table of Contents</h1> <ol> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> <li>Article Subhead</li> </ol> </li> <li>Article Heading</li> <li>Article Heading</li> <li> Article Heading <ol> <li>Article Subhead</li> </ol> </li> </ol> </div> 

우리가 여기서 오른쪽 상단에있는 여자의 그림을 추가하고 여기에 고유한 클래스를주고있습니다. 이것이 우리가 목표로하고 CSS로 그녀의 위치를 사용하여 연결합니다. 이것은 또한 조건부 스타일 시트를 사용하여 그녀를 숨길 수있는 후크 필요하다면입니다.

라이브 목차, 각 목록 항목 내에서 텍스트를 앵커 링크뿐만 아니라 싼 것이다. href 속성이 해시 값 "# 문서의 두"는, 눌렀을 때, 요소가 있던 페이지를 아래로 뛰어 내리고 싶다 같은 URL을 가리키는 것이 그 ID입니다. 각 섹션의 하단에, 당신은 심지어 "위로"링크가 링크들이 다시 목차로 뛰어 내리고 싶다 # 목차에 만들 수있습니다.

3. CSS는

CSS는 또한 매우 간단합니다. 난 그냥 당신이 누른 다음 아래의 몇 가지 요점은 모든 걸 보여 줄게.

 *    { margin: 0; padding: 0; } body    { font-size: 62.5%; font-family: Helvetica, sans-serif; padding: 50px; } #ToC    { background: #f4e5b1; border: 1px solid #b1a041; margin: 25px; -moz-border-radius: 12px; -webkit-border-radius: 12px; padding: 10px; width: 260px; position: relative; min-height: 320px; } h1    { font-size: 22px; margin: 5px 0 10px 75px; letter-spacing: -1px; } ol    { margin-left: 100px; font-weight: bold; letter-spacing: -1px; } ol ol    { margin-left: 20px; list-style: lower-alpha;} ol li    { font-size: 18px; margin: 3px 0;} ol li ol li   { font-size: 12px; } .woman    { position: absolute; top: -25px; left: -55px; } 

볼거리 참고 :

- # TOC에 아주 간단히 그냥 배경 색상 및 단일 픽셀 테두리 색상을 사용하는 스타일이다. 브라우저의 특정 속성을 둥근 모서리 할 추가됩니다. 이 작품은 것이다 훌륭한 모두 모질라 기반 브라우저에서 보이는 (떼, 파이어 폭스 등)뿐만 아니라, 웹킷 기반 브라우저 (Konqueror에서, 사파리 등). 만약 인터넷 익스플로러 7이나 오페라의 페이지를 보려면, 그것을 멋지게 그냥 평범한 사각형 모서리가있는 데이 떨어집니다. 별거 아니.

- 명령 목록을 멀리 상자의 왼쪽에서 밀었 (왼쪽) 여백과 그림을위한 공간을 확인합니다. 중첩된 명령을 나열합니다 또한, 작은 값을 왼쪽 마진을 설정했습니다. 이것이 없으면, 그들은 여전히 들쭉날쭉한 것이지만, 어떤 것이 될 너무 멀리와 같은 100px 사용합니다. 또한 통지 하위 명령 목록에서 스타일리스트 낮은 알파로 설정됩니다. 이것은 문자를 사용하는 대신 다음 중첩된리스트에있는, 어떤 시각적으로 쉽게 탐색할 수있게 번호.

- 왜냐면 # 목차가 상대적으로 위치를 적용, 우리는. 여자는 클래스에 절대적인 위치를 사용할 수있는 그런 그림을 정확히 우리가 원하는. 그럴 필요는 여기에 절대적인 위치를 사용에 대한 긴장이 될 방법이 레이아웃을하지 않습니다. 상대 위치 절대 안으로 위치 기타.

제품 완료

데모보기

파일 다운로드