Tata letak multi-kolom (Multi-kolom)
Tata letak multi-kolom adalah mendesain konten teks menjadi tata letak multi-kolom seperti koran. Dengan kata lain, aliran air terjun yang sebelumnya bisa kita capai melalui js atau JQuery dapat dicapai langsung melalui CSS di CSS3, meskipun ada masalah kompatibilitas. .
kesesuaian
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
Properti tata letak multi-kolom
CSS3 menyediakan serangkaian properti untuk mengimplementasikan tata letak multi-kolom, seperti yang ditunjukkan pada tabel berikut:
1.columns mengatur jumlah kolom objek dan lebar setiap kolom
Menetapkan atau mengambil jumlah kolom objek dan lebar setiap kolom.
tata bahasa:
kolom:<'lebar-kolom'>||<'jumlah-kolom'>;
Deskripsi parameter:
(1) Parameter pertama mengacu pada lebar setiap kolom
(2) Parameter kedua mengacu pada jumlah kolom. Anda dapat menulis dua atau satu.
Kedua parameter tersebut memberikan prioritas pada jumlah kolom (dalam kasus penurunan). Jika lebarnya kurang (jumlah kolom * atur lebar > lebar wadah), otomatis akan diperkecil satu kolom dan otomatis melebarkan lebar paragraf hingga mencapai lebar wadah. Jarak yang sesuai secara otomatis dihasilkan di tengah.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Tata letak beberapa kolom</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3 );}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>dari Dennis Ritchie, penemu bahasa C, awalnya memposisikan penemuannya sebagai sebuah sistem, ini bukan perangkat lunak grafis itu sendiri, melainkan mencakup pengembangan driver, kernel sistem, manajemen file, manajemen internal, dan komunikasi dan serangkaian inti , jadi Anda hanya perlu mempelajari sintaks bahasa C, tetapi juga mata pelajaran lain seperti prinsip sistem operasi, protokol komunikasi, prinsip compiler, struktur data, dll untuk melengkapi persyaratan sebelumnya. </div><div>Saat ini, ketika Anda melihat manual motherboard dalam bahasa Inggris, Anda akan mengetahui antarmuka mana yang harus dibaca, bagaimana protokol komunikasi ditetapkan, berapa byte yang harus dibaca...dan seterusnya, sebelum Anda dapat menulis Hanya pengemudi yang dapat menulis kernel sebelum dapat berkomunikasi Sejauh ini, meskipun permintaan akan talenta di perusahaan di masyarakat lebih tinggi daripada Lebih sedikit, tetapi tidak ada masalah karena tidak bisa mendapatkan pekerjaan sama sekali. Sebaliknya, Anda memilih pekerjaan dan bahkan membayarnya, karena Anda tidak hanya dapat melakukan ini, tetapi juga banyak pekerjaan terkait, seperti pengembangan driver, DNS. resolusi, anti-virus, keamanan komunikasi, virtualisasi, dll. Ia mampu menggunakan teknologi dan penyesuaian kernel, dan bahkan dapat mengembangkan sistem operasi baru sendiri. </div><div>Oleh karena itu, dalam lingkungan kita saat ini, orientasi pengajaran bahasa C di sebagian besar universitas adalah selain kursus bahasa C, hanya beberapa perguruan tinggi yang juga menawarkan struktur data, arsitektur komputer, prinsip-prinsip kompiler, Kursus seperti prinsip-prinsip sistem operasi, dan beberapa sekolah hanya mempertahankan struktur data pada mata kuliah tersebut, atau bahkan tidak lagi menawarkan struktur data. Oleh karena itu, bahasa C hanya diposisikan sebagai pencerahan pemrograman, dan cukup menguasai pemikiran berorientasi proses dan C sintaksis bahasa. </div><div>Pihak sekolah berharap setelah mempelajari bahasa C, mereka kemudian dapat mempelajari C++ atau Java atau bahasa tingkat tinggi lainnya sehingga mereka dapat melakukan hal-hal yang lebih praktis dan mudah mencari pekerjaan untuk sukses cukup menggunakan bahasa C. Tidak perlu belajar lagi, cukup belajar Java atau C++ atau bahasa tingkat tinggi lainnya tanpa dasar. Inilah sebenarnya perbedaan antara kelas profesional dan lembaga pelatihan. Jika ilmu yang dipelajari tidak sia-sia, sebaiknya pikirkan lagi apakah bermanfaat atau tidak. </div></div><br><div><div>Jadi menilai dari keseluruhan lingkungan saat ini, jika Anda mengambil jurusan komputer/perangkat lunak di perguruan tinggi utama, maka Anda harus bekerja keras pada materi nyata ini. jangan menyia-nyiakan sumber daya pengajaran negara, karena Anda bertanggung jawab atas masa depan industri perangkat lunak TI negara, jika Anda ingin terlibat dalam penelitian dan pengembangan/pengembangan perangkat lunak, Anda setidaknya harus mempelajari struktur data dengan baik, karena Anda harus membuat; , bukan salin. Jika Anda hanya ingin mencari nafkah, pelajari saja teknik yang bisa membuahkan hasil. </div><div>Terakhir, mari kita lihat tujuan umum siswa mempelajari bahasa C. Dari perguruan tinggi junior hingga gelar sarjana, ujian masuk pascasarjana, dan bahasa C tingkat kedua, tutorial berorientasi permintaan sebagian besar didasarkan pada soal teoretis, soal latihan, dan ujian, jadi jenis proyek Sumber daya bahasa C jauh lebih sulit, jadi wajar saja Anda jarang melihat hal-hal grafis. Tentu saja, sebagai pendukung setia bahasa C, Dotcpp juga akan memperkuat sumber daya pemrograman di sini di masa depan untuk memberikan dukungan sumber daya yang memadai kepada semua orang. </div><div>Saat kita mempelajari bahasa C, karena kita memilih program konsol, program Anda dijalankan di jendela hitam. Jika Anda menulis aplikasi windows, tidak akan ada jendela hitam seperti itu, dan sintaksis bahasa C akan melakukannya masih digunakan. , semua orang bisa mengerti. </div><div>Jika ini adalah pengembangan grafis dalam bahasa C murni, tergantung pada tahapan Anda, Anda dapat mempertimbangkan untuk menggunakan fungsi antarmuka grafis yang didukung oleh kompiler TurBoC atau menginstal perpustakaan easyX di VC6 untuk mencapai pengembangan grafis dari beberapa permainan, seperti backgammon, Tetris, permainan pinball, Snake, dll., yang semuanya bersifat grafis dan interaktif. Untuk yang lebih mahir, dengan mempertimbangkan penyegaran gambar dan peningkatan profesional, Anda dapat mempertimbangkan untuk menggunakan MFC atau QT. </div></div></tubuh></html>Hasil berjalan:
Atur kolom div.test1: 300px 4; yaitu lebar setiap kolom adalah 300px, dan total ada 4 kolom, tetapi wadahnya 900px, yaitu kurang dari 1200px, sehingga jumlah kolom akan otomatis dikurangi, dan lebar kolom akan ditingkatkan secara tepat untuk ditampilkan dengan cara yang paling tepat. Namun, div.test2 tidak mengatur lebar wadah, lebar kolom diatur menjadi 300px, dan jumlah kolom diatur menjadi 4 kolom. Jumlah kolom akan dibatasi untuk mengoptimalkan lebar kolom.
Catatan: Atur kolom div.test1: 300px 4 yaitu lebar setiap kolom adalah 300px, dan total ada 4 kolom, tetapi wadahnya 900px, yaitu kurang dari 1200px, jadi jumlah kolomnya akan dikurangi secara otomatis, dan lebar kolom akan ditingkatkan secara tepat untuk mencapai metode tampilan yang paling tepat. Namun, div.test2 tidak mengatur lebar wadah, lebar kolom diatur menjadi 300px, dan jumlah kolom diatur menjadi 4 kolom. Jumlah kolom akan dibatasi untuk mengoptimalkan lebar kolom.
2. lebar kolom mengatur lebar kolom
tata bahasa:
lebar kolom:<panjang>|default otomatis;
: Gunakan nilai panjang untuk menentukan lebar kolom, tidak ada nilai negatif yang diperbolehkan otomatis: Sesuaikan lebar sesuai dengan jumlah kolom.
Meskipun lebar kolom sudah diatur, lebarnya akan otomatis dialokasikan berdasarkan jumlah kolom dan lebar wadah.
PS: Jarak setiap kolom adalah 14 piksel.
3. jumlah kolom mengatur jumlah kolom
Menetapkan atau mengambil jumlah kolom suatu objek.
tata bahasa:
jumlah kolom：<integer>|auto;
Deskripsi parameter:: Gunakan nilai integer untuk menentukan jumlah kolom, tidak ada nilai negatif yang diperbolehkan; otomatis: Sesuaikan lebar alokasi sesuai dengan lebar kolom.
4. celah kolom mengatur jarak antar kolom
Menetapkan atau mengambil celah antar kolom suatu objek.
tata bahasa:
celah kolom：<panjang>|normal;
Deskripsi parameter: Gunakan nilai panjang untuk menentukan jarak antar kolom (bukan jarak antar kata, tetapi jarak antar paragraf), nilai negatif tidak diperbolehkan normal: sama dengan ukuran font. spasi normal tergantung pada ukuran font. Sama dengan ukuran font.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Tata letak beberapa kolom</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{ border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin-top: 20 piksel;}di v.test1{width:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4;column- gap:14px;}</style></head><body><h3>Font: 14px, tidak ada set gap: defaultnya sama dengan font, 14px;</h3><div><div>Banyak teman yang pernah belajar bahasa C Jika melihat kembali bahasa C pasti akan muncul pertanyaan ini: Mengapa bahasa C berjalan di jendela hitam? Sebuah program yang menghitung luas segitiga atau mencetak jumlah bunga bakung? Sehebat apapun pemrogramannya, kenapa kita tetap tidak bisa membuat software keren itu? Pada akhirnya, itu hanya kekanak-kanakan! Mengapa. </div><div>Pertama, positioning penemuan bahasa C, dari awal penemuannya oleh Dennis Ritchie, penemu bahasa C, kita tahu bahwa itu adalah sebuah sistem, bukan perangkat lunak grafis itu sendiri, seharusnya Ini mencakup serangkaian tugas inti seperti mengembangkan driver, membuat kernel sistem, manajemen file, manajemen internal, komunikasi jaringan, dll. </div><div>Kedua, posisi pengajaran yang umum di Tiongkok. Namun, dalam lingkungan kita saat ini, posisi pengajaran di sebagian besar universitas untuk bahasa C adalah bahwa hanya beberapa perguruan tinggi yang harus menawarkan struktur data selain kursus bahasa C. , arsitektur komputer, prinsip kompiler, prinsip sistem operasi dan kursus lainnya. </div><div>Selain itu, Komisi Inspeksi dan Pengawasan Disiplin Kabupaten Wan'an telah menyelidiki pelaksanaan tugas oleh unit dan personel terkait seperti Biro Pendidikan dan Olahraga Kabupaten, Administrasi Pengawasan Pasar dan Kualitas Kabupaten, dan Pemerintah Kotapraja Jiantian, dan meninjau pengawasan Penanggung jawab Biro Pendidikan dan Olahraga kabupaten, Administrasi Pengawasan Pasar dan Kualitas Kabupaten, Biro Pertanian Kabupaten, Komisi Kesehatan dan Keluarga Berencana Kabupaten, Pemerintah Kotapraja Jiantian dan unit terkait lainnya yang gagal melakukan tugasnya telah mengajukan dan meninjau kasus secara terpisah. Pada saat yang sama, Komisi Inspeksi dan Pengawasan Disiplin Daerah akan melakukan penyelidikan terhadap proses penawaran makanan bergizi siswa, dan akan mengumumkan hasilnya kepada publik segera setelah tersedia. </div></div><br><h3>Font: 30px, tanpa set celah: defaultnya 30px, sama dengan font;</h3><div><div>Banyak teman yang pernah belajar bahasa C melihat kembali C Kalau berbicara tentang bahasa, pasti akan ada pertanyaan seperti ini: Mengapa bahasa C berjalan di bawah jendela hitam? Sebuah program yang menghitung luas segitiga atau mencetak jumlah bunga bakung? Sehebat apapun pemrogramannya, kenapa kita tetap tidak bisa membuat software keren itu? Pada akhirnya, itu hanya kekanak-kanakan! Mengapa. </div><div>Pertama, positioning penemuan bahasa C, dari awal penemuannya oleh Dennis Ritchie, penemu bahasa C, kita tahu bahwa itu adalah sebuah sistem, bukan perangkat lunak grafis itu sendiri, seharusnya Ini mencakup serangkaian tugas inti seperti mengembangkan driver, membuat kernel sistem, manajemen file, manajemen internal, komunikasi jaringan, dll. </div><div>Kedua, posisi pengajaran yang umum di Tiongkok. Namun, dalam lingkungan kita saat ini, posisi pengajaran di sebagian besar universitas untuk bahasa C adalah bahwa hanya beberapa perguruan tinggi yang harus menawarkan struktur data selain kursus bahasa C. , arsitektur komputer, prinsip kompiler, prinsip sistem operasi dan kursus lainnya. </div><div>Ketiga, bahasa C dapat digunakan untuk melakukannya, tetapi jarang dilakukan secara langsung dalam bahasa C. Saat kita mempelajari bahasa C, kita memilih program konsol, sehingga program Anda berjalan di jendela hitam tulis aplikasi windows, tidak akan ada jendela hitam seperti itu. Itu akan tetap menjadi sintaks bahasa C, yang dapat dipahami semua orang. </div></div><br><h3>Font: 30px, setting gap: 14px;</h3><div><div>Banyak teman yang pernah belajar bahasa C pasti akan mengetahuinya ketika melihat kembali bahasa C Saya punya pertanyaan ini, mengapa bahasa C berjalan di bawah jendela hitam? Sebuah program yang menghitung luas segitiga atau mencetak jumlah bunga bakung? Sehebat apapun pemrogramannya, kenapa kita tetap tidak bisa membuat software keren itu? Pada akhirnya, itu hanya kekanak-kanakan! Mengapa. </div><div>Pertama, positioning penemuan bahasa C, dari awal penemuannya oleh Dennis Ritchie, penemu bahasa C, kita tahu bahwa itu adalah sebuah sistem, bukan perangkat lunak grafis itu sendiri, seharusnya Ini mencakup serangkaian tugas inti seperti mengembangkan driver, membuat kernel sistem, manajemen file, manajemen internal, komunikasi jaringan, dll. </div><div>Kedua, posisi pengajaran yang umum di Tiongkok. Namun, dalam lingkungan kita saat ini, posisi pengajaran di sebagian besar universitas untuk bahasa C adalah bahwa hanya beberapa perguruan tinggi yang harus menawarkan struktur data selain kursus bahasa C. , arsitektur komputer, prinsip kompiler, prinsip sistem operasi dan kursus lainnya. </div><div>Ketiga, bahasa C dapat digunakan untuk melakukannya, tetapi jarang dilakukan secara langsung dalam bahasa C. Saat kita mempelajari bahasa C, kita memilih program konsol, sehingga program Anda berjalan di jendela hitam tulis aplikasi windows, tidak akan ada jendela hitam seperti itu. Itu akan tetap menjadi sintaks bahasa C, yang dapat dipahami semua orang. </div></div></tubuh></html>Hasil berjalan:
5. aturan kolom mengatur batas antar kolom
tata bahasa:
aturan-kolom:<lebar-aturan-kolom>||<gaya-aturan-kolom>||<warna-aturan-kolom>
Deskripsi parameter
● kolom-aturan-lebar Ketebalan pembatas
●gaya batas gaya kolom-aturan
●warna batas kolom-aturan-warna
PS: Berikan perhatian khusus pada kenyataan bahwa jika jarak antar kolom < lebar pembatas, maka akan terjadi keadaan kolom menutupi pembatas.
(1) lebar aturan kolom
Menetapkan atau mengambil ketebalan batas antar kolom suatu objek.
tata bahasa:
lebar aturan kolom：<panjang>|tipis|sedang|tebal;
Deskripsi parameter
●panjang: Gunakan nilai panjang untuk menentukan ketebalan batas, nilai negatif tidak diperbolehkan;
●medium: menentukan ketebalan default tepian;
●thin: menentukan batas yang lebih tipis dari ketebalan default;
●thick: Menentukan batas yang lebih tebal dari ketebalan default.
(2) gaya aturan kolom mengatur gaya batas
Menetapkan atau mengambil gaya batas antar kolom suatu objek.
tata bahasa
gaya aturan kolom: tidak ada|tersembunyi|titik-titik|putus-putus|padat|ganda|alur|punggung bukit|sisipan|awal;
Deskripsi parameter
●tidak ada: tidak ada garis besar;
●hidden: menyembunyikan batas;
●bertitik: garis putus-putus;
●putus-putus: garis putus-putus;
●padat: garis besar padat;
●ganda: garis luar ganda;
●alur: profil alur 3D;
●punggungan: profil alur cembung 3D;
●inset: kontur tepi cekung 3D;
●awal: garis tepi cembung 3D.
Catatan: Jika ada outline dengan dua garis, maka lebarnya mencakup jarak antara kedua garis tersebut.
(3) kolom-aturan-warna mengatur warna batas
Menetapkan atau mengambil warna batas antar kolom suatu objek.
tata bahasa:
aturan-kolom-warna:<warna>;
Deskripsi parameter: Tentukan warna. Tanpa lebar dan gaya, warnanya akan gagal. Standarnya berwarna hitam.
6. bentang kolom menyetel elemen untuk menjangkau semua kolom
Menyetel atau mengambil apakah elemen objek mencakup semua kolom.
tata bahasa:
rentang kolom: tidak ada|semua;
Deskripsi parameter: tidak ada: tidak mencakup kolom; semua: mencakup semua kolom.
Ini tidak digunakan di penampung seperti atribut kolom lainnya, tetapi di elemen turunan penampung.
7. pengisian kolom mengatur tinggi kolom yang akan disatukan (saat ini tidak kompatibel dengan browser umum)
Menyetel atau mengambil apakah tinggi semua kolom objek seragam.
tata bahasa:
pengisian kolom:autodefault|saldo;
Deskripsi parameter: otomatis: konten adaptif tinggi kolom; keseimbangan: tinggi semua kolom disatukan dengan kolom tertinggi.
Browser utama tidak kompatibel dengan atribut ini.
8. jeda kolom menyetel baris baru
●column-break-before mengatur apakah akan memutus garis sebelum objek yang ditentukan.
●column-break-after mengatur apakah akan memutus garis setelah objek yang ditentukan.
●column-break-inside mengatur apakah akan memutus garis di dalam objek
(1)kolom-break-sebelumnya
Apakah akan memutus garis sebelum mengatur atau mengambil objek.
tata bahasa:
kolom-break-sebelum: otomatis|selalu|hindari;
Deskripsi parameter: otomatis: tidak memaksa atau melarang putusnya garis sebelum elemen dan selalu membuat kolom baru: selalu memutus garis sebelum elemen dan membuat kolom baru; menghindari: menghindari putusnya garis sebelum elemen dan membuat kolom baru;
(2)kolom-break-after
Apakah akan memutus garis setelah mengatur atau mengambil objek.
tata bahasa:
kolom-break-after：otomatis|selalu|hindari;
Deskripsi parameter: otomatis: tidak memaksa atau melarang memutus baris demi elemen dan selalu membuat kolom baru: selalu memutus baris demi elemen dan membuat kolom baru; menghindari: menghindari memutus baris demi elemen dan membuat kolom baru;
(3) atribut pembobolan kolom
Menyetel atau mengambil apakah garis putus-putus di dalam objek.
tata bahasa:
kolom-break-inside:autodefault|hindari