Im ersten Teil dieser Lektion entwerfen wir eine Inhaltseinführung unter dem Carousel -Bild. Die Inhaltseinführung ist in zwei Teile unterteilt, diesmal ist die erste Hälfte.
eins. Homepage -Inhalt Einführung
// In Bezug auf das Karusselldiagramm der letzten Klasse gibt es im Handbuch tatsächlich eine bessere Lösung und erfordert keine zusätzliche Codekontrolle. <a href = "#mycarousel" data-slide = "prev"> <span> </span> </a> <a href = "#mycarousel" data-slide = "next"> <span> </span> </a> // Inhaltseinführung
<Div> <div> <h2> "Warum wählen Sie Piaocheng Enterprise Training" </h2> <p> Starke Fakultäten und perfekte praktische Managementkurse können Ihr Unternehmen ermöglichen, einen qualitativen Start zu erreichen! </p> <div> <div> <div> <div> <a href = "#"> <img src = "img/tab1-1.png"> </a> </div> <div> <h4> Kursinhalt </h4> <p> Andere: geschrieben von unbekannten Lektoren in Hochschulen und Universitäten, Texte ohne praktische Wert! </p> <p> Andere: Realistische Lehrbücher, die gemeinsam von bekannten Unternehmern und Management Masters zusammengestellt wurden! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-2.png"> </a> </div> <div> <h4> Lehrer </h4> <p> andere: Lektoren, die nicht von echten europäischen und amerikanischen Universitäten und in der Branche haben! </p> <p> Andere: Weltklasse-Universitäten wie Harvard und Yale in den USA und berühmte Markenexperten mit Ruf! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-3.png"> </a> </div> <div> <div> <h4> Klassenplan </h4> <p> Andere: Der Effizienz der Klassen kann nicht garantiert werden, und es gibt nicht mehr garantiert, und es gibt nicht mehr gefüllt, und es gibt keine Zeit, und der Zeitplan ist nicht mehr garantiert, und es ist nicht abgeschlossen, und es ist nicht abgeschlossen, und es ist nicht abgeschlossen, und es ist nicht abgeschlossen, und es ist nicht mehr garantiert. </p> <p> Andere: Stellen Sie die normale Klasseneffizienz sicher, formulieren Sie einen Zeitplan und erledigen Sie die Aufgaben am selben Tag! </p> </div> </div> </div> <div> <div> <a href = "#"> <img src = "img/tab1-4.png"> </a> </div> <div> <div> <h4> Service-Team </h4> <p> Andere: Die von der Gesellschaft und haben die gesellschaftliche Angestellte rekrutiert und haben die Gesellschaft und haben keine Dienstleistungsstufe! </p> <p> Andere: Interne Schulung von Mitarbeitern mit hohem Standard, die eine gute High-End-Service-Schulung absolviert haben! </p> </div> </div> </div> </div> </div> </div> </div> </div>
Der entsprechende CSS -Teil
Körper {Schriftfamilie: "Helvetica Neue", Helvetica, Arial, "Microsoft Yaheiui", "Microsoft Yaheiui", Simhei, "/5b8b/4f53", Simsun, Sans-Serif;}. Tab-H2 {FONT-SIZE: 20PX; Farbe: #0059b2; Text-Align: Mitte; Buchstabenabteilung: 1px;}. tab-P {Schriftgröße: 15px; Farbe: #999; Text-Align: Mitte; Buchstabenabteilung: 1PX; Rand: 20px 0 40px 0;}. Tab1 {Margin: 30px 0; Farbe: #666;}. tab1 .media-heading {margin: 5px 0 20px 0;}. tab1 .Text-mute {color: #999; Textdekoration: Zeilen-Through;}. tab1 .media-heading {margin: 5px 0 20px 0;}. tab1 .Text-mute {color: #999; Textdekoration: Zeilen-Through;}. tab1 .col {padding: 20px;}/ * kleiner Bildschirm (Tablet, größer oder gleich 768px) */@media (min-width: 768px) {.tab-h2 {font-size: 26px; } .tab-p {Schriftgröße: 16px; }}/ * Mittlerer Bildschirm (Desktop-Anzeige, größer oder gleich 992px) */@media (min-width: 992px) {.tab-h2 {Schriftgröße: 28px; } .tab-P {Schriftgröße: 17px; }}/ * Großer Bildschirm (Großes Desktop-Display, größer oder gleich 1200px) */@media (min-width: 1200px) {.tab-h2 {Schriftgröße: 30px; } .tab-P {Schriftgröße: 18px; }}Erstellen wir nun die zweite Hälfte der Einführung in Homepage -Inhalte.
eins. Homepage -Inhalt Einführung
Vervollständigen Sie zuerst die Fußzeile unten
<footer id = "footer"> <div> <p> Unternehmenstraining | Kooperation ist wichtig | Copyright-Beschwerden </p> <p> SU ICP Nr. 12345678. © 2009-2016 Piaocheng Enterprise Training Network. Angetrieben von Bootstrap. </p> </div> </footer>
Bottom CSS
#footer {padding: 20px; Text-Align: Mitte; Hintergrundfarbe: #eee; Grenze-Top: 1PX Solid #CCC;} // Zwei Absätze des Inhalts<div> <div> <div> <div> <img src = "img/tab2.png"> </div> <div> <h3> Starkes Lernsystem </h3> <p> Durch Inspektionsstiche durch Management -Meister wird Ihr Unternehmen große Fortschritte machen. </p> </div> </div> </div> </div> </div> <div> <div> <div> <img src = "img/tab3.png"> </div> <div> <h3> Perfect Management -Methode </h3> <p> Das neueste Management -Trainingsprogramm kann Ihrem Geschäft mit seinen Peers einholen. </p> </div> </div> </div> </div>
CSS -Abschnitt
.tab2 {Hintergrund: #eee; Polsterung: 60px 20px; text-align: center;}. tab2 img {width: 40%; Höhe: 40%;}. tab3 {padding: 40px 0; text-align: center;}. tab3 img {width: 65%; Höhe: 65%;}. Text H3 {Schriftgröße: 20px;}. Text P {Schriftgröße: 14px;}/ * kleiner Bildschirm (Tablet, größer oder gleich 768px) */@media (min-width: 768px) {.Text H3 {font-size: 22px; } .Text P {Schriftgröße: 15px; } .tab2-text {float: links; } .tab2-img {float: rechts; }}/ * Mittlerer Bildschirm (Desktop-Anzeige, größer oder gleich 992px) */@media (min-width: 992px) {.text H3 {Schriftgröße: 24px; } .Text P {Schriftgröße: 16px; } .tab2-text {float: links; } .tab2-img {float: rechts; }}/ * Großer Bildschirm (großer Desktop-Monitor, größer oder gleich 1200px) */@media (min-width: 1200px) {.text H2 {Schriftgröße: 26px; } .Text P {Schriftgröße: 18px; } .tab2-text {float: links; } .tab2-img {float: rechts; }}JS Control vertikale Zentrierung
$ ('. text'). EQ (0) .css ('Margin-Top', ($ ('. Auto'). EQ (0) .Height ()-$ ('. text'). EQ (0) .Height ()) / 2 + 'px'); ($. / 2 + 'px');Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist alle auf der Bootstrap -Homepage eingeführten Inhalte. Ich hoffe es gefällt euch. In Zukunft wird es aufregende Inhaltspräsentation geben. Verpassen Sie es nicht.