컨소시엄의 공식 웹 사이트의 하이퍼링크 상호 작용 분석

Absrtact: 하이퍼링크는 웹 페이지의 필수 요소입니다. 하이퍼링크의 인터랙티브 디자인 웹 페이지의 가장 중요 한 세부 사항 이기도합니다. CSS도 몇 의사 클래스 선택기 상호 운용에 대 한 하이퍼링크를 설정 하는 데 사용 되는 링크에 대 한 준비 합니다. 하지만 대부분의 사이트에서 우리

하이퍼링크는 웹 페이지의 필수적인 부분입니다. 하이퍼링크의 인터랙티브 디자인 웹 페이지의 가장 중요 한 세부 사항 이기도합니다. CSS도 몇 의사 클래스 선택기 상호 운용에 대 한 하이퍼링크를 설정 하는 데 사용 되는 링크에 대 한 준비 합니다. 그러나, 대부분의 사이트에서 우리 참조 하이퍼링크 상호 작용 스타일, 보통: 링크의 색상을 변경, 취소 또는 밑줄을 증가, 링크 텍스트 색상을 클릭 또는 밑줄 사라진, 고. 사실, 하이퍼링크의 대화형 디자인 처럼 간단 하지 않습니다.

공식 웹 사이트의 웹사이트는 좋은 대화형 링크, 그것 휴식 루틴, 그래서 그것을 분석 하는 것. 다음 그림은 하이퍼링크 대화형 작업, 물론 공식 웹 사이트에 직접 결과를 볼 것이 좋습니다.

실현 원리 및 분석

첫째, 그것은 여전히를 밑줄로 일반 하이퍼링크 스타일 하지만 일반적인 하이퍼링크 스타일 달리 밑줄 두께 (2px 정상 1px), 및 밑줄 이며 텍스트 색 다르다 (와 컬러 텍스트-장식 정의 된 하이퍼링크 밑줄 색은 텍스트와 동일 합니다. 그래서 확실히, 밑줄 사용 하 여 테두리 아래쪽 특성 및 패딩-하단의 몇 픽셀, 일정 한 거리를 여 정의 됩니다. 다음 대화형 작업이 간단, 그냥 아래쪽 테두리의 색 변경. 클릭 이벤트가 발생 하면 하이퍼링크에 단순히 색상을 변경 되지 않습니다 하지만 그것은 아래로 누르면 환상을 주는 몇 픽셀 아래로 이동. 이 구현에 대 한 상대 위치 속성을 사용 하 여, Top 속성을 활성화 해야, 원래 위치 아래쪽 오프셋 특정 거리에서에서 하이퍼링크를 확인할 수 있습니다.

이제는 분석 완료, 그에 따라 코드를 쓰기 시작 하자.

HTML 구조

그냥 몇 가지 단어를 입력, 확인에 링크를 추가 합니다.

여기에 캐주얼은 상호 작용 스타일 데모 링크 하는 데 사용 하는 12 단어, 여기에 링크.

CSS 스타일

div {너비: 300px; 여백: 20px 자동; 라인-높이: 24px;}

div는 {텍스트-장식: 없음 색상: #000; 여백-하단: 1px;}

Div A:link, div는: 방문한 {국경-하단: 2px 단단한 #f00;}

Div를: 가져가 {국경-하단: 2px 고체 #00f;}

Div는: 활성 {국경-하단: 2px 고체 #00f; 개요: 0 없음; 위치: 상대적; 가기: 1px;}

Div의 폭은 단지 예쁘게 하 정의 행 높이의 정의 밑줄 텍스트의 다음 줄에 영향을 미치지 못하게 하는 것입니다, 그리고이 스스로 의해 결정 될 수 있다. 기본 밑줄 및 색 레이블, 다음 대화형 작업을 제거 합니다. 참고: 활성 하이퍼링크를 클릭 하면 하이퍼링크를 클릭 하면 일부 브라우저를 방지 하기 위해 개요 속성을 사용 합니다.

확산 적 사고

밑줄 시뮬레이션 하려면 테두리를 사용 하 고, 이제는 만들 수 있습니다 당신은 대화형 "취소선" 하이퍼링크의 높이 조정 하 여 선? 물론 괜찮아요, 우리는 그냥 약간 높이 특성을 설정 하 여 디스플레이 속성의 필요는 인라인-블록 텍스트를 통해가 서 테두리를 만들 수 있습니다 그리고 텍스트 오버플로의 기본 속성은 볼 수 있기 때문에 여전히 표시 됩니다.

Div는 {텍스트-장식: 없음; 색상: #000; p 추가-하단: 1px; 높이: 6px 디스플레이: 인라인-블록;}

이 다음 다이어그램 효과 얻을 것 이다

주의 하는 것이 중요 하다는 요소를 행의 요소와 그것이 유용 하지만 디스플레이: 블록 블록 요소에 추가 하려면 높이 직접 사용 하는, 인라인-블록 특성이 추가 되므로 텍스트에서 끊을 것 이다. 하지만 이러한 방법으로, 이전 IE 브라우저와의 호환성은 매우 좋은.

이러한 하이퍼링크 대화형 스타일을 만드는 것은 매우 간단 하 고, 대화형 효과 매우 좋은, 일반적으로 우리가 지속적으로 사용자 경험을 향상 시키기 위해 조금 더 신중 하 고 분기 생각 해야한다.