# 1 Model kotak

Struktur situs pemahaman

Semua elemen pada halaman ini semua blok dalam blok lain (alias "Box Model"). Ketika menyeret elemen web, Anda menyeret mereka dari satu blok dan menjatuhkan mereka ke lain. Begitulah cara HTML bekerja!

RENCANA Super

$ 75 / mon

Sempurna untuk setiap bisnis dengan 20 atau lebih karyawan.

500GB Storage
1 Juta Tampilan Halaman
20 Kolaborator
50 Jaringan Sosial
Premium Dukungan

Apa yang kamu lihat

Catatan: Anda akan memahami bagaimana merancang sesuatu seperti ini dengan konsep di bawah ini.

Apa Blok Ini terbuat dari

Div Blok

H2 Pos RENCANA Super

Teks Blok $ 75 / mon

Ayat Sempurna untuk setiap bisnis dengan 20 atau lebih karyawan.

Daftar

Daftar Barang
500GB Storage
Daftar Barang
1 Juta Tampilan Halaman
Daftar Barang
20 Kolaborator
Daftar Barang
50 Jaringan Sosial
Daftar Barang
Premium Dukungan

coba sendiri

Tarik ayat ini ...

Semua fitur tanpa keterbatasan. Semua Anda dapat makan. (Ini adalah elemen ayat)

TIP: Klik dan tarik elemen Ayat di atas dan menjatuhkannya di bawah harga di sebelah kanan. Anda juga dapat menggunakan jalan pintas seperti copy dan paste (ctrl + c, ctrl + v), menyalin sambil menyeret (memegang alt), dan menghapus (delete key).

Ke blok ungu ...

Super RENCANA

$ 75 / mon

INFO: Ini adalah bagaimana struktur HTML dan web bekerja - elemen tumpukan bawah satu sama lain atau di dalam satu sama lain. Itulah cara terbaik untuk membangun sebuah website cairan dan responsif.

# 2 UNSUR LAYOUT

Elemen tata letak dasar

Menambahkan elemen ke website Anda dengan mengklik [+] icon di pojok kiri atas. Berikut adalah beberapa elemen yang paling dasar struktur dalam desain web - bagian, wadah dan kolom.

Sebuah Bagian memakan 100% dari lebar jendela browser jika Anda menambahkannya ke Tubuh (kanvas website).
Ini bagus untuk bagian horisontal besar dari sebuah situs web.

Bagian Elemen

Sebuah kontainer adalah 960px blok berpusat di tengah browser. Biasanya konten situs web yang paling ditambahkan dalam suatu wadah sehingga itu berpusat. Wadah biasanya ditambahkan ke tubuh atau elemen Bagian.

Kontainer Element

Menambahkan Kolom adalah cara tercepat untuk membangun tata letak situs web yang unik. Untuk mengedit berapa banyak kolom yang Anda inginkan dalam perangkat yang berbeda, klik pada Gear Icon di pojok kanan atas untuk mengakses pengaturan elemen.

Kolom responsif

# 3 Merancang dengan CSS

Styling elemen Anda

Pilih elemen dan menambahkan kelas di kanan gaya panel (Brush Icon). Dalam panel ini Anda dapat menambahkan teks dan gaya grafis seperti warna font, tinggi baris, gradien, perbatasan, bayangan, dan banyak lagi. Desain web visual cara yang lebih menyenangkan daripada coding yang tepat?

desain tombol contoh

Tambahkan ke Cart ➜

Gaya sendiri

Tombol Text ➜

TIP: Tombol ini sudah memiliki kelas "Tombol" dengan beberapa gaya dasar. Pilih tombol dan mencoba untuk menambahkan gradien, perbatasan, sudut dibulatkan, di dalam / luar bayangan, membawa gaya negara, dan transisi untuk gaya melayang - semua menggunakan panel gaya.

Apa yang Anda buat

Tombol Text ➜

menerapkan 'tombol' kelas

Tombol Text

TIP: Dalam desain web Anda dapat menerapkan kelas untuk banyak unsur untuk membuat mereka terlihat sama. Terapkan "tombol" kelas yang Anda bergaya ke link di atas dengan mengklik [+] di bagian atas panel Style dan mengetik "Button" untuk menemukan kelas yang.

Form Desain contoh

Terima kasih!

Batu Anda kaus!

