Maîtrisez la mise en page CSS pure des pages Web en un seul article

Le contenu que cet article vous apporte concerne les pages Web de mise en page CSS pure. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La première possibilité est que vous n'avez pas compris le principe de traitement CSS des pages. Avant de considérer les performances globales de votre page, vous devez d'abord considérer la sémantique et la structure du contenu, puis ajouter du CSS pour la sémantique et la structure. Cet article vous expliquera comment structurer le HTML.

Une autre raison est que vous ne connaissez pas les attributs très familiers de la couche de présentation (tels que cellpadding, hspace, align="left", etc.) et que vous ne savez pas en quelles instructions CSS les convertir. . Une fois que vous aurez résolu le premier problème et que vous saurez comment structurer votre HTML, je vous donnerai une liste détaillant les CSS à utiliser pour remplacer les attributs de présentation d'origine.

HTML structuré

Lorsque nous apprenons pour la première fois à créer des pages Web, nous réfléchissons toujours d'abord à la manière de concevoir, en considérant les images, les polices, les couleurs et les schémas de mise en page. Ensuite, nous utilisons Photoshop ou Fireworks pour le dessiner et le découper en petites images. Enfin, modifiez le HTML pour restaurer toutes les conceptions de la page.

Si vous souhaitez que votre page HTML soit mise en page avec CSS (elle est compatible avec CSS), vous devez revenir en arrière et recommencer. Ne pensez pas d'abord à « l'apparence », mais pensez d'abord à la sémantique. et la structure du contenu de votre page.

L'apparence n'est pas la chose la plus importante. Une page HTML bien structurée peut être présentée sous n'importe quelle apparence, et CSS Zen Garden en est un exemple classique. CSS Zen Garden nous aide enfin à réaliser la puissance du CSS.

Le HTML ne se limite pas à être lu sur un écran d'ordinateur. Vos images soigneusement conçues dans Photoshop peuvent ne pas être affichées sur les PDA, les téléphones mobiles et les lecteurs d'écran. Mais une page HTML bien structurée peut être affichée n'importe où et sur n'importe quel périphérique réseau grâce à différentes définitions de CSS.

Tout d'abord, apprenez ce qu'est la « structure », que certains auteurs appellent aussi « sémantique ». Ce terme signifie que vous devez analyser vos blocs de contenu et l'objectif de chaque élément de contenu, puis créer la structure HTML correspondante en fonction de ces objectifs de contenu.

Si vous vous asseyez et analysez et planifiez soigneusement la structure de votre page, vous pourriez vous retrouver avec quelques éléments comme celui-ci :

Logo et nom du site

Principal contenu de la page

Navigation du site (menu principal)

Sous-menu

Champ de recherche

Ruban (par exemple panier, paiement)

Pied de page (copyright et mentions légales associées)

Nous utilisons généralement des éléments DIV pour définir ces structures, de la même manière :

＜div id="header"＞＜/div＞
＜div id="content"＞＜/div＞
＜div id="globalnav"＞＜/div＞
＜div id="subnav"＞＜/div＞
＜div id="search"＞＜/div＞
＜div id="shop"＞＜/div＞
＜div id="footer"＞＜/div＞

Ceci n'est pas une mise en page, mais une structure. Il s'agit d'une description sémantique des blocs de contenu. Lorsque vous comprenez votre structure, vous pouvez ajouter l'ID correspondant au DIV. Tout bloc de contenu peut être contenu dans un conteneur DIV et un autre DIV peut y être imbriqué. Les blocs de contenu peuvent contenir n'importe quel élément HTML : titres, paragraphes, images, tableaux, listes, etc.

D'après ce qui précède, vous savez déjà comment structurer le HTML et vous pouvez désormais définir la mise en page et le style. Chaque bloc de contenu peut être placé n'importe où sur la page et la couleur, la police, la bordure, l'arrière-plan, les propriétés d'alignement, etc. du bloc peuvent être spécifiées.

Ce qui précède est l'introduction complète aux pages Web de mise en page CSS pure. Si vous souhaitez en savoir plus sur le Tutoriel CSS, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!