W3.CSS- Intro (Küchenspüle)
W3.CSS-Farben
Die w3-Farbklassen sind von modernen Farben inspiriert, die in Marketing, Straßenschildern und Haftnotizen verwendet werden:
W3.CSS-Container
Die w3-Container- Klasse ist die wichtigste der W3.CSS-Klassen. Es bietet Gleichheit wie:
- Gemeinsame Margen
- Gemeinsame Polsterung
- Gemeinsame vertikale Ausrichtungen
- Gemeinsame horizontale Ausrichtungen
- Gängige Schriftarten
- Gemeinsame Farben
Die w3-container-Klasse wird normalerweise mit HTML-Containerelementen verwendet, wie:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> und mehr.
Dies ist eine Kopfzeile
Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun.
Dies ist eine Fußzeile.
W3.CSS Panels, Notizen und Zitate
Die Klasse w3-panel kann alle Arten von Notizen und Zitaten anzeigen:
London ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 9 Millionen Einwohnern.
London ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 9 Millionen Einwohnern.
W3.CSS-Warnungen
Die Klasse w3-panel kann auch für alle Arten von Warnungen verwendet werden:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Warnung!
Gelb weist oft auf eine Warnung hin, die möglicherweise beachtet werden muss.
Erfolg!
Grün weist oft auf etwas Erfolgreiches oder Positives hin.
Die Info!
Blau zeigt oft eine neutrale informative Änderung oder Aktion an.
Beispiel
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
W3.CSS-Karten
Die w3-Kartenklassen eignen sich sowohl für Bilder als auch für Notizen:
Einen Wagen
Ein Auto ist ein fahrbares, selbstangetriebenes Kraftfahrzeug, das für den Transport verwendet wird. Die meisten Definitionen des Begriffs geben an, dass Autos hauptsächlich für den Straßenverkehr ausgelegt sind, Sitzplätze für ein bis acht Personen bieten und typischerweise vier Räder haben.
(Wikipedia)
Tolle
Französische Alpen
Beispiel
<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-Tabellen
Die Klassen w3-table können mit allen Arten von Tabellen umgehen:
| Vorname | Nachname | Punkte |
|---|---|---|
| Jill | Schmied | 50 |
| Vorabend | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Langweilig | 100 |
Beispiel
<table class="w3-table w3-striped w3-border">
W3.CSS-Listen
Die Klasse w3-ul kann mit allen Arten von Listen umgehen:
-
Mike
Webdesigner -
Jill
-Unterstützung -
Jane
Buchhalterin -
Jack
Berater
Beispiel
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
W3.CSS-Schaltflächen
Die Klassen w3-button und w3-btn bieten Schaltflächen aller Größen und Typen.
Breite Tasten:
Runde oder quadratische Tasten:
W3.CSS-Tags, Etiketten, Abzeichen und Zeichen
Die Klassen w3-tag und w3-badge sind in der Lage, alle Arten von Tags, Etiketten, Abzeichen und Schildern anzuzeigen:
2 8 EIN B
Neu Warnung Achtung Die Info
ATMEN SIE NICHT
UNTER WASSER
W3.CSS Responsiv
Die Responsive Grid -Klassen bieten Reaktionsfähigkeit für alle Gerätetypen: PC, Laptop, Tablet und Mobilgerät.
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
50px
Rest
1/4
Rest
100px
45px
Rest
W3.CSS unterstützt auch ein 12-Spalten-Mobile-First-Fluid-Grid mit kleinen, mittleren und großen Klassen.
W3.CSS-Anzeige
Mit den w3-display- Klassen können Sie HTML-Elemente an bestimmten Positionen anzeigen:
W3.CSS-Modale
Die Klasse w3-modal stellt einen modalen Dialog in reinem HTML bereit:
Modales Bild:
W3.CSS-Fortschrittsbalken
Lesen Sie mehr unter W3.CSS-Fortschrittsbalken
W3.CSS-Dropdowns
Die w3-Dropdown- Klassen bieten Dropdowns:
W3.CSS Akkordeons
Read more at W3.CSS Accordions
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 Tabs
Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.
London
London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tabbed Image Gallery (Click on one of the pictures):
W3.CSS Navigation
The w3-bar class can be used to create a navigation bar:
Navigation bar with input:>
Navigation bar with dropdown:
The w3-sidebar class creates a side navigation:
W3.CSS Pagination
W3.CSS provides simple ways for page pagination.
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.