Il est recommandé de bien comprendre le mode boîte CSS (introduction rapide à la mise en page DIV)

Avant-propos
Si vous souhaitez essayer de mettre en page votre page Web sans utiliser de tableaux, mais utilisez CSS pour mettre en page votre page Web, ce qui est souvent entendu parler de l'utilisation de p pour mettre en page la structure de votre page Web, ou si vous souhaitez apprendre les normes de conception des pages Web, ou votre patron veut que vous changiez la méthode traditionnelle de mise en page des tableaux pour améliorer la compétitivité de l'entreprise, alors un point de connaissance auquel vous devez être exposé est le mode boîte CSS. C'est le cœur de la mise en page p, la mise en page traditionnelle utilise des tableaux de. différentes tailles et imbrication de tableaux pour positionner et mettre en page le contenu de la page Web. Après le passage à la mise en page CSS, les pages Web sont organisées selon des boîtes et des imbrications de boîtes de différentes tailles définies par CSS. Parce que le code des pages Web saisies de cette manière est simple, facile à mettre à jour et peut être compatible avec davantage de navigateurs, tels que les PDA, il peut également être parcouru normalement, il vaut donc la peine d'abandonner la composition de tableaux que j'adorais avant. Plus important encore, la composition CSS des pages Web Les avantages sont bien plus que ceux-ci. Je n'entrerai pas dans les détails ici. Vous pouvez trouver des informations pertinentes par vous-même.
Comprendre le modèle de boîte CSS
Qu'est-ce que le modèle de boîte CSS ? Pourquoi s'appelle-t-on une boîte ? Parlons d’abord des noms d’attributs que nous entendons souvent dans la conception Web : le mode boîte CSS contenu, padding, border et margin possède tous ces attributs.

Nous pouvons comprendre ces attributs en les transférant aux boîtes (boîtes) de notre vie quotidienne. Les boîtes que nous voyons dans notre vie quotidienne ont également ces attributs, c'est pourquoi on l'appelle le modèle de boîte. Ensuite, le contenu est ce qu'il y a dans la boîte ; le remplissage est la mousse ou d'autres matériaux auxiliaires antisismiques ajoutés pour éviter que le contenu (de valeur) ne soit endommagé ; la bordure est la boîte elle-même ; La boîte ne peut pas être placée lorsqu'elle est placée. Empilez-les tous ensemble, en laissant un certain espace pour la ventilation et pour un retrait facile. Dans la conception Web, le contenu fait souvent référence à du texte, des images et d'autres éléments, mais il peut également s'agir de petites boîtes (p-imbriquées). Différentes des boîtes dans la vie réelle, les choses dans la vie réelle ne peuvent généralement pas être plus grandes que la boîte, sinon la boîte. sera étiré Cassé et la boîte CSS est élastique. Les éléments à l'intérieur sont plus grands que la boîte elle-même et l'étireront au maximum, mais elle ne sera pas endommagée. Le remplissage n'a que l'attribut de largeur, qui peut être compris comme l'épaisseur des matériaux auxiliaires antisismiques dans les boîtes dans la vie, tandis que la bordure a la taille et la couleur, qui peuvent être comprises comme l'épaisseur des boîtes que nous voyons dans la vie. et de quelle couleur est faite la boîte. La limite est la distance entre la boîte et les autres choses. Dans la vraie vie, supposons que nous soyons dans un carré et que nous plaçons des boîtes de différentes tailles et couleurs à certains intervalles et dans un certain ordre. Enfin, lorsque nous regardons du haut du carré, nous verrons des graphiques et des structures similaires à ce que nous voulons faire. . La mise en page de la page Web est conçue comme indiqué ci-dessous.

Mise en page Web composée de « boîtes »

