Menciptakan Fleksibel Layouts dengan CSS3

Menciptakan Fleksibel Layouts dengan CSS3.
Jadi CSS3 datang dikemas penuh banyak teknik baru dan
sifat yang dapat kita gunakan untuk lay out struktur dan
konten dalam halaman kita.
Sekarang, banyak dari teknik ini baru, dan mereka
spesifikasi menjalani perubahan sepanjang waktu.
Jadi browser mengalami waktu yang sulit menjaga dengan mereka.
Tapi masa depan tentu cerah.
Dan ini jenis hal-hal yang Anda akan
lihat merevolusi bagaimana kita lay out kami
struktur dan konten kami.
Jadi di bahasan ini ini, tujuan kami adalah untuk hanya mendapatkan akrab dengan semua
dari potongan-potongan ini, apa yang bisa mereka lakukan.
Kita akan mendapatkan beberapa demo pergi.
Kita akan melompat keluar di web dan melihat bagaimana mereka saat ini
diimplementasikan.
Dan kita akan mendapatkan akrab dengan beberapa kode sebagai
baik di sepanjang jalan.
Jadi kita akan menendang bahasan ini ini off dengan gambaran singkat.
Kita akan mendapatkan akrab dengan semua sifat CSS3 dan bagaimana
mereka terlihat di atas kertas.
Dan kemudian kita akan melompat ke situs Microsoft dan mendapatkan
akrab dengan masing-masing ini secara individual.
Mereka punya CSS3 besar tangan- daerah lebih dalam mereka
situs test drive.
Ini dasarnya generator kode untuk semua hal ini,
tapi benar-benar, apa yang ada adalah sehingga Anda dapat mempelajari semua
properti.
Dan kita bisa melakukannya langsung.
Jadi kita bisa mengubah properti yang kita inginkan karena berkaitan dengan masing-masing
salah satu teknologi tersebut.
Dan seperti yang kita mengubahnya, hal itu akan memberi kita output hidup.
Dan itu juga akan memberi kita kode bahwa itu menghasilkan.
Jadi itu adalah cara yang bagus untuk belajar bagaimana semua hal ini bekerja, dan
semuanya bekerja di IE 10.
Jadi itulah alasan lain.
Dan sementara kita mendapatkan akrab dengan hal ini juga, kami akan melompat
ke Virtual bahasan ini Lab.
Aku melemparkan bersama-sama hanya demo kecil yang membutuhkan banyak ini
dan membawa mereka bersama-sama dalam satu.
Jadi kita akan lihat itu.
Dan sepanjang jalan, kita akan kepala ke caniuse.com untuk memeriksa
mendukung browser bagi banyak dari daerah-daerah di CSS3.
Yang pertama kita akan lihat adalah Kotak Fleksibel
Model, atau dikenal sebagai FlexBox.
Dan apa yang memungkinkan kita untuk melakukan, itu menangani salah satu masalah
yang kita miliki dalam CSS.
Dan itu adalah, apakah Anda pernah mencoba untuk berbaris apa-apa
secara vertikal maupun horizontal, dan kemudian mencoba untuk merata
spasi segala sesuatu yang ada di dalam wadah itu?
Ya, bukan hal yang mudah untuk dilakukan, setidaknya tidak baik,
cara mudah untuk melakukannya.
Nah, FlexBox perbaikan itu, karena apa yang memungkinkan kita untuk
lakukan adalah mengambil sebuah wadah -
katakanlah kita telah div sini yang berisi nav a, kami
konten, dan sidebar kita.
Jika kita menandai wadah ini memiliki tampilan FlexBox,
maka semua objek anak-anak dalam sini, kami telah penuh
kontrol bagaimana mereka ditata.
Karena apa yang akan lakukan adalah, kita dapat mengatakan kita ingin ini menjadi
10 % di sini.
Dan kemudian ini menjadi 80 % dari lebar.
Dan kemudian akan menggunakannya untuk ukuran mereka tergantung pada
lebar halaman kami.
Jadi itu adalah cara yang bagus untuk mengambil ruang yang tidak terpakai dan membagi-bagi itu
up secara merata di semua objek anak-anak.
Oleh karena itu flex istilah.
Hal lain yang tidak pernah benar-benar langsung yang
layout jaringan.
Kami harus menggunakan dragon teknologi
untuk mendapatkannya bekerja.
Kita akan membutuhkan tabel dalam HTML, kita akan membutuhkan beberapa JavaScript untuk
memanipulasi struktur tabel, dan kemudian kita akan perlu
CSS untuk cukup mereka semua.
Dan itu disamakan dengan tidak langsung
cara untuk melakukannya.
Ini selalu mengambil banyak waktu dan usaha dan
energi untuk menyelesaikannya.
Nah sekarang, CSS3 memperkenalkan layout grid sebenarnya di mana kita
bisa melakukannya murni dalam CSS.
Dan itu sangat akrab.
Ini seperti membangun sebuah meja.
Kami memiliki grid, maka kita memiliki baris, kita memiliki kolom.
Hanya itu jauh lebih fleksibel.
Kami memiliki kontrol lebih banyak atas posisi dan di mana
isi berjalan dalam grid kami.
Tapi grid umumnya digunakan untuk mengiris dan dadu utama
bagian dari antarmuka pengguna kami.
Sejauh konten pergi, meletakkan konten, kami punya beberapa
properti benar-benar keren untuk bekerja dengan.
Kami punya multi-kolom, yang hanya membuatnya sangat mudah untuk
kita untuk mengambil konten dan membaginya menjadi beberapa kolom
gaya koran.
Kami juga punya pengecualian.
Pengecualian benar-benar, benar-benar rapi.
Saya tidak sabar untuk menunjukkan salah satu demo yang saya temukan di
web, bahwa Anda harus melihat hanya karena itu besar
pelaksanaan pengecualian.
Tapi pada dasarnya, apa yang memungkinkan kita lakukan adalah mengambil
unsur atau mengatakan sebuah grafis SVG dan membungkus konten di sekitarnya.
Jadi masalah yang kita punya sebelumnya untuk pengecualian adalah mengapung.
Dan mengapung, kita tidak pernah benar-benar mendapatkan teks
melilit itu.
Mengapung akan selalu mendapatkan di jalan.
Nah, dengan pengecualian, kita dengan mudah dapat mengambil teks lain, atau
unsur-unsur lain, atau bahkan seperti yang saya sebutkan, grafis, seperti
Grafis SVG, dan membungkus teks di sekitar itu gaya majalah.
Dan kemudian daerah memungkinkan kita mengalir konten di elemen.
Jadi jika kita memiliki satu paragraf besar, dan kami ingin hal itu
terlihat seperti paragraf hanya di beberapa elemen, kita
bisa mengalir konten yang melalui beberapa elemen.
Dan kekuatan yang sesungguhnya kita akan mulai melihat adalah ketika
pengecualian dan daerah digabungkan.
Sekarang kita dapat mulai melakukan beberapa hal yang sangat licin.
Jadi sekarang kita dapat membuat wilayah di seluruh halaman yang
dihubungkan bersama, tapi masih di daerah yang berbeda, atau mungkin mereka
bahkan saling tumpang tindih, dan kita masih bisa pipa yang sama
isi semua jalan melalui mereka.
Baik.
Mari kita lihat hal ini dalam tindakan.
Sekarang, kita akan kepala ke Virtual Lab bahasan ini
di mana saya memiliki Internet Explorer 10 diinstal.
Jadi kita akan menggunakan Internet Explorer 10, pergi ke Microsoft
situs test drive, dan melihat banyak hal-hal ini di
tindakan, melihat beberapa kode.
Dan kemudian saya juga didownload dan diinstal Google Chrome
Canary, yang merupakan versi beta terbaru dan terbesar dari
Google Chrome.
Aku akan menunjukkan kepada Anda bagaimana kita bisa mengubah beberapa flag untuk mengaktifkan banyak
fitur WebKit, semua hal ini.
Dan kemudian kita akan melihat di demo kami, dan kami akan melihat bagaimana kita
benar-benar dapat kode barang-barang kami sendiri dan menjalankannya dalam
Google Chrome.
Baik.
Jadi kita di Virtual bahasan ini Lab.
Mari kita jalankan Internet Explorer 10.
Dan sekali kita di sini, saya telah menjadi favorited situs test drive kami
atas mereka, tangan di situs CSS3 test drive.
Jadi mari kita kepala di sana.
Dan jika kita gulir ke kanan, inilah semua hal kita
akan melihat di sini.
Tata letak multi-kolom, layout grid, tata letak kotak yang fleksibel,
daerah, dan mengapung posisi, yang pada dasarnya
pengecualian.
Sekarang, mari kita mulai dengan Fleksibel Box Layout.
Inilah yang sepertinya.
Jadi ini adalah wadah kami di sini.
Wadah ini memiliki tampilan MS Box.
Jika kita melakukan hal ini di Chrome, itu
akan WebKit Box.
Tapi begitu kita memiliki sebuah kotak, sekarang apa pun di dalam kotak ini
ditata bagaimana kita menginginkannya.
Dan kita punya alignment, yang akan hanya memberitahu kami
di mana itu selaras.
Jadi di sini Anda dapat melihat, karena saya mengubahnya, Anda dapat melihat
perubahan kode.
Ini adalah cara yang bagus untuk belajar hal-hal, juga.
Dan semua properti dan bagaimana mereka bekerja.
Berikut paket kami.
Jadi kita bisa memilih di mana kita ingin pak untuk memulai
dari dan mengalir dari.
Mulai dan pusat, membenarkan, kita akan membagi-bagi itu merata.
Dan kemudian Anda juga dapat memilih arah Anda.
Jika Anda ingin menjadi berturut-turut, jika Anda ingin menjadi kolom, jika
Anda ingin baris terbalik, kolom terbalik.
Dan kemudian Anda juga dapat memilih bagaimana Anda ingin untuk membungkus jika
yang meluap batas-batas wadah kami.
Jadi sekali kita telah kontainer kami mengatur dan semua
properti pada bagaimana kita ingin item dalam wadah yang
mengalir, maka kita dapat mengatur properti item tertentu.
Dan di sinilah kita akan menentukan apa yang fleksibel kita.
Jadi jika kita ingin kotak 2 untuk melenturkan - mengatakan, misalnya di sini,
kami ingin box 1 menjadi nav, kotak 3 menjadi sidebar kita, dan
kami ingin konten kami di sini untuk melenturkan, kita bisa
menempatkan fleksibel kami sebagai 1.
Apa itu artinya jika kotak ini adalah untuk memperluas sama sekali, maka
item kami tertekuk akan mengambil semua ruang ekstra.
Jadi kita akan mendapatkan demo yang baik tentang bagaimana ini bekerja ketika kita mendapatkan
ke Visual Studio di sini segera.
Mari kita gulir ke bawah ke bawah sini.
Kami juga memiliki layout jaringan.
Mari kita klik pada Grid di sana di bagian bawah, dan mendengar itu.
Berikut ini contoh jaringan kami.
Jadi hal pertama yang akan kita lakukan di sini, mari kita membawa
ukuran ini turun sedikit.
Bagaimana 350 ?
Yang terlihat baik.
Dan jalan, kode di sini, segera setelah kami mendapatkan lebih dari
di sini untuk struktur grid, ada di sini di sebelah kiri.
Jadi, inilah apa itu.
Hanya mengatur tampilan Anda ke ms -grid jika
Anda berada di Internet Explorer.
Jika Anda ingin melakukan hal ini di Chrome, lakukan webkit -grid.
Dan kemudian Anda bisa mengatur baris dan kolom Anda.
Itu saja untuk struktur.
Berapa banyak baris yang Anda inginkan, dan berapa banyak kolom yang Anda inginkan?
Dan di sini kita bisa menghapus dan menambahkan mereka cukup
mudah menggunakan UI ini.
Cukup sederhana di sana.
Anda juga dapat memiliki ukuran tetap jika Anda ingin.
Jika kita kepala ke item grid, sekarang kita bisa mulai perpipaan di
konten ke masing-masing sel-sel ini.
Dan Anda dapat dengan mudah menjangkau, baris dan kolom.
Dan kemudian Anda juga dapat mengatakan di mana baris awal kita adalah dan
di mana kolom awal kita juga.
Jadi cukup sederhana sejauh grid berjalan.
Ada hanya tidak banyak untuk itu.
Dan itu mengagumkan dan mudah untuk bekerja dengan, yang adalah apa yang kita
inginkan, karena ada banyak untuk itu sebelum makhluk ini
tersedia sejak kami harus menggunakan semua
teknologi untuk mewujudkannya.
Tapi sifat cukup sederhana sebagai
baik di sini di CSS.
Dan mereka memberikan beberapa grid sampel untuk bekerja dengan.
9 dengan 9, inilah satu - 3 kolom.
Tampak serupa benar ?
Berikut header kita, footer kami, sidebar, nav, dan konten.
Di bawah itu, kita memiliki jaringan yang lebih menarik.
Sepertinya logo Windows.
Dan di bagian bawah di sini, kami memiliki jaringan yang kompleks yang memiliki
banyak hal yang terjadi.
Sekarang, jika kita gulir ke bawah ke bawah, mari kita kepala ke kami
multi-kolom dan melihat bagaimana kita dapat membagi konten tekstual
terlihat seperti surat kabar.
Dan aku tidak yakin apa pun bisa semudah
layout multi- kolom, karena itu hanya masalah menemukan
apapun kontainer Anda adalah yang berisi konten Anda,
dan kemudian menentukan jumlah kolom.
Berapa banyak kolom yang Anda inginkan?
Di sini kita dapat menentukan tiga.
Sekarang akan memecahnya menjadi tiga kolom.
Dan kami memiliki kontrol atas lebar kolom, kesenjangan
di antara mereka.
Jika kita ingin memiliki aturan, Anda dapat melihat bahwa kita bisa mendapatkan bagus
perbedaan visual antara kolom kami di sini.
Dan Anda memiliki kontrol penuh atas gaya aturan itu,
warna, semua yang bagus.
Dan di bagian bawah di sini, Anda dapat mengontrol bagaimana data
dalam wadah yang ditulis dgn tanda penghubung.
Jadi sekarang tidak.
Jika kita memukul Auto, itu akan squish semuanya bersama-sama untuk mencoba
muat dan ditulis dgn tanda penghubung sesuatu yang berjalan
di baris yang terpisah.
Jadi, Anda memiliki kontrol penuh atas hal itu.
Pretty cool dan mudah untuk bekerja dengan di sini.
Sekali lagi, kita benar-benar hanya menentukan kolom Anda di sini, berapa banyak
kolom, dan kemudian Anda dapat gaya segalanya.
Dan kemudian jika Anda ingin tanda hubung juga, Anda
dapat menempatkan bahwa dalam sana.
Jadi itu semua cukup sederhana.
Mari kita lihat di sini di mengapung diposisikan.
Ini keren, juga, karena ini adalah bagaimana kita bisa melakukan
pengecualian, dan kita dapat memiliki teks berjalan di sekitar hal-hal seperti
gambar atau elemen lain yang berisi teks.
Jadi mari kita gulir ke bawah sedikit di sini, dan sekarang Anda
bisa melihat itu hanya mengambang.
Inilah masalah dengan float.
Ini mengganggu teks kami.
Jika kita melakukan wrap ms - aliran, namun, sekarang melihatnya.
Lihat membungkus teks di sekitar item kami, adalah elemen di sini?
Pretty cool.
Dan di sini kita dapat mengontrol mana itu.
Jadi kita hanya mendorong itu bersama.
Ada kotak di sini.
Kami hanya mendorongnya sepanjang grid.
Kita bisa melakukan kolom dan baris mencakup, kita bisa
membawanya dan pergi.
Tapi tidak peduli di mana kita katakan, teks membungkus di sekitar itu.
Benar-benar keren.
Dan juga, mudah untuk bekerja dengan.
Kami hanya menggunakan properti aliran bungkus.
Dan kita punya beberapa properti di sini untuk mengatur.
Kita akan melihat ini di sini juga ketika kita
masuk ke demo kami.
Tapi satu hal yang menyenangkan tentang ini - dan saya akan menunjukkan kepada Anda
sedikit lebih ketika kita masuk ke dalam pengecualian, karena ada kita
benar-benar dapat mengambil teks kita dan melakukan sesuatu yang keren dengan itu.
Seperti ini, bukannya kotak, bisa lebih teks,
warna yang berbeda.
Atau kita bisa menempatkan margin sekitarnya.
Dan sekarang kita punya teks dalam teks yang
melilit teks.
Dan itu terlihat mengagumkan.
Tapi ini akan menjadi besar untuk gambar seperti.
Jika Anda ingin gambar tepat di tengah-tengah teks Anda, sekarang
Anda dapat membungkus teks di sekitar gambar suka memiliki
gambar mengapung di atasnya atau di bawahnya atau di sekitarnya.
Mari kita menuju ke sini dan melihat daerah.
Daerah benar-benar keren.
Sekali lagi, ini adalah bagaimana kita dapat mengalir konten di seluruh elemen.
Jadi mari kita lakukan ini.
Check this out.
Jadi ini adalah satu besar - seperti yang Anda lihat di sini dengan sederhana -
itu hanya satu blok besar teks.
Jadi sebagai unsur, itu hanya tampak seperti ini.
Dan ini adalah bagaimana kita akan membacanya.
Kami akan gulir sekitar dan membaca semuanya.
Uh.
Sekarang, jika kita memukul Complex, dan CSS3 -
sebenarnya, mari kita pergi sederhana di wilayah CSS3.
Jadi sekarang, daripada gulir ke bawah, kita dapat menekan
Halaman 1, Page 2.
Dan kita bisa mengapung di kedua dari dibs ini.
Jika kita melakukan Complex, check this out.
Sekarang kita memiliki banyak elemen, satu blok besar
teks yang mengalir melalui daerah masing-masing.
Jadi itulah hal yang benar-benar keren tentang daerah.
Dan itu cukup sederhana untuk dilakukan, juga.
Kami mendirikan sumber kami, di mana pun data kami berasal, dan
kita melakukan arus ke dalam, dan kami nama itu.
Kemudian pada semua kontainer kami yang lain, kami akan pergi ke
mengalir dari, dan kita akan menentukan sumber kami, di mana itu
datang dari, dan itu akan mengalir konten yang melalui semua
daerah tersebut.
Jadi itu benar-benar, benar-benar mudah untuk bekerja dengan.
Mungkin bonus terbesar dari semua hal ini adalah ada hanya
tidak banyak untuk itu.
Ini semua CSS didorong, sehingga itu semua hanya menyiapkan CSS Anda
properti.
Dan itu saja.
Pemetaan mereka bersama-sama.
Baik.
Sekarang, sebelum kita melompat ke demo kami, kutunjukkan
sesuatu yang dingin, dan bagaimana semua hal ini bekerja sama untuk
membuat sesuatu yang rapi.
Saya ingat pernah membaca artikel ini setahun yang lalu, dan
Saya hanya terpesona oleh itu.
Saya pikir, sekarang ini adalah masa depan web.
Ini benar-benar hal-hal rapi.
Dan itu menunjukkan bagaimana semua hal ini bekerja bersama-sama.
Jadi aku hanya akan Google di sini, pengecualian HTML5Rocks.
Mereka memiliki sebuah artikel yang mengagumkan di sini.
Majalah - seperti tata letak, oke ?
Jadi check this out.
Jika kita scroll ke bawah, lihat ini.
Sekarang, ini adalah menggunakan pengecualian dan grafis SVG
untuk menentukan bagaimana teks harus ditata.
Dan mereka bekerja dalam hubungannya dengan gambar latar belakang di sini
sehingga terlihat seperti itu mengalir di sepanjang batu ini.
Bukankah itu keren ?
Dan jika kita gulir ke bawah sini, di sini satu lagi.
Ini benar-benar menggunakan daerah bersama dengan pengecualian mengalir
data melalui, dan tata letak multi- kolom.
Jadi menggunakan tiga dari apa yang kita hanya melihat
untuk membuat pekerjaan itu.
Cukup manis.
Dan jika saya kita gulir ke bawah lebih jauh di sini menjelang
bawah, ada satu lagi.
Lihat itu.
Itu agak rapi.
Bagus pie chart, lagi menggunakan semua teks mengalir melalui
seluruh wilayah ini, salah satu teks besar yang mengalir melalui itu semua.
Agak dingin.
Dan saya pikir itu saja.
Jadi itulah yang saya ingin menunjukkan kepada Anda, karena saya pikir
itu benar-benar rapi, dan masa depan web ini sangat
cerah dengan teknologi tata letak ini karena kita dapat melakukan
hal-hal yang jauh lebih dinamis dan cairan daripada kita
sebelum bisa.
Mari selami demo.
Jadi saya sudah punya Visual Studio dibuka.
Mari kita membawanya ke permukaan.
Saya menambahkan sebuah website baru ke dalam solusi kami yang ada di sini,
16 - css_layouts.
Dan dalam HTML kita, saya menambahkan halaman baru di sini disebut
css_layouts, yang kita telah terbuka.
Jadi hal pertama yang saya ingin lakukan adalah hanya mengambil lihat ini
dalam browser.
Jadi, jika kita klik kanan di atasnya, melihatnya di Google Chrome, itu
mungkin tidak akan terlihat sangat baik.
Ini tidak terlihat terlalu buruk.
Tapi aku bisa tahu hanya dengan melihat bahwa kami memiliki beberapa
hal-hal yang bekerja dengan baik keluar dari pintu gerbang.
Kami memiliki model kotak kami fleksibel, FlexBox bekerja,
karena saya memiliki div sekitar tiga bidang ini
di sini, nav kami, konten kami, dan pihak kita.
Dan bekerja seperti yang kita lihat di papan tulis.
Kami telah mengambil ini naik 80 %, ini mengambil 10 %, dan ini
mengambil 10 %.
Jadi ini bekerja.
Saya juga memiliki kotak fleksibel lain menjadi konten kami.
Ini diatur sebagai kotak fleksibel di sini.
Dan itu berarti bahwa dua pasal tersebut, saya memiliki keduanya set
dengan nilai satu untuk flex, jadi mereka berdua mengambil
up jumlah yang sama ruang, dan itu merata
di ruang putih.
Ini semua baris dengan sangat baik.
Satu hal yang kita tidak memiliki bekerja, meskipun, adalah daerah.
Saya memiliki empat daerah di sini, empat divs mana semua teks ini
seharusnya mengalir melalui.
Dan kemudian di sini juga, saya memiliki pengecualian mengatur
yang berjalan pada poligon SVG yang harus memilikinya
mengalir ke bawah dan melihat jenis seperti petir.
Jadi kita benar-benar menggunakan pengecualian untuk model teks, banyak
seperti Anda hanya melihat di sana dalam artikel yang melakukannya
sekitar batu besar di sana.
Sekarang, jika Anda memiliki versi terbaru dari Chrome, Anda tidak akan
perlu menggunakan Google Chrome Canary.
Tapi aku hanya ingin menunjukkan bahwa itu ada.
Jika Anda ingin versi pendarahan tepi terbaru
Chrome, Anda dapat men-download Google Chrome Canary, yang
tentu memiliki dukungan untuk semua hal yang
kita hanya melihat.
Mari kita coba untuk mendapatkan kerja ini, meskipun, dalam versi kita saat ini
Chrome, yang juga merupakan versi terbaru.
Dan kita bisa melakukan itu dengan membuka tab dan akan
Chrome / / flags.
Dan sekali Anda berada di halaman bendera di sini, hanya melakukan pencarian.
Aku akan melakukan Control- F untuk WebKit eksperimental.
Dan ada itu.
Jadi setelah Anda menekan daerah ini di sini, cukup klik Aktifkan.
Dan kemudian Anda ingin memukul Luncurkan Ulang yang
tombol untuk peluncuran itu.
Mari kita kembali ke sini ke halaman kami, dan
hey, lihat itu.
Ia bekerja.
Semua fitur kami bekerja.
Baik.
Dan saya juga tidak disebutkan juga di sini, kami telah kami
multi-kolom terjadi di sini dengan teks kami.
Tapi inilah wilayah kami mengatur dengan semua data kami mengalir
melalui daerah tersebut, orang-orang divs.
Dan di sini, kami memiliki pengecualian kami mengatur mana
tidak benar-benar terlihat seperti petir.
Itu seharusnya, tapi cukup dekat.
Sepertinya cacing menggantung atau sesuatu, saya tidak tahu.
Tapi ada itu.
Ini semua jenis mengalir di sana melalui sidebar kita.
Mari kita lihat beberapa kode.
Jadi mari kita kembali ke Visual Studio.
Kita pertama akan melihat kotak fleksibel.
Jadi bagaimana ini bekerja, jika kita gulir ke bawah sini untuk HTML kita,
kita memiliki div yang ditandai sebagai Main.
Sekarang, dengan header dan footer kami berada di luar itu, sehingga mereka
tidak akan meregangkan.
Tapi semua konten dalam utama kami kemudian
ini akan meregangkan.
Dan kami memiliki nav, bagian, dan sidebar, samping.
Dan jika kita gulir ke atas, di sini adalah empat daerah.
Berikut div utama kami, dan inilah bagian kami, kami nav,
dan kami samping.
Jadi dalam utama kami, ini adalah wadah besar kita bahwa kita ingin
anak objek untuk melenturkan.
Kami mengatur layar untuk WebKit -flex.
Kemudian kita dapat mengontrol bagaimana mengalir.
Apakah kita ingin menjadi baris, apakah kita ingin menjadi kolom ?
Di sini kita memilih baris.
Dan sekarang, apa yang akan lakukan itu akan memungkinkan kita untuk terjadi
ke dalam setiap bagian dan mengatur bagaimana mereka akan melenturkan.
Dan tiga parameter di sini akan menjadi bagaimana tumbuh,
bagaimana menyusut, dan kemudian apa nilai awal kita.
Dan saya pikir saya punya itu pada 80, 10, dan 10, tapi sebenarnya saya punya
itu pada 70, 15 dan 15.
Sekarang, Anda akan melihat sedikit lebih baik di sini ketika kita masuk ke
Media query bagaimana memperluas dan menyusut kerja.
Karena kita akan mengambil browser kita dan menyusut ke
tentang ukuran smartphone, dan Anda akan
untuk melihat bagaimana hal ini bekerja mengagumkan.
Karena WebKit, bersama dengan browser, akan membuat yang
konten sehingga bentuk seperti itu pada smartphone.
Berbaris jauh lebih baik, dan
vertikal, seperti kolom oriented.
Dan itu hanya keren.
Ini sangat keren bagaimana semua hal ini bekerja.
Dan juga perhatikan di sini kita memiliki perintah, sehingga kita dapat menentukan
pesanan kami, nav kami, maka bagian kita, maka kita samping.
Jadi, Anda masih dapat menimpa urutan yang didirikan pada
aliran HTML dengan menggunakan CSS, yang
juga benar-benar keren.
Sekarang, kami juga memiliki bagian utama kami set
sebagai wadah fleksibel.
Lihat, hal yang sama.
Kami mengatur layar untuk WebKit - flex, hanya saja kali ini kita
memiliki tata letak kolom.
Dan itulah yang memberi kita tata letak ini di sini.
Sekarang lihat ini.
Mari kita lakukan sesuatu jenis dingin di sini.
Mari kita gulir ke bawah ke HTML kita.
Mari kita paste di artikel lain.
Dan itu digolongkan sesuai, untuk multi- kolom.
Mari kita simpan ini, kembali ke browser dan tekan Refresh.
Check it out.
Lihat bagaimana yang bekerja ?
Sekarang, itu merata karena jika kepala kita kembali dan
lihat ini di sini, itu merata
di semua artikel.
Karena jika kita kepala ke artikel kami di sini, kami hanya memiliki
fleksibel sangat sederhana set up, seperti yang kita lihat di
Microsoft demo, sebagai salah satu.
Jadi itu hanya berarti mereka semua akan merata
didistribusikan.
Kita dapat terus menambahkan artikel di sini dan itu akan terus menyusut
semua yang lain.
Dan mereka semua akan akhirnya menjadi ukuran yang sama.
Jadi itulah model box yang fleksibel.
Dan itulah yang akan Anda gunakan banyak di masa depan untuk melakukan
horisontal dan vertikal susun, dan merata spasi
elemen kami dalam wadah ini.
Dan berbicara tentang beberapa kolom, Anda dapat melihat kami memiliki
beberapa kolom di sini.
Jika kita kembali, Anda dapat melihat betapa mudahnya ini adalah untuk bekerja dengan.
Berikut kelas multi- kolom kami.
Kami hanya menyiapkan count kami.
Kami mendirikan lebar kami, kesenjangan antara mereka, dan aturan kami,
dan kami baik untuk pergi.
Mari kita kepala di sini.
Kami akan kembali ke pengelompokan dan bersarang.
Mari kita lihat pengecualian kami.
Jadi di sini adalah pengecualian kami.
Dan jika kita gulir ke bawah ke HTML di sini, Anda dapat melihat di kami
samping, saya hanya membuat div, classed sebagai pengecualian, yang
berisi worm sampel yang sama dari beberapa data.
Dan jika kita naik ke atas sini, inilah pengecualian yang
digolongkan CSS penanda sini, pemilih, dengan semua kami
properti.
Jadi kita hanya menentukan tinggi kami, ukuran font.
Tapi di sinilah kita dapat menentukan tanda hubung kami.
Kami mengatakan Auto sana.
Dan kemudian kita menggunakan bentuk WebKit dalam, kita
lewat sebuah SVG poligon, dan menentukan semua
koordinat sana.
Yang akan memberi kita melihat ini dan merasa.
Jadi dengan menggunakan SVG, Anda lihat di bahasan inis sebelumnya, kami menciptakan
logo GG.
Anda hampir dapat menciptakan sesuatu.
Dan apa pun yang Anda akhirnya membuat, Anda dapat memiliki teks
berlari sepanjang bahwa jalan yang sama.
Juga, jika kita gulir ke bawah, inilah daerah kami.
Dan jika kita melihat di sini, inilah data kami.
Anda dapat melihat kami memiliki semua data yang hanya dalam satu baris panjang besar
dalam div.
Dan kami ingin pipa bahwa data mengalir melalui
empat divs sini.
Jadi itulah mengapa kita memiliki gaya data aktual kami mengatur di sini.
Dan ini adalah di mana kita akan menentukan aliran kita ke dalam, dan
maka kita hanya nama itu.
Dan sekarang, dengan semua divs kami yang lain, kita bisa hanya mengatakan aliran
froms yang bernama mengalir ke.
Dan itu hanya akan pergi ke depan dan mengalir melalui.
Itu saja, hanya dua baris kode.
Satu untuk data, dan kemudian satu untuk setiap divs yang akan
mengalir ke dalamnya.
Dan itu saja.
Itulah betapa mudahnya untuk mengatur daerah.
Semua hal-hal lain yang saya lakukan di sini, ini hanya
bekerja dengan masing-masing div individual untuk mengubah
warna latar belakang sehingga Anda bisa merasakan ini dari terang ke gelap.
Jadi kita melakukan gradien di semua
elemen-elemen juga.
Tapi itu betapa mudahnya untuk bekerja dengan daerah.
Jadi kapan saja Anda inginkan mengalir konten melalui beberapa
elemen, kita bisa menggunakan daerah untuk membuat
terjadi relatif mudah.
Beberapa tips desain di sini yang merupakan bagian dari
tujuan untuk bahasan ini ini akan menjadi
pengelompokan dan bersarang.
Dan ini hanya cara yang dapat Anda desain CSS Anda
menghindari duplikasi.
Kami ingin menghindari duplikasi sebanyak mungkin, terus keluar
CSS bagus dan rapi.
Dan di sini adalah contoh yang baik dari pengelompokan.
Pengelompokan memungkinkan kita untuk hanya menetapkan gaya yang sama untuk
beberapa elemen.
Dan Anda hanya memisahkan penyeleksi Anda dengan koma.
Jadi dalam hal ini, kami hanya melakukan elemen lurus
memilih, tetapi Anda juga dapat mencampur dan mencocokkan.
Jika Anda ingin melakukan semacam memilih kelas bersama dengan
elemen bersama dengan ID, maka Anda bisa melakukan
itu semua dalam satu tembakan.
Dan itu akan gaya mereka semua dalam satu tembakan.
Jadi ini akan menghindari kita memiliki header dan footer dengan baik
informasi yang sama dinyatakan dua kali.
Tip lain yang bagus untuk merancang Anda
CSS menggunakan bersarang.
Sekarang, kita memiliki contoh yang buruk di sini dengan desain di kami
multi- kolom bagian di sini.
Kami memiliki sebuah artikel, dan kemudian kita memiliki sebuah artikel yang menggunakan
pemilih untuk mengambil apa-apa dengan kelas multi- kolom.
Sekarang, karena cara bahwa kita memiliki halaman HTML ini
dirancang, jika kita gulir ke bawah sini, tidak ada cara lain, tidak ada
pemilih lain kita bisa menggunakan yang akan membawa kami ke utama,
bagian, dan artikel.
Yang berarti kita tidak benar-benar membutuhkan kelas ini di sini karena
kita bisa mendapatkan artikel ini hanya akan menjadi ID dari utama,
ikuti melalui bagian, dan artikel.
Jadi itu berarti kita bisa merapikan beberapa HTML kita dengan
declassing artikel ini, seperti begitu.
Dan sekarang kita bisa gulir ke atas sini, dan jika kita menemukan
bagian kami kami hanya di, di sini kita pergi, kita bisa
menyingkirkan semua ini.
Kita bisa memindahkan ini ke artikel kami, dan kemudian menyingkirkan
pemilih seluruhnya.
Jadi kita membersihkannya sedikit, membuatnya
sedikit lebih mudah dibaca.
Tapi itulah yang bersarang adalah semua tentang, yang memungkinkan kita untuk menyimpan
pada mengklasifikasikan dan Iding segalanya.
Karena selama kita mendefinisikan dan kami mencari jalan kita
dari waktu ke depan, dan kami desain dengan benar, maka kita tidak boleh
membutuhkan banyak karena kita harus mampu menavigasi
menggunakan selektor di mana pun kita ingin pergi
dengan sedikit usaha.
Tapi mari kita hanya mengambil melihat ini.
Aku akan memukul F5 dan lihat itu, tidak ada perbedaan.
Tidak ada perbedaan karena itu hasil yang sama,
hanya dengan kode kurang.
Last but not least, mari kita kepala ke caniuse.com dan melihat
apa beberapa dukungan seperti di browser untuk
fitur kami melihat.
Jadi aku hanya akan menuju langsung ke caniuse.com.
Dan mari kita mulai dengan FlexBox.
Kami hanya akan mulai mengetik di flex, dan lihat itu.
Di sana kami pergi.
Fleksibel Box Tata Letak Module, metode elemen positioning
di tumpukan horizontal atau vertikal, seperti yang kita lihat.
Dan kita punya dukungan yang baik untuk FlexBox luar sana hari ini,
terutama di Chrome, didukung sepenuhnya.
IE, itu akan didukung penuh dalam waktu dekat.
Dan kemudian sekarang mari kita coba satu lagi di sini.
Bagaimana multi- kolom ?
Kami melihat multi-kolom, bukan?
Cukup ketik dalam multi dan gulir ke bawah, melihat apakah kita dapat menemukannya.
Ini dia.
Tata letak multi-kolom dan metode mengalir informasi dalam
beberapa kolom.
Sebagian didukung dalam Chrome.
Saya pikir masalahnya adalah beberapa kotak bayangan.
Ya, kotak bayangan ketika item dipotong oleh kolom.
Jadi tidak ada yang terlalu besar.
Tapi IE sepenuhnya mendukung itu sekarang dalam versi saat ini dan
dalam waktu dekat.
Mari kita kembali ke atas.
Bagaimana dengan layout grid ?
Banyak merah di sini untuk grid.
Anda dapat melihat IE adalah satu-satunya yang mendukung itu benar-benar penuh,
meskipun dilaporkan harus didukung dalam Chrome 27.
Satu lagi di sini, mari kita lakukan daerah.
Dan daerah, banyak merah untuk juga.
Tidak ada yang benar-benar sepenuhnya mendukung itu, tapi IE 10 sebagian
mendukungnya.
Dan Chrome tidak selama kita mengaktifkan mereka eksperimental
Fitur WebKit.
Baik untuk menguji teknologi ini baru dalam pengembangan.
Jadi revolusi akan datang.
Ini akan mengambil sedikit masih sebelum mereka menyelesaikan
spesifikasi untuk teknologi yang mengagumkan di sini di CSS3.
Dan kemudian Anda akan melihat lebih banyak dukungan cross-browser, banyak
lebih kuning dan hijau di sini di caniuse.
Dan saat itulah kita akan benar-benar mulai menggali dan mulai
menggunakan hal ini di alam liar.
Dalam bahasan ini, kami belajar bagaimana untuk membuat layout yang fleksibel
dengan CSS3, di mana kita melihat banyak teknologi yang akan datang
yang akan merevolusi bagaimana kita merancang
layout kami pada akhirnya pengembangan web depan dengan CSS3.
Kami mendapat akrab dengan model kotak yang fleksibel, cara
bahwa kita dapat mengatur item dalam sebuah wadah, menumpuknya
horizontal dan vertikal.
Dan kemudian membagi-bagi ruang ekstra di dalam wadah yang
di semua objek tersebut.
Kami mendapat akrab dengan multi- kolom.
Kami melihat bahwa multi - kolom adalah cara yang bisa kita ambil data teks
dan membaginya di kolom.
Mudah untuk bekerja dengan.
Kami melihat bagaimana pengecualian bekerja.
Sebuah cara yang bagus bahwa kita dapat membungkus teks di sekitar
elemen atau benda lainnya.
Kami melihat jaringan keselarasan sebagai teknologi tata letak lain yang
bisa kita gunakan untuk mengiris dan dadu halaman untuk membuat bagus
grid seperti UI.
Dan kemudian kita juga melihat bagaimana kita bisa menggunakan daerah mengalir
Informasi di beberapa elemen.
Saya berharap ini telah informatif untuk Anda, dan saya
ingin mengucapkan terima kasih untuk melihat.