Di bagian pertama pelajaran ini, kami merancang pengantar konten di bawah gambar carousel. Pendahuluan konten dibagi menjadi dua bagian, kali ini adalah babak pertama.
satu. Pendahuluan Konten Halaman Beranda
// Mengenai diagram carousel dari kelas terakhir, sebenarnya ada solusi yang lebih baik dalam manual, dan tidak memerlukan kontrol kode tambahan. <a href = "#mycarousel" data-slide = "prev"> <span> </span> </a> <a href = "#mycarousel" data-slide = "next"> <span> </span> </a> // Pendahuluan Konten
<div> <div> <h2> "Mengapa memilih pelatihan Piaocheng Enterprise" </h2> <p> Fakultas yang kuat dan kursus manajemen praktis yang sempurna akan memungkinkan perusahaan Anda untuk mencapai lepas landas kualitatif! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <dv> <h4> Konten kursus </h4> <p> Lainnya: Ditulis oleh Dekur yang Tidak Diketahui di Perguruan Tinggi dan Universitas, Buku Teks Tanpa Buku Teks dengan Nilai PRAKTIK! </p> <p> Lainnya: Buku teks realistis yang disusun bersama oleh pengusaha terkenal dan master manajemen! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-2.png"> </a> </div> <v> <h4> Guru </h4> <p> Orang lain: Dektur yang tidak ada dari orang-orang Eropa dan orang lain yang tidak memiliki orang lain dari orang-orang di European dan orang lain yang tidak memiliki orang lain dari European and American, </p> <p> Lainnya: universitas kelas dunia seperti Harvard dan Yale di Amerika Serikat, dan pakar merek terkenal dengan reputasi! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </div> <viv> <ve> <H4> Jadwal kelas </h4> <p> Lain </p> <p> Lainnya: Pastikan efisiensi kelas normal, merumuskan jadwal, dan menyelesaikan tugas pada hari yang sama! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <v div> <h4> Tim layanan </h4> <p> Lainnya: Karyawan Biasa yang direkrut oleh Levely dan telah tidak ada level yang tidak sama! </p> <p> Lainnya: Pelatihan internal karyawan standar tinggi yang telah menjalani pelatihan layanan kelas atas yang baik! </p> </div> </div> </div> </div> </div> </div> </div> </div>
Bagian CSS yang sesuai
Tubuh {font-family: "Helvetica neue", Helvetica, Arial, "Microsoft YaheiUi", "Microsoft YaheiUi", Simhei, "/5b8b/4f53", Simsun, Sans-Serif;}. Tab-h2 {font-Size: 20px; Warna: #0059b2; Teks-Align: tengah; spasi huruf: 1px;}. Tab-p {font-size: 15px; Warna: #999; Teks-Align: tengah; spasi surat: 1px; margin: 20px 0 40px 0;}. Tab1 {margin: 30px 0; Warna: #666;}. Tab1 .Media-heading {margin: 5px 0 20px 0;}. Tab1 .text-muted {Color: #999; Teks-dekorasi: line-through;}. Tab1 .Media-heading {margin: 5px 0 20px 0;}. Tab1 .text-Muted {Color: #999; Dekorasi teks: line-through;}. Tab1 .col {padding: 20px;}/ * layar kecil (tablet, lebih besar dari atau sama dengan 768px) */@media (min-lebar: 768px) {.tab-h2 {font-size: 26px; } .tab-p {font-size: 16px; }}/ * Layar sedang (tampilan desktop, lebih besar dari atau sama dengan 992px) */@media (min-lebar: 992px) {.tab-h2 {font-size: 28px; } .tab-p {font-size: 17px; }}/ * Layar besar (tampilan desktop besar, lebih besar dari atau sama dengan 1200px) */@media (min-lebar: 1200px) {.tab-h2 {font-size: 30px; } .tab-p {font-size: 18px; }}Sekarang mari kita buat paruh kedua dari pengenalan konten beranda.
satu. Pendahuluan Konten Halaman Beranda
Lengkapi footer di bagian bawah terlebih dahulu
<footer ID = "footer"> <div> <p> Pelatihan perusahaan | Kerja sama pentingnya | Keluhan Hak Cipta </p> <p> Su ICP No. 12345678. © 2009-2016 Jaringan Pelatihan Piaocheng Enterprise. Didukung oleh Bootstrap. </p> </div> </tfooter>
CSS bawah
#footer {padding: 20px; Teks-Align: tengah; latar belakang-warna: #EEE; Border-Top: 1px solid #ccc;} // Dua paragraf konten<div> <div> <div> <div> <mmg src = "img/tab2.png"> </div> <veT> <h3> Sistem Pembelajaran yang Kuat </h3> <p> Melalui lapisan inspeksi oleh Master Manajemen, bisnis Anda akan membuat kemajuan besar. </p> </div> </div> </div> </div> </div> <div> <div> <div> <mimg src = "img/tab3.png"> </div> <div> <h3> Metode manajemen yang sempurna </h3> <p> Program pelatihan manajemen terbaru akan memungkinkan bisnis Anda untuk mengejar ketinggalan dengan payudaranya. </p> </div> </div> </div> </div>
Bagian CSS
.tab2 {latar belakang: #eee; padding: 60px 20px; Text-Align: center;}. Tab2 img {width: 40%; Tinggi: 40%;}. Tab3 {Padding: 40px 0; Text-Align: center;}. Tab3 img {width: 65%; Tinggi: 65%;}. Teks h3 {font-size: 20px;}. Teks p {font-size: 14px;}/ * layar kecil (tablet, lebih besar dari atau sama dengan 768px) */@media (Min-width: 768px) {.TEXT H3 {font-SIZE: 22PX; } .text p {font-size: 15px; } .tab2-text {float: left; } .tab2-img {float: right; }}/ * Layar sedang (tampilan desktop, lebih besar dari atau sama dengan 992px) */@media (min-lebar: 992px) {.text h3 {font-size: 24px; } .text p {font-size: 16px; } .tab2-text {float: left; } .tab2-img {float: right; }}/ * Layar besar (monitor desktop besar, lebih besar dari atau sama dengan 1200px) */@media (min-lebar: 1200px) {.text h2 {font-size: 26px; } .text p {font-size: 18px; } .tab2-text {float: left; } .tab2-img {float: right; }}JS Control Vertikal Centering
$ ('. Teks'). eq (0) .css ('margin-top', ($ ('. Auto'). eq (0) .height ()-$ ('. Text'). EQ (0) .Height ()) / 2 + 'px'); $ (window) .Resize (function () {$ ('. ($ ('. AUTO'). EQ (0) .height () - $ ('. Teks'). EQ (0) .Height ()) / 2 + 'px');}); $ ('. Teks'). EQ (1) .css ('margin -top', ($ ('. Auto'). EQ (1). $ ('. Teks'). eq (1) .height ()) / 2 + 'px'); $ (window) .resize (function () {$ ('. Teks'). EQ (1) .css ('margin -top', ($ ('. 'px');});Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan 3 topik menarik kepada Anda:
Tutorial Pembelajaran Bootstrap
Tutorial Praktis Bootstrap
Tutorial Penggunaan Plug-In Bootstrap
Di atas adalah semua konten yang diperkenalkan di beranda Bootstrap. Saya harap Anda menyukainya. Akan ada presentasi konten yang lebih menarik di masa depan. Jangan lewatkan.