Dans quelle mesure comprenez-vous le modèle de boîte CSS maintenant ? S'il n'est pas assez approfondi, continuez à lire, je donnerai des exemples plus tard et utiliserai le concept de boîtes pour l'expliquer.
Changer notre façon de penser
La conception Web frontale traditionnelle est réalisée comme ceci : selon les exigences, considérez d'abord la couleur principale, le type d'images à utiliser, les polices, les couleurs , etc. Utilisez ensuite des logiciels comme Photoshop pour le dessiner librement, et enfin le découper en petites images, et ne plus concevoir librement du HTML pour générer des pages. Après être passé au CSS pour la mise en page, nous devons changer cette idée à ce moment-là. La principale considération est le contenu de la page. La sémantique et la structure, grâce à une page Web avec un contrôle CSS fort, une fois la page Web terminée, vous pouvez facilement ajuster le style de page Web souhaité. De plus, un autre objectif de la mise en page CSS est de. rendez le code facile à lire, supprimez les blocs et renforcez la réutilisation, la structure est donc importante. Si vous voulez dire que la conception de ma page Web est très compliquée, sera-t-il possible d'obtenir cet effet plus tard ? Ce que je veux vous dire, c'est que si l'effet ne peut pas être obtenu avec CSS, il est généralement difficile de l'obtenir avec des tableaux, car la capacité de contrôle de CSS est si puissante. D'ailleurs, l'utilisation de CSS présente un avantage très pratique. pour la composition, si vous prenez des commandes pour créer un site Web, si vous utilisez CSS pour mettre en page la page Web, si le client n'est pas satisfait plus tard, notamment la tonalité de couleur, il sera assez facile de la modifier, et vous pourrez même la personnaliser. Plusieurs styles de fichiers CSS que les clients peuvent choisir, ou écrire un programme pour implémenter des appels dynamiques, afin que le site Web ait pour fonction de changer dynamiquement le style.
Réaliser la séparation de la structure et de la présentation
Avant de commencer réellement la pratique de la mise en page, comprenons encore une chose : la séparation de la structure et de la présentation. Cela utilise également les caractéristiques de la mise en page CSS. , le code sera concis. Il est pratique de mettre à jour. N'est-ce pas le but de l'apprentissage du CSS ? Par exemple, P est une balise structurée. Là où il y a une balise P, cela signifie qu'il s'agit d'un bloc de paragraphe. La marge est un attribut de performance. Je souhaite créer un paragraphe indenté à droite de 2 caractères. espaces puis continuer Sans ajouter d'espaces, vous pouvez maintenant spécifier un style CSS pour la balise P : P {text-indent: 2em;}, de sorte que le contenu du corps résultant soit le suivant, sans aucune balise de contrôle de performances supplémentaire :
Si vous souhaitez quand même modifier ceci. Pour modifier le paragraphe avec la police, la taille de la police, l'arrière-plan, l'interligne, etc., ajoutez simplement le CSS correspondant directement dans le style P. Il n'est pas nécessaire de l'écrire comme ceci :
<.>

Contenu du paragraphe

Ceci est un mélange de structure et expression. Si de nombreux paragraphes ont une structure unifiée et en termes de performances, il serait fastidieux d'écrire le code de cette manière.

Listons directement un morceau de code pour approfondir notre compréhension de la séparation entre structure et performance :
Utilisez CSS pour la composition

< ;p id="photoList">

;/p>

Pas de mise en page CSS

Die erste Methode besteht darin, die Struktur und die Darstellung zu trennen. Wenn mehr Bildlisten vorhanden sind, bietet die erste CSS-Layoutmethode weitere Vorteile Sie verstehen: In BODY möchte ich Ihnen nur sagen, dass er ein Mensch ist, wie groß er ist und ob er ein Mann ist Frau, Sie können es herausfinden, indem Sie es in CSS überprüfen. Auf diese Weise wird meine Arbeit in BODY einfach sein, was bedeutet, dass der Code von BODY einfach sein wird. Wenn BODY ein Teammitglied hat, kann ich ein Element einfach in CSS aufzeichnen. Dies ähnelt dem Konzept von Komponenten und Instanzen in der Flash-Software, sodass die Animationsdatei nicht groß ist besteht darin, die Idee auf CSS-Webdesign umzustellen, das heißt, der Code ist nicht kompliziert und die Webseitendatei ist klein und kann vom Client schneller heruntergeladen werden.

Verwenden Sie das CSS-Layout, um die Größe von Webseitendateien zu reduzieren

Wie das Layout, das ich oben erstellt habe, ist es in vier Blöcke unterteilt, und der Rahmen jedes Blocks ist das Gleiche Ja, dieses Framework ist in CSS geschrieben. Sobald der Stil geschrieben ist, kann er unzählige Male aufgerufen werden (aufgerufen mit der Klasse, nicht mit der ID). Solange der Textinhalt geändert wird, können viele Abschnitte mit einheitlichen Stilen generiert werden. Seine Stil- und Strukturcodes sind (bitte kopieren und generieren Sie die Webseite nicht direkt, sondern fügen Sie die folgenden Codes dort ein, wo sie sein sollten):

结构代码是这样的：

首页

文章

相册

Blog

论坛

帮助