Question

The code I have pasted below is meant to display images on the middle 2 links without text and go back to text on the reset and fourth link. I have set display:none for the span tag only, but it does nothing. Is there anyway to do what I am after simply, without using a framework?

edit: example

<html>
    <head>
        <style type="text/css">
                .class1{color:#000; background-image:url( 1.jpg );}
        .class1 span { display: none;}
                .class2{color:#00f; background-image:url( 2.jpg );}
        .class2 span { display: none;}
                .class3{color:#0f0; background-image:url( 1.jpg );}
        .class3 span { display: none;}
                .class4{color:#f00;}

        </style>
    </head>
    <body>
        <script type="text/javascript">
                function sbox(divid, classname)
                {
                        document.getElementById(divid).className=classname;
                 }
        </script>
        <div>
        <a href="#" onclick="sbox( div1 , class1 );return false;">Reset</a><br/>
                <a href="#" onclick="sbox( div1 , class2 );return false;">try here</a><br/>
                <a href="#" onclick="sbox( div1 , class3 ); return false;">or here</a><br/>
                <a href="#" onclick="sbox( div1 , class4 );return false;">or maybe here</a>
        </div>
        <div id="div1" class="class4"><span id="div1_text">Blah blah blah</span></div>
    </body>
</html>

Answer 1

rel 属性被设计用来描述链接与当前文档之间的关系。它应该使用此处描述的值之一。 DIV 是一个块级元素，而 SPAN 是一个内联元素。SPAN 允许你将文本和标签一起分组，以达到某个目的（共同样式等），而不改变标记的流程。

EDIT: The question changed out from under me so the above seems really disconnected from the current context.

你需要按照@llandril的要求，给DIV设置一些尺寸。我建议给DIV设置固定的宽度和高度 - 要么始终如此，要么在使用显示图像的某个类时。如果您希望显示整个背景图像，请使用背景图像的宽度和高度。你可能也需要添加一些内容，但我觉得没必要。

这是我认为的Class1的样子，我还没有测试过。

    /* in case color needs to apply to other elements */
    .class1 { color: #000; }

    div .class1 {
        background-image:url( 1.jpg );
        width: 60px;
        height: 30px;
    }

    div .class1 span { display: none;}

Answer 2

The div tag encloses a block of content. The span tag is similar, but encloses inline content. Difference? You can use span to style a phrase inside a paragraph, but div to wrap that paragraph and separate it from others. See this for divs, and this for spans.

经过一些评论：这是来自权威机构的认证之言：

DIV和SPAN元素与id和class属性一起，提供了一种用于向文档添加结构的通用机制。这些元素定义了要内联（SPAN）或块级（DIV）显示的内容，但不对内容施加任何其他演示习惯。因此，作者可以将这些元素与样式表、语言属性等结合使用，以满足自己的需要和喜好来定制HTML。

Answer 3

rel属性通常不被许多用户代理（UA）使用，但它指定了链接页面与当前页面的关系。

在某些地方出现了某些伪标准，例如Mozilla使用prefetch关系来预加载页面。Google设置了[曾经设置过吗？]它的前几个结果以这种方式预加载，因此这些页面应该加载得更快。

其他的例子包括基于浏览器的导航栏（例如，Opera具有此功能），其中包含指向下一页、上一页、目录页面等的链接。这也适用于<link>元素。

Answer 4

rel也可以用来描述其他语义，参见微格式rel文档。

Answer 5

通常，rel和rev属性分别描述前向链接和后向链接。例如，在列表的分页中，您可以使用<a href="..." rel="next">下一页</a>和<a href="..." rev="prev">上一页</a>。



请参阅http://www.w3.org/TR/html401/types.html#type-links，了解您可以使用的一些值。

其他人已经解释过span / div标签了。实际上，使用span标签的情况并不多，因为你通常可以在上下文中使用短语元素，比如 em ， strong ， code 等来代替。

Answer 6

这个DIV不显示背景图片，因为当你的span消失时它没有任何内容。

在span后添加一个不间断空格（ )将给它添加内容。

友情链接