파워 포인트 플로우 챠트 html

나는 파워 포인트 플로우 차트 (하이퍼 링크가없는 텍스트)로 다음과 같은 것을 가지고있다 : image.파워 포인트 플로우 챠트 html

이 차트를 HTML 웹 사이트로 바꾸고 싶습니다. 이 작업을 위해 좋은 결과를 얻는 방법에 대한 아이디어가 있으십니까?

HTML로 코딩하여 이것을 재현하는 것이 번거롭다 고 생각합니다.

감사합니다.

출처

2012-05-25 TonyC

일부 보이지 않는 링크 오버레이 또는 맨 위에있는 이미지 맵을 사용하는 것 외에도 꽤 큰 순서입니다. –

텍스트 (5 , 왼쪽에 2 개)는 아마도 같은 레벨의 표제 일 수 있으므로 오른쪽에 떠 있고 각 화살표 세트 앞에 오게됩니다.

화살표의 각 세트는 비교적 쉽게리스트로 코딩 될 수 있고, 이러한 이동 경로로 스타일 :

Simple scalable CSS based breadcrumbs

(크리스 Coyer 의해)

Breadcrumb Navigation with CSS Triangles (빌레 피에 의해) 그들 드물게 2 줄을 차지하는 경우 콘텐츠로 확장 할 수 있습니다 (Firefox/Ubuntu 및 Safari/Mac에는 laaarge 글꼴이 있지만 텍스트는 항상 1 줄로 간주됩니다.) 확대/축소 텍스트는이어야합니다.3210)

개별 시리즈 간의 주황색 화살표는 HTML이 없으면 충분히 복잡하므로 상황에 따라 다릅니다. 이것은 산업 프로세스, 웹 마케팅 또는 다른 것입니까? 접근성을 높이기 위해 대체 텍스트로 HTML 이미지를 사용하여 관계를 설명하려고합니다.

빨간색 화살표는 아마도 앵커 링크 일 수 있습니다.

출처

2012-05-25 21:17:51 FelipeAls

링크에 감사드립니다. 잠시 두 번째 링크로 연주하고 있습니다. 내가 가지고있는 유일한 문제는 각 행의 첫 번째 화살표에 왼쪽에 "화살표 들여 쓰기"가 있어야한다는 것입니다. -> 내 이미지에서 가장 왼쪽 화살표. 이 아이디어를 어떻게 설정해야합니까? – TonyC

': before' 또는': after'가 상위'ul.breadcrumb'에 정의되어 있으므로 안쪽 화살표에 사용 된 것과 같은 기술로 사용하겠습니다. 그것은 sth에'.breadcrumb : { border-bottom : 25px solid red; border-left : 15px 녹색으로 켜짐; border-top : 25px 솔리드 파란색; 콘텐츠 : ""; display : 블록; 신장 : 0; 왼쪽 : 0; margin-top : -5px; 직위 : 절대; 상단 : 50 %; 너비 : 0; }'. 그런 다음 새로운 화살표를 보완하기 위해 첫 번째 링크에서 여백 (여백?)을 입력하십시오.사이트 이동 경로 : 첫 번째 자녀는 {여백 - 왼쪽 : 10px;/* 또는 15? 결정할 * /}' – FelipeAls

감사합니다 - 이것은 약간의 조정으로 작동했습니다. – TonyC

나는 매우 복잡한 그래픽이 없으므로 이미지를 최적화 할 수 있다고 생각합니다. 따라서 쉬운 해결책은 바로 배경 이미지로 그것을 포함 할 수 있습니다 다음 CSS를 사용하여 텍스트와 링크를 장소로 설정할 수 있습니다.

더 좋은 해결책은 그림을 더 작은 구성 요소로 나누는 것입니다. 그러면이 방법으로 배경색, 테두리 및 테두리 라디오가있는 "div"를 회색 부분으로 정의하고 흰색 요소를 ""태그의 배경 이미지 ...하지만 난 당신이 배경 이미지로 포함해야한다고 생각 화살표 ...이 도움이

희망 ... 오른쪽에 회색 배경에

출처

2012-05-25 21:12:14

파워 포인트 플로우 챠트 html

답변

관련 문제