Introduction au contenu lié à la structure et aux performances
Structure HTML Performances CSS Comportement javascript La mise en page des pages Web doit prendre en compte le principe de séparation de la structure, des performances et du comportement. Concentrez-vous d'abord sur la structure et la sémantique, puis considérez CSS, JS, etc. pour faciliter la maintenance et l'analyse ultérieures.
L'idée de séparation de la structure et de l'expression
Idées et méthodes de production des développeurs juniors : les divs sont imbriqués couche par couche ; Idées et méthodes de production des développeurs intermédiaires : supprimez les divs redondants et simplifiez-les ; Idées et méthodes de production des développeurs avancés : simplifiez au maximum la structure du HTML, puis Utilisez CSS pour le configurer afin de réduire l’adéquation entre HTML et CSS. débordement:
valeur par défaut visible. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.
le contenu masqué est coupé et le contenu restant est invisible.
scroll Le contenu sera coupé, mais le navigateur affichera des barres de défilement pour afficher le contenu restant.
auto Si le contenu est coupé, le navigateur affiche des barres de défilement pour afficher le contenu restant.
Hériter spécifie que la valeur de l'attribut overflow doit être héritée de l'élément parent.
text-indentLe texte est mis en retrait par rapport à la position cible et il n'est pas nécessaire d'ajouter des étiquettes supplémentaires au texte. Réduisez le code redondant
Lorsque vous obtenez un dessin de conception Web, faites d'abord attention au contenu textuel de la page Web et à la relation entre les modules de contenu.
Concentrez-vous sur l'écriture de code HTML sémantique au lieu de trop penser au style du dessin de conception.
Attendez que le code HTML soit écrit en fonction du contenu, puis envisagez l'implémentation du style.
Complétez les effets visuels requis par le dessin de conception sans modifier la structure existante.
La marge peut être une valeur négative, et grâce à des valeurs négatives, le contenu peut être déplacé ! Réalisez un mouvement dans quatre directions.
Dans la structure (HTML) et le style (css), vous pouvez d'abord écrire le contenu en HTML, puis utiliser la marge pour déplacer la position afin de réaliser la composition, réduire le couplage entre le style et la structure et réduire le code.
Skinning et résumé de page Web
Minimiser la dépendance du HTML à l'égard du CSS
Skinning de page Web : même structure HTML, styles CSS différents
Vous trouverez ci-dessous quelques partages d'étudiants de Grey Niu WEB
Lorsque nous sommes entrés en contact avec la production de pages Web, nous avons appris que HTML représente la structure, CSS représente le style et Javascript représente le comportement. Dans la production de pages Web, nous avons toujours mis l'accent sur le principe de séparation de la structure et des performances. en HTML De plus, la séparation est Parlez-vous de les écrire dans différents fichiers et de les référencer ? Bien sûr que non. Grâce à l'étude ici, j'ai appris que la séparation n'est pas seulement une méthode mais aussi une idée. En bref, c'est une coordonnée bidimensionnelle, où l'axe des x représente le développement technologique et l'axe des y représente la page Web. besoins de production. La séparation est complétée en fonction du développement technologique et de nos besoins de production de pages Web !
Par exemple : Par exemple, si nous construisons une maison, HTML équivaut à la structure de la maison et CSS équivaut à la décoration ultérieure. Les pages Web sont toutes basées sur un seul effet. Lorsque nous parcourons la page Web, les styles. sera différent selon le rendu, donc nous avons toutes sortes de pages à parcourir, alors comment mettre en page les pages Web ? Tout d'abord, ne pensez pas trop aux styles CSS, essayez de rendre notre structure HTML raisonnable, concise et sémantique, puis ajoutez et améliorez les styles CSS !
Lorsque nous avons reçu la page, différents producteurs avaient des liens différents avec la structure et le style. En fonction de la profondeur différente de la compréhension de la structure et du style, elle a été provisoirement divisée en trois niveaux différents : primaire, intermédiaire et avancé ;
Par exemple, une boîte de dialogue aussi courante comporte trois unités. Tout d'abord, nous devons compléter une unité et exécuter CTRL+V sur l'autre. Si un producteur junior obtient la page, il la divise généralement selon les cases ci-dessus. div contient 2 petits div, flottants à gauche et à droite, img à gauche, p, h et d'autres balises à droite Quant au facteur temps, il est implémenté via le positionnement de l'attribut position.
<div class="demo1">
<div classe="fl">
<img src="../../images/head02.jpg" alt="">
</div>
<div class="fr">
<span>Il y a 10 minutes</span>
<h6>À mesure que nous voyageons de plus en plus loin, il n'y a plus de livres</h6>
<p>
Avez-vous de nombreuses pensées persistantes dans votre esprit chaque jour et sentez-vous très occupé ? Si vous y réfléchissez bien, vous ne savez pas ce qui vous occupe vraiment. Seulement en développant de bonnes habitudes, en prenant bien soin de vous, et en suivant vos rêves, pouvez-vous augmenter votre productivité, ce qui signifie également améliorer vos relations avec votre famille et vos amis, car lorsque vous changez, tout autour de vous change. Quelles habitudes des personnes très efficaces valent la peine d'être apprises ?
</p>
</div>
</div>
<div class="demo2">
<img src="../../images/head02.jpg" alt="">
<div class="fr">
<span>Il y a 10 minutes</span>
<h6>À mesure que nous voyageons de plus en plus loin, il n'y a plus de livres</h6>
<p>
Avez-vous de nombreuses pensées persistantes dans votre esprit chaque jour et sentez-vous très occupé ? Si vous y réfléchissez bien, vous ne savez pas ce qui vous occupe vraiment. Seulement en développant de bonnes habitudes, en prenant bien soin de vous, et en suivant vos rêves, pouvez-vous augmenter votre productivité, ce qui signifie également améliorer vos relations avec votre famille et vos amis, car lorsque vous changez, tout autour de vous change. Quelles habitudes des personnes très efficaces valent la peine d'être apprises ?
</p>
</div>
</div>
<div class="demo3">
<img src="../../images/head02.jpg" alt="">
<span class="time">il y a 10 minutes</span>
<h6>À mesure que nous voyageons de plus en plus loin, il n'y a plus de livres</h6>
<p>
Avez-vous de nombreuses pensées persistantes dans votre esprit chaque jour et sentez-vous très occupé ? Si vous y réfléchissez bien, vous ne savez pas ce qui vous occupe vraiment. Seulement en développant de bonnes habitudes, en prenant bien soin de vous, et en suivant vos rêves, pouvez-vous augmenter votre productivité, ce qui signifie également améliorer vos relations avec votre famille et vos amis, car lorsque vous changez, tout autour de vous change. Quelles habitudes des personnes très efficaces valent la peine d'être apprises ?
</p>
</div>
</div>=>3 démos différentes représentent 3 structures de page différentes || Affichage de la partie publique de la structure de la page d'écriture :
/*réinitialiser*/
corps,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{marge : 0 ; padding : 0 ; style de liste : aucun ; police : 12px/1.5 "Arial", "sans-serif", "Microsoft Yahei", "宋体", "Tahoma"}
/*Style public*/
.démo1,.démo2{
largeur : 600 px ;
marge supérieure : 20 px ;
débordement : caché ;
marge inférieure : 20 px ;
}
p{
text-align : justifier ;
retrait du texte : 2em ;
hauteur de ligne : 24 px ;
}=> Producteur Junior CSS
/*primaire*/
.démo1{
largeur : 600 px ;
marge supérieure : 20 px ;
débordement : caché ;
}
.démo1 .fl{
largeur : 100 px ;
flotteur : gauche ;
}
.demo1 .fl img{
marge gauche : 20 px ;
remplissage : 10 px ;
bordure : 1px solide #ccc ;
}
.demo1 .fr{
largeur : 488 px ;
flotter : à droite ;
bordure : 1px solide #ccc ;
position : relative ;
remplissage : 5 px ;
}
.demo1 .fr span{
position : absolue ;
à droite : 18 px ;
haut : 5px ;
}=>Développeur intermédiaire css a une structure simplifiée par rapport au niveau élémentaire, supprimant le div à gauche et conservant la partie à droite ;
/*intermédiaire*/
.demo2 .fr{
largeur : 488 px ;
flotter : à droite ;
bordure : 1px solide #ccc ;
position : relative ;
remplissage : 5 px ;
}
.demo2 .fr span{
position : absolue ;
à droite : 18 px ;
haut : 5px ;
}
.demo2 img{
marge gauche : 20 px ;
remplissage : 10 px ;
bordure : 1px solide #ccc ;
}=> Producteur avancé CSS : écrivez d'abord le code en fonction de la structure et de la sémantique, puis définissez le style CSS, ce qui réduit l'ajustement entre CSS et HTML (mouvement du document, mouvement de sortie de l'image, attributs de positionnement)
/*avancé*/
.démo3{
bordure : 1px solide #ccc ;
largeur : 488 px ;
marge gauche : 100 px ;
remplissage : 5 px ;
position : relative ;
}
.demo3 img{
flotteur : gauche ;
marge : -6px 0 0 -86px ;
remplissage : 10 px ;
bordure : 1px solide #CCCCCC ;
}
.demo3 durée{
position : absolue ;
haut : 10px ;
à droite : 20 px ;
}Conclusion : lorsque vous obtenez un dessin de conception Web, vous devez d'abord observer la relation entre le texte et les modules de contenu, vous concentrer sur l'écriture de code HTML sémantique et ne pas trop penser au style de mise en page de la salle de conception, attendre que le code HTML soit terminé. édité Une fois terminé, réfléchissez à la manière de le mettre en œuvre et efforcez-vous de compléter les effets visuels requis par l'illustration de conception sans modifier la structure de la page existante (cliquez pour télécharger la structure complète et le code du principe de performance d'une mise en page simple de page Web) !
Ce qui précède est le contenu détaillé du partage de la structure et des principes de performance d'une mise en page Web simple. Pour plus d'informations sur la structure et les principes de performance d'une mise en page Web simple, veuillez prêter attention aux autres articles connexes sur downcodes.com !