Question

我试图使用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;}

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

Answer 1

答案中的CSS适用于类标题，而不适用于 id 标题：.header {。在CSS中，.引用一个类，#引用一个ID。 CSS目前应用于图片：http://jsfiddle.net/BjgvY/

Answer 2

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

#header {
    height:50px;
}

没有任何事情发生。这是因为#header的溢出值为＆＃39;可见＆＃39;默认情况下，由于图像要大得多，它会溢出并占用尽可能多的空间。

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

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

将隐藏任何超过标题高度50px的内容。

如果您尝试更改图像的大小，请在图像上设置高度/宽度属性，而不是标题。或者优选地，链接到更合适尺寸的图像;如果您只是将其缩小到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中做任何事情都非常重要。

Here's the documentation

第5.8.3章讨论类选择器

第5.9章讨论ID选择器

（非主题）

您的链接不正确，应该是

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

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

<a href="/">

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

CSS未被应用

2 个答案: