CSS로 위조 태그 클라우드 만들기

3740 단어
  • performance testing
  • stress testing
  • conformance testing
  • acceptane testing
  • smoke testing
  • regression testing
  • white box testing
  • system testing
  • black box testing
  • load testing
  • compatibility testing
  • unit testing

    •  
    이것이 바로 우리가 만들어야 할 라벨 구름 효과다.
     
    HTML 코드
    <ul class="cloud">
    <li>performance testingli>
    <li>stress testingli>
    <li>conformance testingli>
    <li>acceptane testingli>
    <li>smoke testingli>
    ...
ul>

     
    CSS 코드
    /*   ul     */
    
.cloud {
    display: inline;
    list-style-type: none;
    width: 400px;
}
.cloud li {
    list-style: none;
    display: inline;
}

/*   ul     */
    
.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}

     
    이 탭 클라우드 효과는 랜덤이 아닙니다. :nth-of-type 이 CSS 속성으로 제어되기 때문에 페이지를 새로 고침하는 효과는 이번과 같습니다.
     
    그런데 무슨 상관이야, 라벨구름 효과가 있어.너는 자신의 필요에 따라 코드를 변경할 수 있다.
     
    참조 링크: Tag cloud of randomsizes in pure CSS
     
    (끝)
    전재 대상:https://www.cnblogs.com/zhangbao/p/5841915.html
    ASP.NET는 어떻게 catch 저장 과정 중 던진 이상 정보를 저장합니까
    PropertyGrid Layout - Ext JS

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage