Obwohl IE6 bis auf einige anspruchsvolle Anforderungen ignoriert wurde, muss der IE8, der Browser IE8, der mit Win7 ausgestattet ist, noch unterstützt werden.
Der Hauptvorteil dieser Methode besteht darin, dass ich persönlich denke, dass sie weniger Vorbereitung ist und nicht nach einer großen Anzahl von Bildern suchen muss, um Materialien online zu machen. Sie müssen nur eine Bootstrap, JQuery und Photoshop vorbereiten. So konfigurieren Sie Bootstrap und JQuery. Sie können auf "Bootstrap zum Schreiben eines Dialogfelds schreiben, das auf der aktuellen Webseite geschlossen werden kann, die geschlossen werden kann" (klicken Sie, um den Link zu öffnen).
Wenn Sie aufgefordert werden, eine Website zu schreiben, werden Sie oft beunruhigt, wie Sie sie layout haben. Tatsächlich ist es nicht schwierig. Wenn Sie Bootstrap kompetent verwenden und über eine bestimmte Methode verfügen, können Sie Ihre Hausaufgaben immer noch schnell und einfach erledigen, um mit normalen Anforderungen zu erfüllen.
Obwohl die Seitenvorlagen lange im Internet gesucht werden, besteht der Schlüssel darin, den Erstellungsprozess dieser Seitenvorlagen zu verstehen.
Sobald das Herunterladen dieser Vorlagen mit dem Browser nicht kompatibel ist und nicht geändert wird, wird dies ein großer Problem sein.
1. Grundziele
Verwenden Sie Bootstrapv3, um die folgende Seite zu erstellen:
Die Startseite ist oben gezeigt. Erstens ist das Aufhängen am Header die Navigation dieser Website, die übrig ist, mittel, rechts und Dropdown -Menü. Die Essenz hier ist eine Knopfgruppe, und die von Bootstrap bereitgestellte Navigationsleistenkomponente kann nicht verwendet werden, da diese Navigationsleistenkomponente nicht mit IE8 kompatibel ist. Weitere Informationen finden Sie im Artikel "So lösen Sie die Fehler der Bootstrap -Navigationsleiste in IE8" (Klicken Sie hier, um den Link zu öffnen).
Anschließend gibt es unter dem riesigen Bildschirm drei Spalten und zwei entsprechende Schaltflächen. Hier können Sie die wichtigsten Teile der Website und schließlich wie üblich Urheberrechtsinformationen platzieren.
Die innere Seite sieht so aus:
Es ist auch eine Top -Navigationsleiste, gefolgt vom Titel und Inhalt dieser inneren Seite. Der Titel der inneren Seite ist im Wesentlichen ein riesiger Bildschirm, aber nur kleiner als die Größe der Startseite.
Als nächstes kommen Urheberrechtsinformationen.
2. Produktionsprozess
1. Öffnen Sie zuerst Photoshop und erstellen Sie ein neues 1024x1 -Bild. Die Breite ist so breit wie möglich. Versuchen Sie einfach, so breit wie möglich zu sein. Das Bild ist 1. Die Vordergrundfarbe ist dunkelgrün R: 0 g: 140 b: 0, die Hintergrundfarbe ist hellgrün. R: 100 g: 200 b: 100. Verwenden Sie das Gradientenwerkzeug, um das folgende Bild herauszuziehen. Egal wie Sie es ziehen, Sie können es nach links und rechts und in die Mitte und beide Seiten ziehen, abhängig von Ihren persönlichen Vorlieben:
Dies ist das einzige Bild, das wir uns vorbereiten müssen. Sie können Photoshop schließen, beiseite werfen und dieses Bild im Website -Projektordner speichern. Dieses Bild ist nur etwa 6K und wirkt sich überhaupt nicht aus.
2. Homepage
Der spezifische Code ist wie folgt, und dann wird der Code nacheinander erläutert:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titels> untitelte Dokument </title> <meta name = "tithort =" siehsport " content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", sans-serif; } </style> </head> <body> <div style = "Position: abstrahiert; oben: 0; links: 0; Breite: 100%;"> <div> <div> <button type = "button"> links </button> </div> <div> <button type = "button"> middle </button> </div> <Div> <Taste "Button". data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> </div> <div style="background-image: URL (Bilder /BG.JPG); <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" rollen = "button"> button </a> </p> </div> </div> </div> <div> <div style = "text-align: center"> Copyright-Informationen </div> </div> </div> </body> </html>(1) <kopf> Teil
<head> <!--Website encoding, title, adaptive screen, etc. --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Unt titled document</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--JS and css styles that Ich muss verwendet werden-> <link href = "css/bootstrap.css" rel = "styleSheet" media = "screen"> <script type = "text/javaScript" src = "js/jquery-1.11.1.js"> </script type = "text/javascript" src = "js/boootStrap.". CSS-Stil, den wir definieren müssen, um den Fehler im Win7-System zu lösen, dass Microsofts schwarze Schriftart normal nicht angezeigt werden kann, aber die Song-Schriftart wird angezeigt-> <style type = "text/cs"> h1, h2, h3, h4, h5 {font-family: "microsoft yahei ui", "microsoft yahei", "yahei ui", "", "yahei ui", "", "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," "," ",", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", des Ya “, der", der Yah ““, des Micros ““, der Micros “," Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", Sans-Serif; } </style> </head>(2) Navigationsleiste
Da die von Bootstrap bereitgestellte Navigationsleiste nicht zutreffend ist, mussten wir die von Bootstrap bereitgestellte Knopfgruppe verwenden, um die Navigationsleiste selbst zu schreiben
<!-Zuallererst muss die Navigationsleiste am Kopf der Webseite aufgehängt werden-> <div style = "Position: Abstract; oben: 0; links: 0; Breite: 100%;"> <!-Definieren Sie eine Knopfgruppe-> <div> <div> <! Es wird das A-Tag verwendet und dann den Klassenstil hinzufügen, anstatt das von der offizielle Website bereitgestellte Schaltfläche-> <a href = "#"> links </a> </div> <div> <a href = "#"> Mitte </a> </div> <div> <a href = "#"> rechts </a> </div> </div> </div> <! data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div>
Ändern Sie das BTN-SUCCESS im Klassenattribut in BTN-Primary, Btn-Danger usw. Kann die Farbe dieser Taste ändern!
(3) Der riesige Bildschirmteil
Der riesige Bildschirm ist wie folgt geschrieben. Der Schlüssel ist, den Hintergrund vorzustellen, den wir gerade in Photoshop gezeichnet haben.
Der Grund, warum ich hier so viele hinzufügen muss.
<div style="background-image: url(images/bg.jpg); background-repeat: repeat; text-align: center"> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> < /Div>
(4) Spaltenabschnitt
Hier wird die Grid -Organisation von Bootstrap verwendet, um die drei Spalten einzugeben
Details finden Sie im Artikel "Bootstrap", der sich automatisch an PC-, Tablet- und Mobiltelefon -Bootstrap -Gittersystem anpasst. Teilen Sie die 12 Gitter der gesamten Webseite in 3 Stücke, und jedes 4 -Gitter ist genau richtig. Jede Spalte ist ein Panel ohne Panelkopf, mit einem großen H3 -Titel im Inneren und dann einem Absatztext von P und zwei Schaltflächen.
Es ist erwähnenswert, dass diese Dinge in einen Container platziert werden müssen, da diese drei Dinge die gesamte Seite füllen:
<div> <div> <div> <div> <div> <h3> Column1 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> </div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href="#" role="button">Button</a> </p> </div> </div> </div> <div> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <a href="#" role="button">Button</a> <a href = "#" rollen = "button"> button </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) Copyright -Informationen Teil
Es gibt nichts zu sagen, nur ein Panel
<div> <div style = "text-align: center"> Copyright-Informationen </div> </div>
3. Innenseite
Wenn Sie wissen, wie Sie die Startseite erstellen, ist die Idee der inneren Seite genau gleich. Ich werde es nicht noch einmal wiederholen. Ebenso lautet der Code wie folgt:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"><Htmlmlml xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titels> untitelte Dokument </title> <meta name = "tithort =" siehsport " content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <style type="text/css"> h1,h2,h3,h4,h5 { font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "Wenquanyi Micro Hei", sans-serif; } </style> </head> <body> <div style="position: absolute; top: 0; left: 0; width: 100%;"> <div> <a href="#"> Left </a> </div> <div> <a href="#"> Middle </a> </div> <div> <a href="#"> Right </a> </div> <div> <button type="button" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu"> <li> <a href="#">Dropdown link</a> </li> <li> <a href="#">Dropdown link</a> </li> </ul> </div> </div> </div> </div> <div style="background-image: URL (Bilder/bg.jpg);Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.