De fond différente pour chaque page?
Je suis en train d'essayer de trouver la meilleure façon de donner à chaque page (à partir de ma barre de navigation) dans mon site un "différent" photo d'arrière-plan. Il semble qu'une fois de l'arrière plan est sélectionné qu'elle reste constante pour toutes les pages suivantes.
J'ai d'Accueil, a Propos et Contact moi les liens dans ma barre de navigation. Mon but est d'avoir une photo d'arrière-plan lorsque les visiteurs cliquent sur ma page d'Accueil, une autre photo d'arrière-plan lors d'un clic Sur la page, troisième photo d'arrière-plan lorsqu'ils cliquent sur ma page de Contact, etc.
Est-il un moyen facile de faire cela?
Voici mon code pour l'instant:
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Mon CSS ressemble à ceci:
body {background-image:url(greentea.jpg);}
- faire des feuilles de style en ligne pour toutes les pages
- Je serais prudent sur de trop nombreux horizons photo: il peut paraître jolie, mais ne fait rien pour rendre un site plus facile à utiliser
- Une des façons simples serait de nommer les fichiers d'arrière-plan même de votre page et à l'aide d'un simple script JavaScript pour le faire pour vous à chaque fois.
- Salut! Je ne suis qu'un débutant en HTML et CSS. J'ai entendu dire que c'est mieux de le faire en CSS séparément. Pourriez-vous être plus précis et peut-être me donner un exemple de comment le faire? Merci!
Vous devez vous connecter pour publier un commentaire.
Vous pouvez assigner classe de corps comme
pour la page d'accueil de
de page a propos de nous
Que vous pouvez utiliser css
Donner à chaque étiquette unique ID de la page. Dans notre application, nous utilisons le framework ruby on rails, c'est donc id="<%=contrôleur de vue%>" type d'architecture.
Si votre site est statique, tout coder en dur dans le code.
Puis dans le CSS
La façon dont je choisis de le faire, est d'attribuer une classe différente sur le
<body>
élément en fonction de la page en cours.De cette façon, vous pouvez utiliser les CSS pour cibler chaque page avec la page d'actifs spécifiques, comme l'arrière-plan dans un maintenable la mode.
Est la plupart des Cms, vous pouvez simplement utiliser l'id de la page ( que ce soit une limace, un id de nœud, ou même d'une membrane en chemin ).
body.page1 { /* Styles here */ }
et ou votre cible descendants, commebody.page1 .someclass
Utiliser le CSS la ligne que vous avez déjà (
body {background-image:url(greentea.jpg);}
) sur chaque page c'est<head><style></style></head>
balises et il suffit de changer l'image d'arrière-plan sur chaque page. Sachez qu'il est conseillé d'avoir un fichier CSS pour éviter toute inline style.