Ups! Terjadi kesalahan saat mengirimkan formulir :(

Gaya sendiri

Terima kasih! Kiriman Anda telah diterima!

Ups! Terjadi kesalahan saat mengirimkan formulir :(

TIP: Pertama membuat kelas untuk bidang teks dan tombol (menerapkan kelas yang sama untuk kedua bidang). Kemudian mengubah gaya perbatasan, warna latar belakang, dan menambahkan gaya untuk hover & negara ditekan. Jangan lupa untuk gaya "Sukses" negara untuk elemen Form, ditemukan dalam pengaturan panel (Aksesoris Icon di kanan atas).

Misalnya Tipografi

Lakewood Stout

The Dark Beer dari Lakewood, Colorado

Gemuk legendaris lahir dari perkawinan yang indah dari seorang pria gunung dan hal yang paling dicintai, kota Lakewood di Colorado. Pria gunung juga menyukai kapaknya dan single-shot Remington senapan, tapi tidak sebanyak ia mencintai kotanya. Dia bermimpi sungai flowy dan gunung agung. Jadi dia bernama gemuk yang terbesar setelah dia. Jadi gemuk mulia itu melahirkan dari hati manusia gunung.

"Saya dibuat bir yang mulia ini untuk mengungkapkan cinta abadi saya untuk kota yang indah saya."

- Mountain Man

Gaya sendiri

Lakewood Stout

The Dark Beer dari Lakewood, Colorado

"Saya dibuat bir yang mulia ini untuk mengungkapkan cinta abadi saya untuk kota yang indah saya."

- Mountain Man

TIP: Pergi ke depan dan menambahkan tipografi kustom dan gaya untuk latar belakang. Keren tip: Jika Anda menambahkan gaya tipografi untuk blok tua, semua elemen anak teksnya akan mewarisi mereka gaya teks. Dalam CSS perilaku ini disebut "Cascading".

# 4 Tata Letak dengan CSS

Layout bangunan web dengan CSS

Mirip dengan menambahkan gaya untuk elemen, untuk mengubah posisi dari elemen pertama menambahkan kelas dan kemudian mengedit properti posisi. Anda akan belajar tentang Margin, Padding, Display, Lampung, Overflow, dan Posisi.

Margin & Padding contoh

Breaking News

Agen federal Raid Gunshop, Cari Senjata

Pemilik toko Steve Witmere sebelumnya ditangkap untuk perdagangan blackmarket bazooka. Mengaku keterlibatan dalam mafia Rusia.

Di antara banyak bazooka ditemukan di Gunshop yang puluhan ribu lukisan yang diperoleh secara ilegal senilai setidaknya $ 10.000. Thats harga yang mahal untuk membayar ini lukisan bodoh.

Keterangan: Margin dan padding dapat ditemukan di palet Posisi panel Style. Menambahkan Margin akan menambah ruang luar blok, dan menambahkan Padding akan menambah ruang dalam blok.

Tambahkan jarak Diri

Breaking News

Agen federal Raid Gunshop, Cari Senjata

Pemilik toko Steve Witmere sebelumnya ditangkap untuk perdagangan blackmarket bazooka. Mengaku keterlibatan dalam mafia Rusia.

Di antara banyak bazooka ditemukan di Gunshop yang puluhan ribu lukisan yang diperoleh secara ilegal senilai setidaknya $ 10.000. Thats harga yang mahal untuk membayar ini lukisan bodoh.

TIP: Mulailah dengan menambahkan padding di semua sisi blok abu-abu utama (elemen induk). Kemudian tambahkan margin bawah untuk menambahkan jarak antara unsur-unsur teks individu (anak elemen). Petunjuk: Tahan SHIFT saat menggunakan kontrol marjin / padding untuk berlaku untuk semua pihak dan ALT juga berlaku untuk pihak lawan.

'Tampilan: Block' contoh

Judul ini diatur ke Tampilan: Block

Ayat ini diatur ke Tampilan: Block. Sehingga memenuhi lebar jendela tua dan tumpukan di atas blok lainnya.

Tombol dengan Tampilan: Blokir Tombol dengan Tampilan: Blok Link ini diatur ke Tampilan: Block Link ini diatur ke Tampilan: Block

Keterangan: Mengatur Pengaturan Tampilan elemen 'ke Block akan membuat mereka menumpuk di atas satu sama lain dan mengisi 100% lebar blok induknya. Kebanyakan elemen benar-benar memiliki pengaturan ini secara default.

Membuat mereka 'Tampilan: Block' sendiri

Ini adalah Tombol ini adalah tombol Link yang Tampilan: Inline secara default Link yang Tampilan: Inline secara default

TIP: Pilih elemen ini (beberapa Inline Block dan beberapa Inline) dan membuat mereka Tampilan: Blokir sehingga mereka menumpuk di atas satu sama lain.

'Tampilan: inline-block' contoh

Ambil Sunting Hapus

Keterangan: Mengatur Pengaturan Tampilan elemen 'untuk Inline-Blok akan membuat lebar blok sesuai dengan lebar isi di dalamnya. Itu berarti jika konten mereka cukup kecil mereka dapat menumpuk di samping satu sama lain. Anda dapat copy paste tombol di atas dan mengedit teks dalam untuk melihat cara kerjanya.

membuat mereka inline-blok sendiri

Ambil Sunting

TIP: Pilih elemen di atas dan membuat mereka Tampilan: Inline-block sehingga mereka menumpuk di samping satu sama lain. Anda akan melihat bahwa gambar tumpukan sebelah tombol. Tip: Menjatuhkan tombol dan gambar menjadi terpisah Blok Div akan membuat mereka menumpuk di atas satu sama lain (karena Div Blok adalah Tampilan: Blokir secara default).

Mengapung contoh

Terima kasih! Kiriman Anda telah diterima!

Ups! Terjadi kesalahan saat mengirimkan formulir :(

Keterangan: Mengatur Tampilan: Inline-Blok atau Mengambang (contoh ini) adalah cara yang paling umum untuk stack elemen berdampingan. Dalam contoh ini saya akan menunjukkan cara untuk mengapung sesuatu.

Mengapung sendiri

Terima kasih! Kiriman Anda telah diterima!

Ups! Terjadi kesalahan saat mengirimkan formulir :(

TIP: Pertama pilih kolom teks, membuatnya mengambang: Kiri dan memberikan lebar persentase (ex: 60%). Kemudian mengatur tombol ke Float: Left juga dan mengatur lebar persentase lain (ex: 40%) sehingga mereka berdua menambahkan hingga 100%. Itu cara manual untuk memaksa setiap elemen tumpukan berdampingan.

Absolute Posisi Contoh

Piala saya Joe

Ini adalah teks foto caption.

Unggulan

Keterangan: Jika Anda mengatur Posisi untuk Absolute pada elemen, Anda akan dapat posisi itu di mana saja di dalam blok induknya. Untuk memilih orang tua untuk posisi dalam, mengatur posisi elemen induk untuk Relatif. Catatan: Bila elemen yang mutlak diposisikan mereka melayang di atas unsur-unsur lain.

Gaya Sendiri

Piala saya Joe

Ini adalah keterangan foto untuk secangkir favorit saya dari Joe.

Unggulan

TIP: Pertama pilih elemen Gambar Wrapper dan mengatur posisi untuk relatif. Berikutnya pilih judul, drag ke gambar set itu Posisi ke Absolute dan memilih preset 7. Untuk posisi Unggulan lencana ke tempat yang benar memilih 2 preset dan manual posisi itu.

# 5 Gaya Cascading

Memanfaatkan Cascading Styles

Anda dapat dengan mudah membuat variasi elemen dengan menambahkan kelas tambahan di atas satu sama lain dan menambahkan gaya yang berbeda dari kelas-kelas. Lihat contoh di bawah ini di mana kita memiliki variasi yang berbeda tombol.

Bersama gaya tombol contoh

Desain tombol sendiri

Tombol GREEN

RED Tombol

TIP: Pilih tombol kedua dan klik pada [+] di sebelah kelas untuk menambahkan kelas lain. Anda dapat menyebutnya "Hijau". Kemudian memberikan gaya yang berbeda. Gaya ini akan menimpa gaya dasar kelas pertama. Kemudian membuat tombol merah.

# 6 pertanyaan media

Merancang untuk perangkat yang berbeda

Dalam Webflow Anda pertama desain website Anda untuk perangkat desktop dan kemudian membuat perubahan pada perangkat mobile (mengakses ikon Perangkat di bar atas). Menambahkan gaya dalam perangkat mobile akan menimpa gaya desktop yang.

Responsif Pos contoh

Ini adalah beberapa teks judul yang semakin kecil dalam perangkat mobile.

Keterangan: pos ini benar-benar besar pada desktop, tapi kami ingin menjadi lebih kecil pada perangkat mobile. Klik di perangkat di bar atas untuk melihat bahwa ukuran teks dan garis tinggi menurun.

Fix It diri Anda

Membuat teks judul besar mendapatkan lebih kecil dalam perangkat mobile.

TIP: Pilih judul ini pada perangkat Tablet dan membuat ukuran font dan tinggi baris lebih kecil. Lakukan hal yang sama untuk Telepon Landscape dan Telepon Portrait perangkat. Anda dapat melihat bahwa

Tombol responsif contoh

Tombol Text

Keterangan: Tombol ini dimaksudkan untuk menjadi kecil di layar Desktop karena mudah klik dengan kursor mouse. Kami membuat lebih besar pada perangkat mobile sehingga lebih mudah untuk tekan dengan jari

Tombol Text

Fix It diri Anda

TIP: Pergi ke perangkat Tablet dan meningkatkan padding tombol. Ketika Anda melakukan itu akan menimpa gaya sebelumnya ditetapkan pada Desktop dan akan kaskade ke semua perangkat di bawah ini Tablet.

Kolom responsif contoh