처음부터 반응 형 웹 사이트를 구축
이 장에서 우리는 처음부터 W3.CSS 반응 웹 사이트를 구축 할 것입니다.
첫째, 초기 뷰포트와 W3.CSS에 대한 링크와 함께 간단한 HTML 페이지를 시작합니다.
예
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html> »그것을 자신을 시도 컨테이너의 요소를 넣어
이제 우리는 모든 요소에 공통의 마진과 패딩을 추가해야합니다.
이를 위해, 용기 내부 당신의 HTML 요소를 넣어 (<DIV 클래스 = "W3 컨테이너">)
가능 헤더에 대해 별도의 클래스를 정의 할 수 있습니다. 별도로 <div> 요소를 사용하여, 컨텐츠의 나머지 헤더 별개 :
예
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div> »그것을 자신을 시도 색상 클래스
컬러 클래스는 요소의 색을 정의한다.
이 예는 첫 번째 <DIV> 요소에 색상을 추가합니다 :
예
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»그것을 자신을 시도 크기 클래스
공간 클래스는 요소에 대한 텍스트 크기를 정의한다.
이 예는 두 헤더 요소에 크기를 추가합니다 :
예
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
»그것을 자신을 시도 시맨틱 요소를 사용하여
당신은 HTML5 의미 권고를 따르십시오. 제발!
 | 당신이 <div> 또는 <헤더> 사용하는 경우는 W3.CSS에 대한 문제가되지 않습니다. |
|---|
예
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://www.w3ii.com/lib/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html> »그것을 자신을 시도 여러 열 응답 레이아웃
W3.CSS으로는 여러 열 반응 레이아웃을 쉽게 만들 수 있습니다.
다양한 화면 크기에서 볼 때 열은 자동으로 자신을 재 배열 할 것이다.
일부 그리드 규칙 :
- 행 클래스 <DIV 클래스 = "W3 행 패딩">로 시작
- 빨리 그리드 열을 만들기 위해 "W3-제"와 같은 미리 정의 된 클래스를 사용하여
- 그리드 열 안에 텍스트 콘텐츠를 배치
이 예는 동일한 폭의 세 개의 열을 만드는 방법을 보여줍니다 :
예
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »그것을 자신을 시도 이 예는 동일한 폭의 네 개의 열을 만드는 방법을 보여줍니다 :
예
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »그것을 자신을 시도 다른 폭으로 열
이 예에서는 중앙에 열이 첫 번째와 마지막 열보다 넓은 세 열 레이아웃을 작성
예
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div> »그것을 자신을 시도 탐색 바
네비게이션 바는 페이지 상단에 위치 탐색 헤더입니다.
예
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> »그에게 자신을보십시오 사이드 탐색
측면 탐색, 당신은 몇 가지 옵션이 있습니다 :
- 항상 페이지 내용의 왼쪽에있는 탐색 창을 표시합니다.
- 페이지 내용의 왼쪽 부분을 숨기고, 탐색 창을 엽니 다.
- 페이지의 모든 콘텐츠를 숨기고, 탐색 창을 엽니 다.
- 탐색 창을 열 때 오른쪽에 페이지의 콘텐츠를 이동.
이 예는 페이지 내용의 일부를 숨기고, 탐색 창을 엽니 다 :
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
자바 스크립트를 열고 메뉴를 숨기는 데 사용 :
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
»그에게 자신을보십시오