이미지 표시
둥근 :
원:
경계 :
본문:
자연
둥근 이미지
W3 라운드 클래스는 이미지에 둥근 모서리를 추가합니다 :
원 이미지
W3-원 클래스는 원에 이미지를 모양 :
경계 이미지
W3 국경 클래스는 이미지 주위에 테두리를 추가합니다 :
Hoverable 이미지
W3-가져가 - 불투명도 클래스는 마우스 오버의 이미지에 투명도를 추가합니다 :
카드로 이미지
카드 (그림자를 추가)로 표시하려면 <IMG> 요소 주위 W3 - 카드 - * 클래스 중 하나를 감싸 :
시몬
모든 보스의 보스
이미지 텍스트
W3 - 디스플레이 - 클래스와 이미지의 텍스트를 위치 :
왼쪽 위
오른쪽 상단
왼쪽 아래
오른쪽 아래
중간
예
<div class="w3-display-container">
<img src="img_lights.jpg"
alt="Lights">
<div class="w3-display-topleft w3-container">Top
Left</div>
<div class="w3-display-topright w3-container">Top
Right</div>
<div class="w3-display-bottomleft w3-container">Bottom
Left</div>
<div class="w3-display-bottomright w3-container">Bottom
Right</div>
<div class="w3-display-middle w3-large">Middle</div>
</div> »그에게 자신을보십시오 사진 앨범을 구축
이 예에서 우리는 모든 장치에서 잘 보이는 사진 앨범을 만들 수 W3.CSS 응답 그리드 시스템을 사용합니다. 나중에 이것에 대해 더 많은 것을 배우게됩니다.
여름 2015
5 테레
몬테 로쏘
의 Vernazza
에 Manarola
코르 닐리 아
리오 마조 레 (Riomaggiore)
예
<div class="w3-third">
<div class="w3-card-2">
<img src="img_monterosso.png" style="width:100%">
<div
class="w3-container">
<h4>Monterosso</h4>
</div>
</div>
</div>
»그에게 자신을보십시오