ในส่วนแรกของบทเรียนนี้เราออกแบบการแนะนำเนื้อหาด้านล่างภาพม้าหมุน การแนะนำเนื้อหาแบ่งออกเป็นสองส่วนคราวนี้เป็นครึ่งแรก
หนึ่ง. บทนำเนื้อหาโฮมเพจ
// เกี่ยวกับแผนภาพม้าหมุนของชั้นเรียนสุดท้ายมีทางออกที่ดีกว่าในคู่มือและไม่จำเป็นต้องมีการควบคุมรหัสเพิ่มเติม <a href = "#mycarousel" data-slide = "prev"> <span> </span> </a> <a href = "#mycarousel" data-slide = "next"> <span> </span> </a> // การแนะนำเนื้อหา
<div> <div> <h2> "ทำไมต้องเลือกการฝึกอบรม Piaocheng Enterprise" </h2> <p> คณะที่แข็งแกร่งและหลักสูตรการจัดการที่สมบูรณ์แบบจะช่วยให้ บริษัท ของคุณได้รับการบินขึ้นเชิงคุณภาพ! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <div> <h4> เนื้อหาหลักสูตร </h4> <p> คนอื่น ๆ : เขียนโดยอาจารย์ที่ไม่รู้จักในวิทยาลัยและมหาวิทยาลัย </p> <p> อื่น ๆ : ตำราเรียนที่สมจริงรวบรวมร่วมกันโดยผู้ประกอบการที่รู้จักกันดีและผู้เชี่ยวชาญด้านการจัดการ! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-2.png"> </a> </div> <dir- <h4> ครู </h4> <p> ผู้อื่น </p> <p> คนอื่น ๆ : มหาวิทยาลัยระดับโลกเช่นฮาร์วาร์ดและเยลในสหรัฐอเมริกาและผู้เชี่ยวชาญแบรนด์ที่มีชื่อเสียงที่มีชื่อเสียง! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3 </p> <p> คนอื่น ๆ : ตรวจสอบประสิทธิภาพของชั้นเรียนปกติกำหนดตารางเวลาและทำงานให้เสร็จในวันเดียวกัน! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <div> <div> <h4> ทีมบริการ </h4> <p> </p> <p> คนอื่น ๆ : การฝึกอบรมภายในของพนักงานที่มีมาตรฐานสูงซึ่งได้รับการฝึกอบรมการบริการระดับสูงที่ดี! </p> </div> </div> </div> </div> </div> </div> </div> </div>
ส่วน CSS ที่สอดคล้องกัน
ร่างกาย {Font-Family: "Helvetica neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/5b8b/4f53", Simsun, Sans-Serif; สี: #0059b2; TEXT-ALIGN: CENTER; ระยะห่างจดหมาย: 1px;}. tab-p {font-size: 15px; สี: #999; TEXT-ALIGN: CENTER; ระยะห่างจดหมาย: 1px; มาร์จิ้น: 20px 0 40px 0;}. tab1 {มาร์จิ้น: 30px 0; สี: #666;}. tab1 .media-heading {margin: 5px 0 20px 0;}. tab1. text-mute {color: #999; การกำหนดข้อความ: line-through;}. tab1 .media-heading {margin: 5px 0 20px 0;}. tab1. text-mute {color: #999; การกำหนดข้อความ: line-through;}. tab1 .col {padding: 20px;}/ * หน้าจอขนาดเล็ก (แท็บเล็ต, มากกว่าหรือเท่ากับ 768px) */@media (min-width: 768px) {.tab-h2 {ขนาดตัวอักษร: 26px; } .tab-p {ตัวอักษรขนาด: 16px; }}/ * หน้าจอขนาดกลาง (จอแสดงผลเดสก์ท็อปมากกว่าหรือเท่ากับ 992px) */@Media (Min-Width: 992px) {.tab-h2 {ตัวอักษรขนาด: 28px; } .tab-p {ตัวอักษรขนาด: 17px; }}/ * หน้าจอขนาดใหญ่ (จอแสดงผลเดสก์ท็อปขนาดใหญ่มากกว่าหรือเท่ากับ 1200px) */@media (min-width: 1200px) {.tab-h2 {ตัวอักษรขนาด: 30px; } .tab-p {ตัวอักษรขนาด: 18px; -ตอนนี้มาสร้างครึ่งหลังของการแนะนำเนื้อหาโฮมเพจ
หนึ่ง. บทนำเนื้อหาโฮมเพจ
เติมส่วนท้ายที่ด้านล่างก่อน
<footer id = "footer"> <div> <p> การฝึกอบรมองค์กร | เรื่องความร่วมมือ การร้องเรียนด้านลิขสิทธิ์ </p> <p> SU ICP No. 12345678 © 2009-2016 เครือข่ายการฝึกอบรม Piaocheng Enterprise ขับเคลื่อนโดย bootstrap </p> </div> </footer>
CSS ด้านล่าง
#footer {padding: 20px; TEXT-ALIGN: CENTER; พื้นหลังสี: #eee; Border-Top: 1px Solid #CCC;} // สองย่อหน้าของเนื้อหา<div> <div> <div> <div> <img src = "img/tab2.png"> </div> <div> <h3> ระบบการเรียนรู้ที่แข็งแกร่ง </h3> <p> ผ่านเลเยอร์ของการตรวจสอบโดยผู้เชี่ยวชาญด้านการจัดการธุรกิจของคุณจะก้าวหน้าอย่างมาก </p> </div> </div> </div> </div> </div> <div> <div> <div> <img src = "img/tab3 </p> </div> </div> </div> </div>
ส่วน CSS
.tab2 {พื้นหลัง: #eee; ช่องว่าง: 60px 20px; TEXT-ALIGN: CENTER;}. TAB2 IMG {WIDTH: 40%; ความสูง: 40%;}. tab3 {padding: 40px 0; TEXT-ALIGN: CENTER;}. TAB3 IMG {WIDTH: 65%; ความสูง: 65%;}. ข้อความ h3 {font-size: 20px;}. ข้อความ p {ตัวอักษรขนาด: 14px;}/ * หน้าจอขนาดเล็ก (แท็บเล็ต, มากกว่าหรือเท่ากับ 768px) */@media (min-width: 768px) } .Text P {ขนาดตัวอักษร: 15px; } .tab2-text {float: ซ้าย; } .tab2-img {float: ขวา; }}/ * หน้าจอขนาดกลาง (จอแสดงผลเดสก์ท็อปมากกว่าหรือเท่ากับ 992px) */@Media (Min-Width: 992px) {.Text H3 {ตัวอักษรขนาด: 24px; } .Text P {ขนาดตัวอักษร: 16PX; } .tab2-text {float: ซ้าย; } .tab2-img {float: ขวา; }}/ * หน้าจอขนาดใหญ่ (จอภาพเดสก์ท็อปขนาดใหญ่มากกว่าหรือเท่ากับ 1200px) */@Media (Min-Width: 1200px) {.Text H2 {Font-Size: 26px; } .Text P {ตัวอักษรขนาด: 18PX; } .tab2-text {float: ซ้าย; } .tab2-img {float: ขวา; -JS ควบคุมการจัดกึ่งกลางแนวตั้ง
$ ('. text'). eq (0) .css ('margin-top', ($ ('. auto'). eq (0) .height ()-$ ('. text'). eq (0) .Height () / 2 + 'px'); $ (window) ($ ('. auto'). eq (0) .height () - $ ('. text'). eq (0) .height ()) / 2 + 'px');}); $ ('. text'). eq (1) .css (' $ ('. text'). eq (1) .height ()) / 2 + 'px'); $ (หน้าต่าง). resize (ฟังก์ชัน () {$ ('. ข้อความ'). eq (1) .css ('margin -top', ($ ('). eq (1) 'px');});หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดที่นำมาใช้ในหน้าแรกของ Bootstrap ฉันหวังว่าคุณจะชอบมัน จะมีการนำเสนอเนื้อหาที่น่าตื่นเต้นมากขึ้นในอนาคต อย่าพลาด