En la primera parte de esta lección, diseñamos una introducción de contenido debajo de la imagen del carrusel. La introducción de contenido se divide en dos partes, esta vez es la primera mitad.
uno. Introducción al contenido de la página de inicio
// Con respecto al diagrama de carrusel de la última clase, en realidad hay una mejor solución en el manual, y no requiere un control de código adicional. <a href = "#myCarousel" data-slide = "previo"> <span> </span> </a> <a href = "#myCarousel" data-slide = "next"> <span> </span> </a> // Introducción de contenido
<Div> <Viv> <h2> "Por qué elegir Piaocheng Enterprise Training" </h2> <p> Facultad fuerte y cursos de gestión práctica perfectos permitirán a su empresa lograr un despegue cualitativo. </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <div> <h4> Contenido del curso </h4> <p> Otros: escritos por lectores desconocidos en colegios y universidades, libros de texto sin valor práctico! </p> <p> Otros: ¡Libros de texto realistas compilados conjuntamente por conocidos empresarios y maestros de gestión! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-2.png"> </a> </div> <div> <h4> maestro </h4> <p> Otros: los lectores que no son de universidades europeas y estadounidenses genuinas y no tienen reputación en la industria! </p> <p> Otros: ¡Universidades de clase mundial como Harvard y Yale en los Estados Unidos, y famosos expertos en marcas con reputación! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </div> <div> <div> <h4> horario de clases </h4> <p> otros: ¡la eficiencia de la clase no se puede garantizar, no se puede completar la tarea, y no se puede completar la tarea! </p> <p> Otros: ¡Asegure la eficiencia normal de la clase, formule un horario y complete las tareas el mismo día! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <div> <div> <h4> equipo de servicio </h4> <p> Otros: ¡empleados ordinarios reclutados por la sociedad y tienen niveles de servicio! </p> <p> Otros: capacitación interna de empleados de alto nivel que se han sometido a una buena capacitación en servicios de alta gama! </p> </div> </div> </div> </div> </div> </div> </div> </div>
La parte CSS correspondiente
Body {Font-Family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/5b8b/4f53", Simsun, Sans-Serif;}. Tab-H2 {Font-tize: 20px; Color: #0059b2; Text-Align: Center; espaciado de letras: 1px;}. Tab-P {Font-Size: 15px; Color: #999; Text-Align: Center; Espaciado de letras: 1px; margen: 20px 0 40px 0;}. Tab1 {margen: 30px 0; Color: #666;}. Tab1 .media-Heading {margen: 5px 0 20px 0;}. Tab1 .Text-MUTUT {Color: #999; Decoración de texto: Line-through;}. Tab1 .Media-Heading {Margin: 5px 0 20px 0;}. Tab1 .Text-MUTUT {Color: #999; Decoración de texto: Line-through;}. Tab1 .Col {relleno: 20px;}/ * Pantalla pequeña (tableta, mayor o igual a 768px) */@media (Min-width: 768px) {.tab-h2 {font-size: 26px; } .tab-p {font-size: 16px; }}/ * Pantalla media (pantalla de escritorio, mayor o igual a 992px) */@media (Min-Width: 992px) {.tab-h2 {font-size: 28px; } .tab-p {font-size: 17px; }}/ * Pantalla grande (pantalla de escritorio grande, mayor o igual a 1200px) */@media (min-width: 1200px) {.tab-h2 {font-size: 30px; } .tab-p {font-size: 18px; }}Ahora creemos la segunda mitad de la introducción del contenido de la página de inicio.
uno. Introducción al contenido de la página de inicio
Completa el pie de página en la parte inferior primero
<pie id = "pie"> <div> <p> Capacitación corporativa | La cooperación es importante | Quejas de derechos de autor </p> <p> Su ICP No. 12345678. © 2009-2016 Piaocheng Enterprise Training Network. Impulsado por Bootstrap. </p> </div> </footer>
CSS inferior
#footer {relleno: 20px; Text-Align: Center; Color de fondo: #EEE; border-top: 1px solid #ccc;} // dos párrafos de contenido<Div> <div> <div> <div> <img src = "img/tab22.png"> </div> <div> <h3> Sistema de aprendizaje fuerte </h3> <p> a través de capas de inspección por maestros de gestión, su negocio avanzará. </p> </div> </div> </div> </div> </div> <div> <div> <div> <img src = "img/tab3.png"> </div> <div> <h3> Método de gestión perfecto </h3> <p> El último programa de capacitación de gestión permitirá que su negocio se ponga al día con sus paradores. </p> </div> </div> </div> </div>
Sección CSS
.tab2 {fondo: #EEE; relleno: 60px 20px; Text-Align: Center;}. Tab2 img {ancho: 40%; Altura: 40%;}. Tab3 {relleno: 40px 0; Text-Align: Center;}. Tab3 img {ancho: 65%; Altura: 65%;}. Text H3 {Font-Size: 20px;}. Text P {font-size: 14px;}/ * pantalla pequeña (tableta, mayor que o igual a 768px) */@media (mínimo-width: 768px) {.Text h3 {font-tize: 22px; } .Text P {font-size: 15px; } .tab2-text {float: izquierda; } .tab2-img {float: right; }}/ * Pantalla media (pantalla de escritorio, mayor que o igual a 992px) */@media (min-width: 992px) {.Text h3 {font-size: 24px; } .Text P {font-size: 16px; } .tab2-text {float: izquierda; } .tab2-img {float: right; }}/ * Pantalla grande (monitor de escritorio grande, mayor o igual a 1200px) */@medios (Min-Width: 1200px) {.Text H2 {Font-size: 26px; } .Text P {font-size: 18px; } .tab2-text {float: izquierda; } .tab2-img {float: right; }}JS Control Centrado vertical
$ ('. Text'). Eq (0) .CSS ('Margin-top', ($ ('. ($ ('. $ ('. 'PX');});Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior es todo el contenido introducido en la página de inicio de Bootstrap. Espero que te guste. Habrá una presentación de contenido más emocionante en el futuro. No te lo pierdas.