0

我正在研究如何使用 HTML + CSS 创建无表格 Web 模板的教程，我对以下内容有一些疑问：

我有一个标题，其中包含一个id=logo 的 div，如下所示：

        <div id="header">    <!-- HEADER -->
            <div id="logo">     <!-- My Logo -->
                <h1><a href="#">My web site is cool</a></h1>
                <p id="slogan">
                    My web site is finally online
                </p>
            </div>
                            ......
                            OTHER HEADER STUFF
                            ......
        </div> <!-- Close header -->

与这个#header div（及其内容）相关，我有以下CSS代码：

/* For the image replacement of the logo */
h1 {
    background: url(../images/logo.jpg) no-repeat;
    text-indent: -9999px;
    width: 224px;
    height: 71px;
}

h1 a {
    display: block;
    width: 258px;
    height: 64px;
    text-decoration: none;
}

所以这段代码放了一个图像而不是我的网站是标签中的酷文本。

我在理解h1 a CSS 设置时遇到了一些问题，在教程中说h1 a 的这个 CSS 设置：

转向block（从inline）header中链接的显示模式，所以我可以设置宽度和高度，并且logo的图像现在可以点击了

这件事对我来说不是很清楚，我有以下疑问：

我是否必须将 a 元素（即内联）转换为块元素以使其具有与底层图像（logo.jpg）相同的尺寸？

肿瘤坏死因子

安德烈亚

4

2 回答 2

3

举这个例子，

一个a元素是inline默认的，所以如果你要做类似的事情

CSS

a {background:red; height:210px; width:200px;}

HTML

<a href="#">test</a>

您会注意到widthandheight属性不起作用。现在要使该元素的大小调整为该宽度，您需要将元素的显示属性设置为display:block或者display:inline-block

JSFiddle 演示示例

HTML：

<a href="#">Without display:inline block, width and height set.</a>
<br><br>
<a href="#" class="inline-block">With display:inline block, width and height set.</a>
<br><br>
<a href="#" class="block">With display:block, width and height set.</a>

CSS：

a {background:#ccc; height:210px; width:200px;}
.inline-block { display:inline-block; }
.block { display:block; }
于 2013-07-02T15:44:19.440 回答
1

如果您要链接图像，则无需提供a高度/宽度甚至display:block. 然而，你真的不应该把图像放在h1这样的里面。您最好制作a 块a内部h1（使用display:block）并将背景设置为图像，然后隐藏文本。对于网站的用户来说，不会有太大的不同，但它会从您的 HTML 代码中删除图像，使屏幕阅读器更容易，并且在语义上更正确。所以你的代码是：

a { display: block; font-size:0; background-image:url("logo.png"); height:100; width:100 }
于 2013-07-02T15:47:42.850 回答