В первой части этого урока мы разрабатываем представление контента под картиной каруселей. Введение контента разделено на две части, на этот раз первая половина.
один. Введение контента домашней страницы
// Что касается диаграммы карусели последнего класса, на самом деле есть лучшее решение в руководстве, и это не требует дополнительного контроля кода. <a href = "#mycarousel" data-slide = "prev"> <pran> </span> </a> <a href = "#mycarousel" data-slide = "next"> <pran> </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> <div> <h4> учитель </h4> <p> Другие: лекторы, которые не из GenUine Europection и American Universities и не имеют репутации в индустрии! </p> <p> Другие: университеты мирового класса, такие как Гарвард и Йельский университет в Соединенных Штатах, и известные эксперты по бренду с репутацией! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </div> <div> <div> <h4> Расписание класса </h4> <p> Другие: эффективность класса не может быть гарантирована, не существует, и задача не может быть завершена! </p> <p> Другие: обеспечить нормальную эффективность класса, сформулировать график и выполнить задачи в тот же день! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <div> <div> <h4> Service Tear </p> <p> Другие: Внутренняя подготовка сотрудников высокого уровня, которые прошли хорошее высококачественное обучение в области обслуживания! </p> </div> </div> </div> </div> </div> </div> </div> </div>
Соответствующая часть CSS
Body {font-family: "helvetica neue", helvetica, arial, "microsoft yaheiui", "microsoft yaheiui", simhei, "/5b8b/4f53", simsun, sans-serif;}. Tab-h2 {font-size: 20px; Цвет: #0059B2; Текст-альбом: Центр; СКАЖИ САМЕТ: 1px;}. Tab-p {font-size: 15px; Цвет: #999; Текст-альбом: Центр; СКАЖИ САМЕТ: 1PX; Маржа: 20px 0 40px 0;}. Tab1 {margin: 30px 0; Color: #666;}. Tab1 .Media heading {margin: 5px 0 20px 0;}. Tab1 .text-Mated {color: #999; Текстовое декорация: линейный; Текстовое декорация: линейный провод; } .tab-p {font-size: 16px; }}/ * Средний экран (настольный дисплей, больше или равен 992px) */@media (min-width: 992px) {.tab-h2 {font-size: 28px; } .tab-p {font-size: 17px; }}/ * Большой экран (большой настольный дисплей, больше или равный 1200px) */@media (min-width: 1200px) {.tab-h2 {font-size: 30px; } .tab-p {font-size: 18px; }}Теперь давайте создадим вторую половину введения контента домашней страницы.
один. Введение контента домашней страницы
Сначала заполните нижний колонтитул внизу
<нижний колонтитул идентификатор = "нижний колонтитул"> <div> <p> Корпоративное обучение | Сотрудничество имеет значение | Жалобы об авторском праве Питается от начальной загрузки. </p> </div> </cooler>
Нижний CSS
#footer {padding: 20px; Текст-альбом: Центр; фоновый цвет: #EEE; пограничная топ: 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.png"> </div> <div> <h3> идеальное метод управления </h3> <p> Последняя программа обучения управления позволит вашему бизнесу наверстать упущенное. </p> </div> </div> </div> </div>
Секция CSS
.tab2 {founale: #eee; Заполнение: 60px 20px; Text-align: Center;}. Tab2 img {ширина: 40%; Высота: 40%;}. Tab3 {Padding: 40px 0; Text-Align: Center;}. Tab3 Img {ширина: 65%; Высота: 65%;}. Текст h3 {font-size: 20px;}. Текст p {font-size: 14px;}/ * Маленький экран (планшет, больше или равна 768px) */@media (min-width: 768px) {.text h3 {font-size: 22px; } .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; }}/ * Большой экран (большой работник, больше или равный 1200px) */@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) .Resize (function () {$ '. ($ ('. Auto'). EQ (0) .Height () - $ ('. Text'). EQ (0) .Height ()) / 2 + 'px');}); $ ('. Text'). EQ (1) .css ('Margin -top', ($ ('. Auto'). $ ('. Text'). EQ (1) .Height ()) / 2 + 'px'); $ (window) .resize (function () {$ ('. Text'). Eq (1) .css ('margin -top', ($ ('. Auto'). EQ (1) .Height () - $ ('.). 'px');});Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам 3 захватывающих тем:
Начальная учебник по обучению
Bootstrap Practical Rutorial
Учебное пособие по использованию плагина Bootstrap
Выше приведено весь контент, введенный на домашней странице Bootstrap. Надеюсь, вам понравится. В будущем будет более захватывающая презентация контента. Не пропустите это.