0

我正在尝试使用 Div 打开和关闭标签来阻止一段代码，如下所示：

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

但是，如果我尝试使用 #header 在 css 中编码，它不会遵循任何规则吗？我是 HTML 和 CSS 的新手，所以请原谅我的无知。

编辑：这是帮助我所需的 CSS。抱歉忘记了，我又是新来的。

.header{ 
    width:300px; 
    height:300px;
    display:block; 
    margin: auto;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;}

最后一部分是从帮助网站复制的，因为它允许鼠标悬停在它上面时淡入淡出。每次我尝试更改“。” 带有“#”，它完全忽略了规则。

4

2 回答 2

3

答案中的 CSS 用于类标头而不是id标头：.header {。在 CSS 中，the.指的是一个类，a 指的是#一个 ID。CSS目前应用于图像：http: //jsfiddle.net/BjgvY/

于 2013-09-02T15:56:06.543 回答
1

不知道你的 CSS 是什么，因为你没有包含它，但我猜你指的是你正在尝试做这样的事情：

#header {
    height:50px;
}

什么都没有发生。这是因为 #header 默认有一个溢出值 'visible'，并且由于图像更大，它会溢出并根据需要占用尽可能多的空间。

如果您不希望发生这种情况，则必须将溢出更改为不同的值，例如：

#header {
    height:50px;
    overflow: hidden;
}

将隐藏超过标题 50 像素高度限制的任何内容。

如果您尝试更改图像的大小，请设置图像的高度/宽度属性，而不是标题。或者最好是链接到更合适大小的图像；如果您只想将其缩小到 200x160 之类的大小，那么加载 ~1000x800 图像是没有意义的。

拥有同名的 ID 和类也可能是个坏主意。只是为了清楚起见，如果您尝试使用“标题”类获取图像以遵循一些 CSS 样式，则需要使用

.header {
}

选择器，而不是

#header {
}

如果您发布您的 CSS，我可以提供一个更相关的答案，而不仅仅是根据我认为您可能做错的事情在黑暗中拍摄。

编辑：

看起来你在使用 CSS 选择器时遇到了困难，

#header {
}

将引用具有标头ID的任何元素，例如

<div id="header"></div>

而css选择器

.header {
}

指具有CLASS标题的元素，例如

<div class="header"></div>

所以回到你的代码

<div id="header"> 
  <a href="www.hugowolfdesigns.tumblr.com">
    <img src="http://i596.photobucket.com/albums/tt48/stizzo96/hugowolf_zps386e6f4e.png" alt=" photo hugowolf_zps386e6f4e.png" class="header"/>
  </a>
</div>

    #header { // these styles will apply to your div with ID header
    }

    .header { // these styles will apply to your image with the class header
    }

这可能看起来很烦人，但如果您是 CSS 新手，我强烈建议您阅读有关选择器的内容。因为它们对于在 CSS 中做任何事情都非常重要。

这是文档

第 5.8.3 章讨论类选择器

第 5.9 章讨论 ID 选择器

（无关）

您的链接不正确，应该是

 <a href="http://www.hugowolfdesigns.tumblr.com">

如果它指向不同的网站，或者它可以只是

 <a href="/">

如果它指向同一个网站的主页

于 2013-09-02T15:50:12.673 回答