CSS 기술 링크 주석-CSS 튜토리얼-php.cn

CSS 기술 링크 주석

巴扎黑

풀어 주다： 2017-08-21 13:36:06

원래의

1586명이 탐색했습니다.

CSS은 테이블 레이아웃에 없는 많은 장점을 가지고 있습니다. 첫째, 페이지에 표시되는 정보와 레이아웃이나 페이지 디자인을 엄격하게 분리합니다. 하나의 CSS 파일 을 다른 파일로 바꾸는 것만으로 페이지 디자인을 쉽게 변경할 수 있습니다. 결과적으로 사용자는 많은 기술을 재사용하여 작업량과 시간을 어느 정도 줄입니다. 이 기사에서는 PDF, ZIP 및 DOC 링크에 주석을 추가하는 방법을 소개합니다.
때로는 작은 아이콘으로 하이퍼링크 유형을 명확하게 표시하고 싶을 때가 있습니다. zip문서인가요, 아니면 pdf
파일인가요? 이렇게 하면 방문자는 자신이 클릭하려는 링크가 다른 페이지를 여는 것이 아니라 다운로드라는 것을 알 수 있습니다. 모두가 IE7 또는 FF을 사용하는 경우. [att$=val] 속성 선택기를 사용하면 특정 값으로 끝나는 속성(예: .zip 및 .doc)을 찾을 수 있습니다.

다음은 인용문입니다.

a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }  
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }

로그인 후 복사

불행히도

IE6

아래의 브라우저는 속성 선택기를 지원하지 않습니다. 다행히도 각 요소에 클래스를 추가하면 JavaScript 및 DOM을 사용하여 유사한 효과를 얻을 수 있습니다. ㅋㅋ 해결 방법은 다음과 같습니다 :

다음은 인용문입니다.

function fileLinks() {  
    var fileLink;  
    if (document.getElementsByTagName(&#39;a&#39;)) {  
        for (var i = 0; (fileLink = document.getElementsByTagName(&#39;a&#39;)[i]); i++) {  
            if (fileLink.href.indexOf(&#39;.pdf&#39;) != -1) {  
                fileLink.setAttribute(&#39;target&#39;, &#39;_blank&#39;);  
                fileLink.className = &#39;pdfLink&#39;;  
            }  
            if (fileLink.href.indexOf(&#39;.doc&#39;) != -1) {  
                fileLink.setAttribute(&#39;target&#39;, &#39;_blank&#39;);  
                fileLink.className = &#39;docLink&#39;;  
            }  
            if (fileLink.href.indexOf(&#39;.zip&#39;) != -1) {  
                fileLink.setAttribute(&#39;target&#39;, &#39;_blank&#39;);  
                fileLink.className = &#39;zipLink&#39;;  
            }  
        }  
    }  
}  
window.onload = function() {  
    fileLinks();  
}

로그인 후 복사

물론, css 파일에 다음

css 클래스를 추가하세요.

다음은 인용문입니다. -->

위 내용은 CSS 기술 링크 주석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!