최신 웹 개발 튜토리얼
 

W3.CSS명부


목록 표시

  • × 마이크
    웹 디자이너
  • × 처녀
    지원하다
  • × 여자
    회계 원

기본 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

경계 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-border">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

목록 헤더

  • 이름

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-border">
  <li><h2>Names</h2></li>
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

카드로 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-card-4">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

중심 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-center">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

컬러리스트

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-red">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

컬러 목록 항목

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul">
  <li class="w3-blue">Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

Hoverable 목록

W3-hoverable 클래스는 마우스 오버에 각 목록 항목에 회색 배경 색상을 추가합니다 :

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-hoverable">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

특정 호버 색상을 원하는 경우, 각각의 <리> 요소에 W3-호버 - 클래스 중 하나를 추가합니다 :

  • 처녀
  • 이브
  • 아담

<li class="w3-hover-red">Jill</li>
»그에게 자신을보십시오

폐쇄 목록

/이 목록 항목을 숨기 종료 문자 "X"를 클릭 :

  • 질의 X
  • 아담 X
  • 이브 X

<li>Jill
  <span onclick="this.parentElement.style.display='none'"
  class="w3-closebtn w3-margin-right w3-medium">x</span>
</li>
»그에게 자신을보십시오

패딩 목록

  • 처녀
  • 이브
  • 아담
  • 처녀
  • 이브
  • 아담

<ul class="w3-ul">
  <li class="w3-padding-hor-16">Jill</li>
  <li class="w3-padding-hor-16">Eve</li>
  <li class="w3-padding-hor-16">Adam</li>
</ul>
»그에게 자신을보십시오

아바타 목록

  • 엑스 마이크
    웹 디자이너
  • 엑스 처녀
    지원하다
  • 엑스 여자
    회계 원

<ul class="w3-ul w3-card-4">
  <li class="w3-padding-hor-16">
    <span onclick="this.parentElement.style.display='none'"
    class="w3-closebtn w3-padding">x</span>
    <img src="img_avatar2.png" class="w3-left w3-circle" style="width:60px">
    <span class="w3-xlarge">Mike</span><br>
    <span>Web Designer</span>
  </li>
</ul>
»그에게 자신을보십시오

작은 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-tiny">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

작은 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-small">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

큰 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-large">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

아주 크게 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-xlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

XXLarge 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-xxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

XXXLarge 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-xxxlarge">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오

점보 목록

  • 처녀
  • 이브
  • 아담

<ul class="w3-ul w3-jumbo">
  <li>Jill</li>
  <li>Eve</li>
  <li>Adam</li>
</ul>
»그에게 자신을보십시오