Maison > interface Web > tutoriel CSS > Tutoriel sur la mise en page Web : Introduction aux propriétés de mise en page Web CSS

Tutoriel sur la mise en page Web : Introduction aux propriétés de mise en page Web CSS

高洛峰
Libérer: 2017-03-10 11:29:22
original
1490 Les gens l'ont consulté

Comme il s'agit d'un exemple de didacticiel de mise en page, je n'ai pas passé plus de temps sur les détails de la mise en page. Cependant, je pense que la mise en page du modèle est bonne. Ceux qui connaissent CSS peuvent le télécharger et en faire des illustrations plus détaillées. sera une très bonne page Web. Préliminaire Ceux qui apprennent peuvent la télécharger pour modifier et modifier les paramètres d'attribut afin de saisir plus clairement les caractéristiques des attributs, afin d'atteindre l'objectif d'une maîtrise plus approfondie du CSS. Le CSS est-il vraiment difficile à apprendre ? Parce qu'il s'agit d'un exemple de didacticiel de mise en page, je n'ai pas passé plus de temps sur les détails de la mise en page. Cependant, je pense que la mise en page du modèle est bonne. Ceux qui connaissent CSS peuvent le télécharger et créer des illustrations plus détaillées. très bonne page Web pour l'apprentissage préliminaire. Téléchargez pour modifier et modifier les paramètres d'attribut afin de saisir plus clairement les caractéristiques des attributs, afin d'atteindre l'objectif d'une maîtrise plus approfondie du CSS.


Le CSS est-il vraiment difficile à apprendre ? En fait, ce n'est pas difficile. C'est juste que je manque d'expérience pour le maîtriser. Y a-t-il un gain si j'étudie dur avec un livre ? peut ne pas être très efficace. En tant que personne qui l'a vécu, je pense qu'il est très difficile d'apprendre passivement quelque chose dont vous voulez vous souvenir, c'est que vous pouvez d'abord en maîtriser l'essence (en commençant par les attributs importants). Après avoir maîtrisé l'essence, ces attributs seront naturellement loin d'être suffisants pour répondre à vos besoins et vous inciteront à rechercher le désir de connaissances, à étendre automatiquement d'autres attributs connexes pour maîtriser et approfondir naturellement la compréhension du CSS. C'est une méthode je pense (malheureusement, si quelqu'un m'avait dit ça quand j'apprenais, j'aurais fait beaucoup moins de détours). C'est ma première expérience d'écriture à partager avec vous. Il peut y avoir certaines lacunes dans l'organisation linguistique, j'aimerais donc demander aux internautes de l'inclure, mais je crois qu'avec plus d'expérience à l'avenir, j'écrirai mieux. Voici quelques-unes de mes expériences et quelques explications conceptuelles que je considère nécessaires. Si vous avez une expérience à partager, n'hésitez pas à laisser un commentaire pour en discuter ensemble.

Dans la technologie Web actuelle, CSS p est devenu un standard de site Web grand public, on peut l'appeler (standard Web). CSS est l'abréviation de Cascading Style Sheets en anglais. C'est un langage informatique utilisé pour exprimer des formats de fichiers tels que HTML ou XML.

Avant de comprendre et d'apprendre le CSS, nous devons d'abord comprendre les avantages et les commodités de ce langage informatique pour nous. Comprendre cela, je pense personnellement, est très basique mais également nécessaire. Script House combine l'expérience de la technologie et des concepteurs de sites Web et, du point de vue des applications réseau, résume les avantages et les problèmes de la conception de sites Web CSS comme suit :

Tout d'abord, le grand avantage du CSS réside dans le code concis. Pour un grand site Web, cela peut économiser beaucoup de bande passante (la véritable signification est que cela augmente la proportion de mots-clés efficaces dans le code total de la page Web. Les sites Web créés à l'aide des normes Web sont conviviaux pour les moteurs de recherche et disposent de certains éléments). avantages ; du point de vue de l'art du programme et de la page Web, les deux peuvent être indépendants l'un de l'autre puis combinés pour réduire la charge de travail et éviter un développement lourd.

Deuxièmement, le site Web produit par CSS p rend la révision du site Web relativement simple. De nombreux problèmes nécessitent simplement de changer le CSS sans changer le programme, réduisant ainsi le coût de la révision du site Web et économisant beaucoup de temps. J'ai travaillé avec des collègues de la salle de développement sur des cas de projets similaires et je pense que mes collègues seront plus ou moins conscients de la commodité pratique de cela.

Le dernier point est que lorsque je suis entré en contact avec elle pour la première fois, j'ai senti qu'elle était très difficile à contrôler. Au lieu de cela, j'ai senti que la table avait un meilleur contrôle sur la position et que je pourrais être réticente à l'utiliser. p pour écrire des mises en page de pages Web. En fait, il s'agit d'un processus d'adaptation. Nous pouvons comprendre soigneusement les points clés grâce à de nombreuses opérations et exercices pratiques. Après cela, vous pouvez sentir qu'elle est en effet en constante évolution. Différentes mises en page d'une page peuvent avoir différentes manières d'écrire la mise en page, mais quelle que soit la façon dont vous l'écrivez, le code suit un principe : c'est-à-dire : le nom défini est le même. la nature la plus universelle possible, c'est-à-dire utiliser le moins de code pour définir plus de moules de boîtes, je l'appelle (une personne avec des usages multiples) ; la dénomination doit être standardisée et combinatoire pour permettre aux autres concepteurs de la comprendre et de l'utiliser. L'autre question concerne l'utilisation de l'ID ou de la classe. Beaucoup de gens peuvent être confus à ce sujet. En fait, c'est relatif, mais maintenant mon habitude d'écrire est principalement d'utiliser davantage les cours, je pense que c'est plus pratique et adapté à mes habitudes d'écriture.

