Bien que IE6 ait été ignoré, à l'exception de certaines exigences exigeantes, IE8, le navigateur IE8, qui est livré avec Win7, doit encore être pris en charge.
Le principal avantage de cette méthode est que je pense personnellement que c'est qu'il s'agit moins de préparation et n'a pas besoin de rechercher un grand nombre de photos pour fabriquer du matériel en ligne. Il vous suffit de préparer un bootstrap, jQuery et Photoshop. Comment configurer Bootstrap et JQuery, vous pouvez vous référer à "Bootstrap pour écrire une boîte de dialogue qui peut être fermée sur la page Web actuelle qui peut être fermée" (cliquez pour ouvrir le lien)
Lorsqu'on vous a demandé d'écrire un site Web, vous serez souvent troublé par la façon de le disposer. En fait, ce n'est pas difficile. Si vous pouvez utiliser Bootstrap avec compétence et avoir une méthode spécifique, vous pouvez toujours gérer rapidement et facilement vos devoirs pour répondre aux besoins ordinaires.
Bien que les modèles de page soient recherchés sur Internet, la clé est de pouvoir comprendre le processus de création de ces modèles de page.
Une fois que le téléchargement de ces modèles est incompatible avec le navigateur et ne sera pas modifié, ce sera un gros problème.
1. Objectifs de base
Utilisez Bootstrapv3 pour créer la page suivante:
La page d'accueil est indiquée ci-dessus. Tout d'abord, suspendu à l'en-tête est la navigation de ce site Web, qui reste, le menu moyen, droit et déroulant. L'essence ici est un groupe de bouton, et le composant de la barre de navigation fournis par Bootstrap ne peut pas être utilisé, car ce composant de barre de navigation n'est pas compatible avec IE8. Pour plus de détails, consultez l'article "Comment résoudre les défauts de la barre de navigation de bootstrap Navbar dans IE8" (cliquez pour ouvrir le lien)
Ensuite, sous l'écran géant, il y a trois colonnes et deux boutons correspondants. Ici, vous pouvez placer les parties les plus importantes du site Web, et enfin, comme d'habitude, les informations sur le droit d'auteur.
La page intérieure ressemble à ceci:
Il s'agit également d'une barre de navigation supérieure, suivie du titre et du contenu de cette page intérieure. Le titre de la page intérieure est essentiellement un écran géant, mais il est juste plus petit que la taille de la page d'accueil.
Vient ensuite les informations sur le droit d'auteur.
2. Processus de production
1. Ouvrez d'abord Photoshop et créez une nouvelle image 1024x1. La largeur est aussi large que possible. Essayez simplement d'être aussi large que possible. L'image est 1. La couleur du premier plan est vert foncé r: 0 g: 140 b: 0, la couleur d'arrière-plan est vert clair r: 100 g: 200 b: 100. Utilisez l'outil de dégradé pour retirer l'image suivante. Peu importe comment vous le tirez, vous pouvez le tirer vers la gauche et la droite, et vers le milieu et les deux côtés, selon vos préférences personnelles:
C'est la seule image que nous devons préparer. Vous pouvez fermer Photoshop, le jeter de côté et enregistrer cette image dans le dossier du projet de site Web. Cette image n'est qu'environ 6k et n'affecte pas du tout le chargement.
2. Page d'accueil
Le code spécifique est le suivant, puis le code est expliqué un par un:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éread> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> intr tiled document </tape> <meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> <style type = "text / css"> h1, h2, h3, h4, h5 {font-family: "Microsoft yahei ui", "Microsoft Yahei", "Helvetica neue" "Wenquanyi Micro Hei", Sans-Serif; } </ style> </ head> <body> <div style = "Position: Résumé; Top: 0; gauche: 0; largeur: 100%;"> <div> <div> <Button Type = "Button"> Left </ Button> </ Div> <div> <Button Type = "Button"> Middle </ Button> </ Div> <div> <Button Type = "Button" Button "Right </ Button> Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <ul Role = "Menu"> <li> <a href = "#"> lien de dropdown </a> </li> <li> <a href = "#"> lien de dropdown </a> </li> </ul> </v> </v> </v> </v> <div style = "bandle-image: URL (images / bg.jpg); </h2> <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 /> <br /> <br /> <br /> </div> <div> <div> <v> <h3> Column2 </h3> <p> ... </p> <p> <a href = "#" role = "Button"> Button </a> <a href = "#" role = "Button"> Button </a> </p> </v> </v> </v> </v> <v> <h3> Column2 </ h3> <p> <p> <p> <v> <h3> Column2 <a href = "#" "role =" Button "> Button </a> <a href =" # "" role = "Button"> Button </a> </p> </div> </div> </div> </ div> <v> <div> <v> <h3> Column2 </h3> <p> ... </p> <p> <a href = "# #" role = "Button" bouton </a> href = "#" role = "Button"> Button </a> </p> </div> </div> </div> <div> <div style = "Text-Align: Center"> Copyright Information </div> </div> </div> </ body> </html>(1) <A-tête> partie
<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 qui doivent être utilisés -> <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"> <! - Src = "js / bootstrap.js"> <! - Src = "js / bootstrap. Le seul style CSS dont nous avons besoin pour nous définir pour résoudre le bug dans le système Win7 que la police noire de Microsoft ne peut pas être affichée normalement, mais la police de la chanson est affichée -> <style type = "Text / CSS"> H1, H2, H3, H4, H5 {Font-Family: "Microsoft Yahei Ui", "Microsoft Yahei", "Helvetica" Helvetica, Arial, "Hiragino Sans gb", "Hiragino sans gb w3", "Wenquanyi Micro Hei", sans-serif; } </ style> </-head>(2) barre de navigation
Étant donné que la barre de navigation fournie par Bootstrap n'est pas applicable, nous avons dû utiliser le groupe de bouton fourni par Bootstrap pour écrire la barre de navigation nous-mêmes
<! - Tout d'abord, la barre de navigation doit être accrochée à la tête de la page Web -> <div style = "position: résumé; en haut: 0; gauche: 0; largeur: 100%;"> <! - Définissez un groupe de bouton -> <v> <div> <! - Écrivant un hyperlien pour un seul bouton dans la barre de navigation, c'est-à-dire un bouton sans drop-down, il faut être remarqué. Il s'agit d'utiliser la balise A, puis d'ajouter le style de classe, plutôt que la balise de bouton fournie par le site officiel -> <a href = "#"> gauche </a> </div> <div> <a href = "#"> Middle </a> </v> <v> <a href = "#"> Right </a> </v> <! - Le menu Drop-Down est écrit en tant que suivi: -> </v> Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <ul Role = "Menu"> <li> <a href = "#"> Lien de dépôt </a> </li> <li> <a href = "#"> lien de dropdown </a> </li> </ul> </v> </v> </div> </a> </li> </ul> </v> </v> </v>
Changez le BTN-Success dans l'attribut de classe à BTN-Primaire, BTN-Danger, etc. peut modifier la couleur de ce bouton!
(3) la partie d'écran géante
L'écran géant est écrit comme suit. La clé est d'introduire l'arrière-plan que nous venons de tirer dans Photoshop.
La raison pour laquelle je dois ajouter autant ici <br> Entrée est parce que je veux augmenter la taille de cet écran géant
<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) Section de colonne
Ici, l'organisation de grille de bootstrap est utilisée pour taper les trois colonnes
Pour plus de détails, vous pouvez vous référer à l'article "bootstrap" qui s'adapte automatiquement au système de grille Bootstrap PC, tablette et téléphone mobile. Divisez les 12 grilles de toute la page Web en 3 pièces, et chaque grille 4 est juste. Chaque colonne est un panneau sans tête de panneau, avec un grand titre H3 à l'intérieur, puis un texte de paragraphe de P, et deux boutons.
Il convient de noter que ces choses doivent être placées dans un conteneur, sinon ces trois choses rempliront toute la page:
<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> <polaire ... </p> <p> <a href = "#" "role =" Button "> Button </a> <a href =" # "role =" Button "> Button </a> </p> </ div> </div> </div> <v> <div> <div> <div> <h3> Column2 </h3> <p> ... </p> <p> <p> <p> <h3> Role = "Button"> Button </a> <a href = "#" role = "Button"> Button </a> </p> </div> </div> </div> </div> </div> </div> </div>
(5) pièce d'informations sur le droit d'auteur
Il n'y a rien à dire, juste un panneau
<div> <div style = "Text-Align: Center"> Copyright Information </div> </div>
3. Page intérieure
Si vous savez comment faire la page d'accueil, l'idée de la page intérieure sera exactement la même. Je ne le répéterai plus. De même, le code est le suivant:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éread> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <itle> intr tiled document </tape> <meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0, utilisateur-échec = no"> <link href = "css / bootstrap.css" rel = "Stylesheet" media = "screen"> <script type = "text / javascrip src = "js / bootstrap.js"> </ script> <style type = "text / css"> h1, h2, h3, h4, h5 {font-family: "Microsoft yahei ui", "Microsoft Yahei", "Helvetica neue" "Wenquanyi Micro Hei", Sans-Serif; } </ style> </ head> <body> <div style = "position: absolu; top: 0; gauche: 0; largeur: 100%;"> <div> <a href = "#"> gauche </a> </v> <v> <a href = "#"> Middle </a> </v> <v> <a href = "#"> droit </a> Data-Toggle = "Dropdown"> Dropdown <span> </span> </ Button> <ul Role = "Menu"> <li> <a href = "#"> lien de dropdown </a> </li> <li> <a href = "#"> lien de dropdown </a> </li> </ul> </v> </v> </v> </v> <div style = "bandle-image: URL (images / bg.jpg);Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.