HTML/CSS图像导航菜单_Html_Image_Css_Url

HTML/CSS图像导航菜单

html image css url

HTML/CSS图像导航菜单,html,image,css,url,Html,Image,Css,Url,所以，我已经编程好几年了，我一直害怕创建一个网站，因为HTML和CSS不是编程语言，出于某种原因，它们让我困惑不已这里是一个链接，我有HTML和CSS代码，我认为这会显示一个图像，悬停时，会显示一个不同的图像。我记得几年前在C.S.的入门课程中这样做过在看了多个简单的例子之后，复制代码并实现我的图像，其中示例代码有自己的图像，但仍然出现了一个空白屏幕，我来告诉你们我错过的愚蠢的事情很抱歉，这是多么简单 HTML: 我的目录树： [SITE]- |—index.html |

所以，我已经编程好几年了，我一直害怕创建一个网站，因为HTML和CSS不是编程语言，出于某种原因，它们让我困惑不已

这里是一个链接，我有HTML和CSS代码，我认为这会显示一个图像，悬停时，会显示一个不同的图像。我记得几年前在C.S.的入门课程中这样做过

在看了多个简单的例子之后，复制代码并实现我的图像，其中示例代码有自己的图像，但仍然出现了一个空白屏幕，我来告诉你们我错过的愚蠢的事情

很抱歉，这是多么简单

HTML:

我的目录树：

[SITE]-
    |—index.html
    |
    |—[ css ]
    |   |—base.css
    |   
    |—[ images ]
    |   |—about.png
    |   |—aboutHover.png
    |   |—contact.png
    |   |—contactHover.png
    |   |—name.png
    |   |—nameHover.png
    |   |—work.png
    |   |—workHover.png
    |
[SITE]-

如果索引文件的级别相同，

/images

应为

images

background-image: url(images/workHover.png);

dir/index.html

。/images

向上进入一个目录，向下进入图像

dir/dir/index.html

。/../images

要上下两个方向进入图像，请尝试以下操作

<body>

        <a href="#" class="about" >Learn more about me!</a> 
        <a href="#" class="work" >Look at what I made!</a>
        <a href="#" class="contact">Talk to me!</a> 
    </body>

您确定图像路径正确吗？我在想同样的@brettwbryon，你应该在锚元素中包含文本，以实现可访问性，即屏幕阅读器。只需将文本推离屏幕，使其不可见：

文本缩进：-9999em

。我不希望该文本实际显示在html中。在查看了我的目录树之后，我意识到我需要上一个目录才能进入我的图片文件夹。我通常将HTML和CSS文件放在同一个目录中，但我第一次使用多个CSS文件，这是我的问题。我需要在我的图像之前添加../。我做到了，而且效果很好。谢谢你帮我认识到我的荒谬错误！我很高兴能帮上忙，嘿，有几个点有时很容易被忽略。像你这样使用悬停和非悬停状态的单独图像会在有人第一次悬停链接时引起闪烁。在一幅图像中包含这两种状态，并使用

背景位置

来防止闪烁。@hungerstar如何实现该代码？我不太熟悉HTML和CSS，因此非常感谢您提供的任何帮助。请查看CSS精灵，再看看@hungerstar推荐的内容=）

background-image: url(images/workHover.png);

<body>

        <a href="#" class="about" >Learn more about me!</a> 
        <a href="#" class="work" >Look at what I made!</a>
        <a href="#" class="contact">Talk to me!</a> 
    </body>