应用错误收集

如何从导航栏为每个链接创建不同的背景？

时间：2013-05-19 18:49:00

标签： html css

如何为导航栏中的每个链接创建不同的背景？

例如，我想要一张照片作为我的主页链接背景，然后另一张照片作为我关于链接的背景，另一张照片作为我联系我链接的背景。

这可以仅使用CSS吗???

提前谢谢大家：）

1 个答案:

答案 0 :(得分：3)

For Links

如果您实际上是指链接本身的背景，则将css类名称应用于每个链接并单独设置它们的样式。例如：

<ul>
    <li class="homeLink"><a href="home.html">Home</a></li>
    <li class="aboutLink"><a href="about.html">About</a></li>
    <li class="contactLink"><a href="contact.html">Contact</a></li>
</ul>

并在您的样式表中

.homeLink { background-image:url(/img/home.jpg); }
.aboutLink { background-image:url(/img/about.jpg); }
.contactLink { background-image:url(/img/contact.jpg); }

对于页面

对于页面，请将css类名称应用于body标签而不是链接。

    <body class="homePage">...

或 ... 要么 ...

并在您的样式表中

.homePage { background-image:url(/img/home.jpg); }
.aboutPage { background-image:url(/img/about.jpg); }
.contactPage { background-image:url(/img/contact.jpg); }