C'est une question vraiment difficile à formuler forte>, j'ai donc inclus une capture d'écran d'une conception de site Web que j'ai faite en pages (Mac) - je l'ai fait en utilisant différents blocs de couleur et en les empilant Les uns sur les autres pour créer l'effet souhaité qui peut être vu dans la première capture d'écran. Ma question est la suivante: J'ai essayé de colorer mon rembourrage différemment avec une balise HTML dans CSS (HTML P> { padding: 10%; background-color: #ebecef; }
4 Réponses :
à un niveau très basique, vous pouvez atteindre cet objectif en utilisant des divs imbriqués, définir la largeur et la hauteur en combinaison avec la position CSS Position CODE> Propriété et TOP code>, gauche Propriétés CSS. Comme ci-dessous: <div style="width: 100vw;height: 100vh;background-color: blue;position: relative;">
<div style="height: inherit; width: inherit;">
<div style="width: 100%; height: 80px;margin-right: 20%">
<div style="width: 340px; height: 80px; background-color: green; float: right;margin-right: 10%">
</div>
</div>
<div style="width: 80%;height: 80%;background-color: yellow;margin: auto auto;">
<h1 style="position: absolute; top: 40px;left:120px">Lorem Ipsum</h1>
</div>
</div>
Difficile de suivre cette logique -> donne beaucoup de mal de tête à caprirer. De plus, cela créera de mauvaises habitudes et une modification du style est donc plus difficile que nécessaire plus tard. Certainement d'accord sur la solution de grille ou de flexbox.
D'accord, ce qui précède est d'indication sur la manière de réaliser ce qui est demandé; Je n'ai pas fourni de solution de copie et de coller dans le but de permettre qu'une pensée soit appliquée à la question. La grille ou Flexbox fournira une solution complète
J'ai essayé de redessiner votre photo. Ce n'est pas la même chose, mais vous pouvez utiliser mes styles pour votre objectif. J'ai utilisé Nav comme un p> div code>, mais il y a beaucoup de meilleurs exemples de navigation sur Internet comme BOOTSTRAP NAV . Ceci n'est pas réactif, alors vous devez ajouter @media code> CSS là-bas et peut-être utiliser Collapse NAVBar.
<html>
<body>
<div class="Center80 Nav" align="right">
<div class="Menu">
Menu
</div>
</div>
<div class="SecondColor Center80">
<h1>LOREM IPSUM</h1>
</div>
</body>
Malgré le fait que c'est encore des kilomètres du résultat recherché. Cela lui apportera également sur la mauvaise voie par des méthodes tricotées. Je veux juste mentionner div.firstcolor qui est une boîte inutile. Il serait plus facile et bien plus efficace de définir simplement le corps {fond: bleu; }. ASWELL que VW est utilisé ici de manière inefficace. Travail plus facile de définir simplement un rembourrage corporel puis utilisez une largeur de 100% pour toutes les divs parents et la largeur automatique des ENFANT DIV.
Merci pour vos suggestions, oui, FirstColor était une boîte inutile, j'ai changé ma réponse et utilisez plutôt une couleur BG BG. Mais je pense que le rembourrage sur le corps n'est pas une meilleure solution, MMM peut-être que c'est parce que VW nécessite de le déclarer dans n'importe quel conteneur? Parce que si c'est une classe, ce n'est pas le scénario, nous pouvons réutiliser cette classe pour tout le conteneur qui a besoin de cette largeur. Et peut-être utiliser une autre largeur de la page de la page du système, si nous déclarons sur le corps, nous devons le remplacer si nous avons besoin de plus ou moins d'espace.
La chose avec un rembourrage du corps est que cela fonctionne à l'échelle mondiale pour tout. Si vous souhaitez écraser le rembourrage, il vous suffit d'utiliser la marge avec une valeur négative. Néergemment pas une grosse efforge et plus facile à gérer. S'il veut ajuster le rembourrage / la marge gauche et droit, il n'a besoin que de le faire avec le corps-rembourrage au lieu d'éditer la marge de chaque élément d'enfant. Vous devez également penser que certains se déroulent pour éditer le style plus tard et si vous ne le faites pas de bonne façon, vous avez un gâchis alors.
Mmm oui, je suppose que c'est pour les choses à l'échelle mondiale, je préfère utiliser la classe pour cela, je préfère vraiment ne pas utiliser de négatif de marge-gauche si je peux utiliser des classes de conteneurs pour cela, la chose avec moi est que je n'aime pas utiliser CSS sur des éléments directement, car plus tard, nous devons le remplacer pour de nouvelles exigences ... Nous continuerons à vous battre pour nos propres pratiques, si vous avez remarqué haha
Surtout avec un design responsif à l'esprit, je le ferais avec une grille. Vous avez juste besoin de 3 boîtes et pouvez obtenir le titre à entrer en collision avec un décalage ou corriger le rembourrage. Assurez-vous simplement de définir l'index z pour le pousser sur le devant.
p>
<body>
<div id="title">Title</div>
<div id="menu">Menu Link</div>
<div id="content">
<p>Random text content...</p>
</div>
</body>C'est une nouvelle chose pour moi l'utilisation de la grille sur CSS. Merci, maintenant j'ai un bon week-end d'études.
Vous pouvez également utiliser la syntaxe à gradient linéaire si vous souhaitez que les deux couleurs se mélangent morce en fonction de si vous voulez une ligne dure ou douce entre les couleurs. En savoir plus à ce sujet ici: https://www.w3schools.com/css/css3_gradients.asp
Exemple de syntaxe ci-dessous:
#grad {couleur de fond: gradient linéaire (-90deg, rouge, jaune); }