Voici les attributs de base couramment utilisés qui, selon le site Web chinois PHP, doivent être compris et maîtrisés en premier :

Attributs importants du CSS qui doivent être compris et maîtrisés :

margin : auto | longueur par valeur de longueur composée d'un nombre à virgule flottante et d'un pourcentage d'identifiant d'unité. Le pourcentage est basé sur la hauteur de l'objet parent. Pour les objets en ligne, les marges extérieures gauche et droite peuvent avoir des valeurs négatives.

padding: length Une valeur de longueur composée d'un nombre à virgule flottante et d'un identifiant d'unité ou d'un pourcentage. Le pourcentage est basé sur la largeur de l'objet parent.

Float : none | left |right Il s'agit d'un float, un attribut qui doit être utilisé pour définir la mise en page. Lorsque vous l'utilisez, vous devez faire attention aux problèmes de positionnement et de compatibilité du navigateur qui surviennent dans de nombreux cas. pratique Apprenez-en davantage sur cette propriété pendant l'exploitation. Pour avoir cet attribut, vous devez comprendre les attributs de support suivants : "clear"

Clear : none |right two ; none autorise les objets flottants des deux côtés ; n'autorise pas les objets flottants ; autoriser les objets flottants à gauche Il existe un objet flottant à droite qui n'autorise pas les objets flottants à droite.

background:url(images/aardvark.gif) left top no-repeat | répéter-x | répéter-y Définir des images d'arrière-plan pour embellir la mise en page est également un attribut très couramment utilisé.

overflow: visible | auto | caché | scroll J'utilise habituellement cette fonction dans la mise en page pour prévenir et résoudre les problèmes de compatibilité du navigateur

border:1px solid #CCCCC Ceci est pour définir la taille de la bordure, ligne , propriétés de couleur.

list-style-image list-style-position list-stle-type Cet attribut de liste est généralement utilisé dans les listes ordonnées et les listes non ordonnées. Les listes sont souvent utilisées dans la définition des liens de texte d'index de titre de page Web. que les définitions CSS sont supérieures à la représentation sous forme de tableau.

Ce qui précède sont les attributs CSS qui, selon Script House, doivent être mémorisés et compris lors de l'apprentissage du CSS. Comprendre pleinement ses caractéristiques peut considérablement augmenter la liberté de mise en page de notre application. Il n'est donc pas difficile d'apprendre cela. Après avoir maîtrisé les styles ci-dessus, vous constaterez que lorsque vous ne les compreniez pas auparavant, vous vous sentiez incompétent lors de la création de la page. Après l'avoir maîtrisé, vous pourrez naturellement réaliser la mise en page et. la mise en page que vous souhaitez en fonction de votre propre pensée logique, et la résistance CSS sera beaucoup soulagée.

En parlant de cela, je veux poser une question très courante. Je ne pense pas que le standard WEB interdise à toutes les tables d'utiliser p. Même si j'ai eu cette mauvaise idée lorsque j'ai commencé, ma compréhension du « standard » est que les concepteurs de standards développent de bonnes habitudes d'écriture et parviennent à une unification générale. Dans certains cas, les tables sont toujours supérieures à p en termes de mise en œuvre fonctionnelle des pages Web, et une utilisation excessive de p sans restriction consomme l'analyse IE et augmente la charge sur le processeur. C'est également une question à laquelle nous devons prêter attention.

Tout en maîtrisant les attributs couramment utilisés ci-dessus, ce qui suit est un modèle de mise en page CSS à trois colonnes écrit par Design Ming sur le blog Internet. Il se concentre principalement sur la façon de maîtriser l'essence du CSS et d'apprendre le didacticiel de mise en page des pages Web. exemples de modèles. Les internautes peuvent télécharger ce modèle. Le modèle est soigneusement étudié en fonction du contenu de l'article, afin de comprendre et de maîtriser la technologie. Ce modèle a été compilé par notre site pour couvrir les propriétés CSS importantes répertoriées ci-dessus.

Parce qu'il s'agit d'un exemple de tutoriel de mise en page, je n'ai pas passé plus de temps sur les détails de la mise en page. Cependant, je pense que la mise en page du modèle est bonne. Ceux qui connaissent le CSS peuvent le télécharger et le rendre plus détaillé. art.Ce sera un très bon apprentissage.Pour un apprentissage préliminaire, vous pouvez télécharger la page Web pour modifier et modifier les paramètres des attributs afin de mieux saisir les caractéristiques des attributs, afin d'atteindre l'objectif d'une maîtrise plus approfondie du CSS.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal