최신 웹 개발 튜토리얼
 

W3.CSS경계


국경 클래스

W3.CSS 테두리 클래스가 어떤 HTML 요소에 사용될 수있다.

나는 모든면에 테두리가 있습니다.


나는 빨간색 아래쪽 테두리를


나는 둥근 테두리가 있습니다.


나는 푸른 leftbar 있습니다.

<div class="w3-border">
  <p>I have borders on all sides.</p>
</div>

<div class="w3-border-bottom w3-border-red">
  <p>I have a red bottom border.</p>
</div>

<div class="w3-border w3-round-xlarge">
  <p>I have rounded borders.</p>
</div>

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>I have a blue leftbar.</p>
</div>
»그에게 자신을보십시오

주의 사항 표시

노트는 종종 옅은 색상과 색상 막대로 표시됩니다 :

런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>
»그에게 자신을보십시오

패널 표시

패널 만 가지 방법으로 표시 할 수있다 :

런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.


런던은 영국의 수도 도시입니다. 그것은 만 13 이상 주민의 대도시 지역으로, 영국에서 가장 인구가 많은 도시입니다.

<div class="w3-container w3-light-grey w3-border">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div> 
»그에게 자신을보십시오

따옴표 표시

W3 컨테이너 클래스는 따옴표를 표시하는 데 사용할 수 있습니다.

"수 있지만 단순한으로는 간단합니다."

알버트 아인슈타인


"수 있지만 단순한으로는 간단합니다."

알버트 아인슈타인


"수 있지만 단순한으로는 간단합니다."

알버트 아인슈타인

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div> 
»그에게 자신을보십시오

당신이 HTML <인용구>를 사용하는 경우, HTML은 별도의 왼쪽 여백을 추가 할 것입니다 기억 :

"수 있지만 단순한으로는 간단합니다."

알버트 아인슈타인

<blockquote class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</blockquote> 
»그에게 자신을보십시오

Hoverable 테두리

W3-가져가 - 테두리 - 색상 클래스는 마우스 오버에 테두리의 색상을 변경 :

레드 hoverable 경계


호버에 파란색으로 변 보라색 테두리


호버에 녹색으로 변합니다 빨간색 막대.

<div class="w3-container w3-border w3-hover-border-red">
  <p>Red hoverable border</p>
</div>
»그에게 자신을보십시오

코드 표시

HTML 예

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
»그에게 자신을보십시오

CSS 예

<div class="w3-code cssHigh">

.. CSS code here

</div>
»그에게 자신을보십시오

자바 스크립트 예제

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
»그에게 자신을보십시오