W3.CSS 소개 (주방싱크대)
W3.CSS 색상
w3-color 클래스 는 마케팅, 도로 표지판 및 스티커 메모에 사용되는 현대적인 색상에서 영감을 받았습니다.
W3.CSS 컨테이너
w3-container 클래스 는 W3.CSS 클래스 중 가장 중요합니다. 다음과 같은 평등을 제공합니다.
- 공통 여백
- 일반적인 패딩
- 일반적인 수직 정렬
- 일반적인 수평 정렬
- 일반 글꼴
- 일반적인 색상
w3-container 클래스는 일반적으로 다음과 같은 HTML 컨테이너 요소와 함께 사용됩니다.
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> 등.
헤더입니다
이 기사는 밝은 회색이고 텍스트는 갈색입니다. 이 기사는 밝은 회색이고 텍스트는 갈색입니다. 이 기사는 밝은 회색이고 텍스트는 갈색입니다. 이 기사는 밝은 회색이고 텍스트는 갈색입니다. 이 기사는 밝은 회색이고 텍스트는 갈색입니다.
바닥글입니다.
W3.CSS 패널, 메모 및 인용문
w3-panel 클래스 는 모든 종류의 메모와 인용문을 표시할 수 있습니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
런던은 900만 명이 넘는 인구가 거주하는 대도시권으로 영국에서 가장 인구가 많은 도시입니다.
W3.CSS 경고
w3-panel 클래스 는 모든 종류의 경고에도 사용할 수 있습니다.
위험!
빨간색은 종종 위험하거나 부정적인 상황을 나타냅니다.
경고!
노란색은 주의가 필요할 수 있는 경고를 나타냅니다.
성공!
녹색은 종종 성공 또는 긍정적인 것을 나타냅니다.
정보!
파란색은 종종 중립적인 정보 변경 또는 조치를 나타냅니다.
예시
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS 카드
w3-card 클래스 는 이미지와 메모 모두에 적합합니다.
차
자동차는 운송에 사용되는 바퀴가 달린 자체 동력 자동차입니다. 용어에 대한 대부분의 정의는 자동차가 주로 도로에서 달리고 1~8명이 앉을 수 있으며 일반적으로 4개의 바퀴가 있도록 설계되었음을 지정합니다.
(위키피디아)
놀라운
프랑스 알프스
예시
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
W3.CSS 테이블
w3-table 클래스 는 모든 종류의 테이블을 처리할 수 있습니다.
| 이름 | 성 | 포인트들 |
|---|---|---|
| 처녀 | 스미스 | 50 |
| 이브 | 잭슨 | 94 |
| 아담 | 존슨 | 67 |
| 안자 | 구경 | 100 |
예시
<table class="w3-table w3-striped w3-border">
W3.CSS 목록
w3-ul 클래스 는 모든 종류의 목록을 처리할 수 있습니다.
-
마이크
웹 디자이너 -
질
지원 -
제인
회계사 -
잭
어드바이저
예시
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSS 버튼
w3-button 및 w3-btn 클래스는 모든 크기와 유형의 버튼을 제공합니다 .
와이드 버튼:
원형 또는 사각형 버튼:
W3.CSS 태그, 레이블, 배지 및 기호
w3-tag 및 w3-badge 클래스 는 모든 종류의 태그, 레이블, 배지 및 기호를 표시할 수 있습니다.
2 8 ㅏ 비
새로운 경고 위험 정보
을 쉬지 마십시오
W3.CSS 반응형
Responsive Grid 클래스는 PC, 노트북, 태블릿, 모바일 등 모든 장치 유형에 대한 응답 성 을 제공합니다.
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50픽셀
쉬다
1/4
쉬다
100픽셀
45픽셀
쉬다
W3.CSS는 또한 소형, 중형 및 대형 클래스 의 12열 모바일 우선 유체 그리드 를 지원합니다.
W3.CSS 디스플레이
w3-display 클래스를 사용하면 특정 위치에 HTML 요소를 표시할 수 있습니다 .
W3.CSS 모달
w3-modal 클래스는 순수 HTML에서 모달 대화 상자를 제공합니다 .
모달 이미지:
W3.CSS 진행률 표시줄
W3.CSS 진행률 표시줄 에서 자세히 알아보기
W3.CSS 드롭다운
w3-dropdown 클래스는 드롭다운을 제공합니다 .
W3.CSS 아코디언
W3.CSS 아코디언 에서 더 읽어보기
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS 탭
탭 은 단일 페이지 웹 응용 프로그램이나 다른 주제를 표시할 수 있는 웹 페이지에 적합합니다.
런던
런던은 영국의 수도이다.
영국에서 가장 인구가 많은 도시로 인구 900만 명이 넘는 대도시권이 있습니다.
탭 이미지 갤러리(사진 중 하나를 클릭):
W3.CSS 탐색
w3-bar 클래스를 사용하여 탐색 모음을 만들 수 있습니다 .
입력이 있는 탐색 모음:>
드롭다운이 있는 탐색 모음:
w3-sidebar 클래스 는 측면 탐색을 생성합니다.
W3.CSS 페이지 매김
W3.CSS는 페이지 페이지 매김 을 위한 간단한 방법을 제공합니다 .
Slideshows
W3.CSS provide slideshows for cycling through images or other content:
Lightbox
Combine Modals and Slideshows to create a lightbox (modal image gallery):
Nature and sunrise
❮ ❯
W3.CSS Animations
The w3-animate classes provide an easy way to slide and fade in elements:
W3.CSS Images
Styling images in W3CSS is easy:
W3.CSS Effects
Add special effects to any element:
Opacity
Grayscale
Sepia
W3.CSS Input Forms
The w3-input classes are for input forms:
Input Form
Input Form
W3.CSS Filters
Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:
| Name | Country |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS Fonts
With W3.CSS it is extremely easy to add fonts to a web page:
W3.CSS Tooltips
The w3-tooltip class can display all kinds of tooltips:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
Color Themes
Color themes can easily be added to any web application:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Color themes are a perfect match for mobile applications.