في الجزء الأول من هذا الدرس ، نقوم بتصميم مقدمة محتوى أسفل صورة carousel. يتم تقسيم مقدمة المحتوى إلى جزأين ، هذه المرة هي النصف الأول.
واحد. مقدمة محتوى الصفحة الرئيسية
// فيما يتعلق برسم الرسم البياني للفئة الأخيرة ، يوجد في الواقع حل أفضل في الدليل ، ولا يتطلب التحكم الإضافي في التعليمات البرمجية. <a href = "#mycarousel" data-slide = "prev"> <span> </span> </a> <a href = "#mycarousel" data-slide = "next"> </span> </a>
<viv> <viv> <h2> "لماذا تختار Piaocheng Enterprise Training" </h2> <p> أعضاء هيئة التدريس القوية ودورات الإدارة العملية المثالية ستسمح لشركتك بتحقيق إقلاع نوعي! </p> <viv> <viv> <viv> <viv> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <viv> <h4> محتوى الدورة التدريبية </h4> <p> أخرى: كتبها محاضرون غير معروفين في الكليات والكامل ، الكتب المدرسية مع عدم وجود قيمة عملية! </p> <p> آخرون: الكتب المدرسية الواقعية التي تم تجميعها بشكل مشترك من قبل رواد الأعمال المعروفين وماجستير الإدارة! </p> </viv> </viv> </viv> <viv> <viv> <a href = "#"> <img src = "img/tab1-2.png"> </a> </div> <viv> <h4> المعلم </h4> <p> آخرون: محاضرون ليسوا من الأورابية الأصلية واللطقة الأمريكية لا يوجد في الصناعة! </p> <p> آخرون: الجامعات ذات المستوى العالمي مثل هارفارد وييل في الولايات المتحدة ، وخبراء العلامات التجارية المشهورين بسمعة! </p> </viv> </viv> </viv> <viv> <viv> <a href = "#"> <img src = "img/tab1-3.png"> </a> </viv> <viv> <liv> <h4> جدول الفئة </h4> <p> الآخرين: لا يمكن ضمان كفاءة الفصل ، ولا يوجد أي توقيت ، ولا يمكن إكمال المهمة! </p> <p> الآخرين: تأكد من كفاءة الفئة العادية ، وصياغة جدول زمني ، واستكمال المهام في نفس اليوم! </p> </viv> </viv> </viv> <viv> <viv> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <viv> <liv> <h4> فريق خدمة </h4> <p> آخرون: الموظفون العاديون الذين تم تجنيدهم من قبل المجتمع و </p> <p> آخرون: التدريب الداخلي للموظفين العاليين الذين خضعوا لتدريب جيد للخدمات الراقية! </p> </viv> </viv> </viv> </viv> </viv> </viv> </viv> </viv>
جزء CSS المقابل
body {font-family: "helvetica neue" ، helvetica ، arial ، "Microsoft Yaheiui" ، "Microsoft Yaheiui" ، Simhei ، "/5B8B/4F53" ، Simsun ، Sans-Serif ؛}. اللون: #0059B2 ؛ محاذاة النص: المركز ؛ تباعد الحروف: 1px ؛}. Tab-P {Font-Size: 15px ؛ اللون: #999 ؛ محاذاة النص: المركز ؛ تباعد الرسائل: 1 بكسل ؛ الهامش: 20px 0 40px 0 ؛}. Tab1 {margin: 30px 0 ؛ اللون: #666 ؛}. تكرار النص: line-shourgh ؛}. tab1. Media-heading {margin: 5px 0 20px 0 ؛}. تدمير النص: خط-من خلال ؛}. } .tab-p {font-size: 16px ؛ }}/ * شاشة متوسطة (عرض سطح المكتب ، أكبر من أو يساوي 992 بكسل) */@media (min-width: 992px) {.tab-h2 {font-size: 28px ؛ } .tab-p {font-size: 17px ؛ }}/ * شاشة كبيرة (شاشة سطح مكتب كبيرة ، أكبر من أو تساوي 1200 بكسل) */@media (min-width: 1200px) {.tab-h2 {font-size: 30px ؛ } .tab-p {font-size: 18px ؛ }}الآن دعنا ننشئ النصف الثاني من مقدمة محتوى الصفحة الرئيسية.
واحد. مقدمة محتوى الصفحة الرئيسية
أكمل التذييل في الأسفل أولاً
<footer id = "footer"> <viv> <p> تدريب الشركات | تعاون المسائل | شكاوى حقوق الطبع والنشر </p> <p> SU ICP رقم 12345678. © 2009-2016 شبكة تدريب المؤسسة Piaocheng. مدعوم من bootstrap. </p> </viv> </tower>
CSS أسفل
#footer {padding: 20px ؛ محاذاة النص: المركز ؛ لون الخلفية: #EEE ؛ أعلى الحدود: 1 بكسل Solid #CCC ؛} // فقرتان من المحتوى<viv> <viv> <viv> <viv> <img src = "img/tab2.png"> </viv> <viv> <h3> نظام تعليمي قوي </h3> <p> من خلال طبقات التفتيش من قبل أسياد الإدارة ، فإن عملك سيحقق تقدمًا كبيرًا. </p> </viv> </viv> </viv> </viv> </viv> <viv> <viv> <viv> <img src = "IMG/TAB3 </p> </viv> </viv> </viv> </viv>
قسم CSS
.tab2 {background: #EEE ؛ الحشو: 60px 20px ؛ text-align: center ؛}. tab2 img {width: 40 ٪ ؛ الارتفاع: 40 ٪ ؛}. Tab3 {padding: 40px 0 ؛ text-align: Center ؛}. Tab3 img {width: 65 ٪ ؛ الارتفاع: 65 ٪ ؛} } .text p {font-size: 15px ؛ } .tab2-text {float: left ؛ } .tab2-img {float: right ؛ }}/ * شاشة متوسطة (عرض سطح المكتب ، أكبر من أو يساوي 992px) */@media (min-width: 992px) {.text h3 {font-size: 24px ؛ } .text p {font-size: 16px ؛ } .tab2-text {float: left ؛ } .tab2-img {float: right ؛ }}/ * شاشة كبيرة (شاشة سطح مكتب كبيرة ، أكبر من أو تساوي 1200 بكسل) */@media (min-width: 1200px) {.text h2 {font-size: 26px ؛ } .text p {font-size: 18px ؛ } .tab2-text {float: left ؛ } .tab2-img {float: right ؛ }}JS التحكم في التركيز العمودي
$ ('. text'). eq (0) .css ('margin-top' ، ($ ('. auto'). Eq (0) .Height ()-$ ('. text'). Eq (0) .Height ()) / 2 + 'px') ؛ $ (window). (دولار (' / 2 + 'px') ؛ $ (window) .resize (function () {$ ('. text'). eq (1) .css ('margin -top' ، ($ ('. auto'). eq (1) .hight () - $ ('. text').إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وتوصيل 3 موضوعات مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل المحتوى الذي تم تقديمه على الصفحة الرئيسية bootstrap. أتمنى أن تعجبك. سيكون هناك عرض أكثر إثارة للمحتوى في المستقبل. لا تفوتها.