tutorial pengembangan web terbaru
 

W3.CSS intro


Warna W3.CSS

The w3-warna kelas terinspirasi oleh warna-warna modern yang digunakan dalam pemasaran, rambu-rambu jalan, dan catatan tempel:

Merah

hijau

Biru

Hitam

Berwarna merah muda

Teal

Nila

Coklat

Jeruk

cyan

Ungu

Abu-abu

Kuning

jeruk nipis

Dril

Abu-abu muda


W3.CSS Panel, Notes, dan Quotes

The w3-kontainer kelas dapat menampilkan semua jenis catatan dan kutipan:

London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


London adalah ibukota Inggris. Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.


"Buatlah sesederhana mungkin, tetapi tidak sederhana."

Albert Einstein


W3.CSS header dan footer

The w3-kontainer kelas juga memberikan solusi untuk semua jenis header dan footer:

Header


Footer saya

Informasi footer goes here


W3.CSS Alerts

The w3-kontainer kelas juga dapat digunakan untuk semua jenis lansiran:

×

Bahaya!

Red sering menunjukkan tindakan yang berbahaya atau berpotensi negatif.

×

PERINGATAN!

Kuning dan oranye sering menunjukkan peringatan yang mungkin memerlukan perhatian.

×

Keberhasilan!

Hijau sering menunjukkan tindakan berhasil atau positif.

×

Info!

Biru sering menunjukkan perubahan informatif netral atau tindakan.


Kartu W3.CSS

The w3-kartu kelas yang suitible untuk kedua gambar dan catatan:

Mobil

w3-card-2

Mobil

w3-card-4

Mobil

w3-card-8

Header

Sebuah mobil adalah roda, self-powered kendaraan bermotor yang digunakan untuk transportasi. Sebagian besar definisi dari istilah menetapkan bahwa mobil dirancang untuk berjalan terutama di jalan-jalan, telah duduk untuk satu sampai delapan orang, dan biasanya memiliki empat roda.

(Wikipedia)


Tabel W3.CSS

The w3-meja kelas dapat menangani semua jenis tabel:

Nama depan Nama keluarga poin
Jill pandai besi 50
Malam jackson 94
Adam Johnson 67
Anja Membosankan 100

Daftar W3.CSS

The w3-ul class dapat menangani semua jenis daftar:

  • × mikropon
    Desainer web
  • × Jill
    Mendukung
  • × Jane
    Akuntan
  • × Mendongkrak
    Advisor

Tombol W3.CSS

The w3-btn kelas menyediakan tombol dari semua ukuran dan jenis.


The w3-btn-mengambang tombol yang melingkar dan dimaksudkan untuk fungsi penting.

+ + +


W3.CSS Tag dan Lencana

The w3-tag dan w3-lencana kelas yang mampu menampilkan semua jenis tag, lencana dan tanda-tanda:

2 8 A B

New Peringatan Bahaya Info

Falcon Ridge Parkway

S
SEBUAH
L
E

TIDAK
BERNAFAS
UNDER WATER

W3.CSS Responsif

The Grid responsif kelas memberikan respon untuk semua jenis perangkat: PC, laptop, tablet, dan ponsel.

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

beristirahat

1/4

beristirahat

100px

45px

beristirahat

W3.CSS juga mendukung 12 kolom mobile-first jaringan cairan dengan kecil, menengah, dan kelas besar.


W3.CSS kata modal

The w3-modal kelas menyediakan modal dialog di HTML murni:

×

Header

Beberapa teks. Beberapa teks. Beberapa teks.

Beberapa teks. Beberapa teks. Beberapa teks.

Footer



Modal Gambar:

Alam
×
Alam

Bar W3.CSS Kemajuan

The w3-progressbar kelas menciptakan kemajuan bar:

25%

50%



W3.CSS dropdown

The w3-dropdown kelas menyediakan dropdown:


W3.CSS akordion

The w3-akordeon kelas menyediakan akordion:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accordion dengan Images:

Trolltunga, Norwegia


W3.CSS Tabs

Tab yang sempurna untuk aplikasi halaman web tunggal, atau untuk halaman web yang mampu menampilkan mata pelajaran yang berbeda.

London

London adalah ibukota Inggris.

Ini adalah kota terpadat di Inggris, dengan wilayah metropolitan lebih dari 13 juta penduduk.

Paris

Paris adalah ibu kota Prancis.

Wilayah Paris adalah salah satu pusat populasi terbesar di Eropa, dengan lebih dari 12 juta penduduk.

Tokyo

Tokyo adalah ibu kota Jepang.

Ini adalah pusat Greater Tokyo Area, dan daerah metropolitan terpadat di dunia.



Tab Galeri:

Alam
Fjords
pegunungan
lampu

Alam ×
Alam
Fjords ×
Fjords
pegunungan ×
pegunungan
lampu ×
Cahaya utara

W3.CSS Navigasi

The w3-navbar kelas menciptakan sebuah bar navigasi:




The w3-sidenav kelas menciptakan navigasi di sebelah:


W3.CSS Pagination

The w3-pagination kelas menyediakan cara yang mudah untuk navigasi halaman:




slideshow

W3.CSS menyediakan slideshow untuk bersepeda melalui gambar atau konten lainnya:

03/01
Alam yang indah
03/02
Trolltunga, Norwegia
03/03
pegunungan

W3.CSS Animasi

The w3-bernyawa kelas menyediakan cara mudah untuk meluncur dan memudar di elemen:


Animasi adalah Fun!
Animasi adalah Fun!
Animasi adalah Fun!
Animasi adalah Fun!
Animasi adalah Fun!
Animasi adalah Fun!
Animasi adalah Fun!

Gambar W3.CSS

Styling gambar di W3CSS mudah:

Cahaya utara
Hutan
pegunungan
Alam
Alam

Bentuk Masukan W3.CSS

The w3-masukan kelas yang untuk bentuk masukan:



Form Input


Form Input



W3.CSS Font

Dengan W3.CSS itu sangat mudah untuk menambahkan font ke halaman web:

Membuat web yang indah!
Membuat Web!

W3.CSS Tooltips

The w3-tooltip kelas dapat menampilkan semua jenis tooltips:

Arahkan kursor ke atas teks ini! Konten Tooltip

Arahkan kursor ke atas teks ini! Konten Tooltip

Arahkan kursor ke atas teks ini! Konten Tooltip

Mobil

Sebuah mobil adalah roda, self-powered kendaraan bermotor yang digunakan untuk transportasi. Sebagian besar definisi dari istilah menetapkan bahwa mobil dirancang untuk berjalan terutama di jalan-jalan.


Tema Warna Mobile

Tema yang telah ditetapkan warna khusus cocok untuk aplikasi web mobile.

tema Indigo

film 2014

  • Beku

    Tanggapan terhadap animasi konyol

  • The Patahan di Stars kami

    Menyentuh, mencengkeram dan benar-benar dibuat dengan baik

  • Penuntut balas

    Sebuah sukses besar untuk Marvel dan Disney

«»

Teal tema

film 2014

  • Beku

    Tanggapan terhadap animasi konyol

  • The Patahan di Stars kami

    Menyentuh, mencengkeram dan benar-benar dibuat dengan baik

  • Penuntut balas

    Sebuah sukses besar untuk Marvel dan Disney

«»