컨테이너 클래스
W3 컨테이너 클래스는 클래스 W3.CSS 가장 중요하다.
W3 컨테이너 클래스와 같은 HTML 용기 요소의 모든 타입에 사용된다 :
<DIV>, <헤더>, <바닥 글>, <기사>, <섹션>, <인용구>, <형태> 등이 있습니다.
이 헤더는 녹색이다.
이 글은 빨간색입니다.
이 문서는 밝은 회색이며, 텍스트는 갈색이다.
컨테이너는 평등을 제공합니다
W3 컨테이너 클래스는 평등을 제공하는 것이 중요하다 :
- 일반 마진
- 일반 패딩
- 일반 수직 정렬
- 일반 수평 정렬
- 일반 글꼴
- 일반 색상
예
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
»그에게 자신을보십시오 색상을 추가하려면, 단지 w3- 색상 클래스를 추가 :
예
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
»그에게 자신을보십시오 머리글 및 바닥 글
W3 컨테이너 클래스는 헤더 스타일을 사용할 수 있습니다 :
제목 1
W3 컨테이너 클래스는 바닥 글 스타일을 사용할 수 있습니다 :
예
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
»그에게 자신을보십시오 기사 및 섹션
W3 컨테이너 클래스는 스타일 <기사>와 <섹션> 요소를 사용할 수 있습니다 :
예
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> »그에게 자신을보십시오  | 많은 웹 페이지 대신 <기사>의 <div> 요소와 <섹션> 요소를 사용합니다. |
|---|
노트, 패널, 그리고 지수
W3 컨테이너 클래스는 노트의 모든 종류를 표시하는 데 사용할 수 있습니다 :
예
<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> »그에게 자신을보십시오 W3 컨테이너 클래스는 패널의 모든 종류를 표시하는 데 사용할 수 있습니다 :
런던은 영국의 수도 도시입니다. 그것은 만 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>
»그에게 자신을보십시오 장으로 이동 W3.CSS 테두리 표시 노트, 패널 및 견적에 대한 자세한 내용을 보려면.
조합
머리글
자동차 교통에 사용되는 휠, 자체 전원 공급 차량입니다. 용어의 대부분의 정의는 자동차가 도로에서 주로 실행되도록 설계되어 있음을 지정합니다. (위키 백과)
HTML <div> 요소를 사용하여 예
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div> »그에게 자신을보십시오 HTML 의미 론적 요소를 사용하여 예
<header class="w3-container w3-red">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-red">
<h5>Footer</h5>
</footer> »그에게 자신을보십시오 컨테이너 패딩
W3 컨테이너 클래스는 기본 왼쪽 16px 오른쪽 패딩없이 상단 또는 하단 여백이 있습니다 :
일반적으로 당신은 단락과 제목이 패딩을 시뮬레이션 할 여백을 제공하기 때문에, 컨테이너의 기본 패딩을 변경할 필요가 없습니다.
나는 한 제목입니다
나는 단락입니다.
예
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
»그에게 자신을보십시오 컨테이너 단면
W3 컨테이너 클래스는 디폴트의 상단 또는 하단 여백이 없습니다.
그들 사이의 마진을 wothout 표시됩니다 두 용기 :
나는 한 제목입니다
나는 단락입니다.
나는 한 제목입니다
나는 단락입니다.
W3 섹션 클래스 용기를 분리하는데 사용될 수있다.그것은 16px 위쪽과 아래쪽 여백이 있습니다
나는 한 제목입니다
나는 단락입니다.
나는 한 제목입니다
나는 단락입니다.
예
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
»그에게 자신을보십시오 (결산) 컨테이너 숨기기
숨기기 또는 컨테이너를 폐쇄하는 것은 간단합니다 :
이 컨테이너를 닫으려면 오른쪽 위 모서리에있는 X를 클릭합니다.
예
<div class="w3-container w3-red">
<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>
<p>To close this container, click on the X in the upper right corner.</p>
</div>
»그에게 자신을보십시오 컨테이너 열기
밀폐 용기를 열기 쉽습니다 :
예
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<p>London is the capital city of
England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
»그에게 자신을보십시오