我有一个看起来像这样的 HTML block :
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
我正在使用 CSS 技术来隐藏所有文本并将其替换为图像。但是我想将整个 block 链接到主页。我无法将其包装在 <a>
中因为那不符合标准。那我该怎么做呢?
我的解决方案;灵感来自 New in town
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
<a href="index.html">Home</a>
</div>
#header {
text-indent: -9999px;
width: 384px;
height: 76px;
background: transparent url(../images/header.png) no-repeat;
margin: 10px;
position: relative;
}
#header a {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
最佳答案
在header div之外放置一个链接元素,并使用绝对定位覆盖它们。还要添加一个 z-index 以确保链接接收用户输入。
<style>
a.header
{
position: absolute;
display: block;
width: 100%;
height: 100px;
z-index: 1;
}
</style>
<div id="header">
<h1>title</h1>
<h2>subtitle</h2>
</div>
<a href="homepage" class="header"></a>
关于html - 如何以符合标准的方式链接 header ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1449547/