我在一个HTML主页上有三个图像。 我希望用户能够点击图像去另一个页面。 到目前为止，我有这样的信息:
#features ul li.feature-1 {
background: url('../images/pavilion_small.png') no-repeat top center;
}
#features ul li.feature-2 {
background: url('../images/dtc_small.png') no-repeat top center;
}
#features ul li.feature-3 {
background: url('../images/downtown_small.png') no-repeat top center;
}
我有点困惑如何超链接的图像到另一个页面。 我在网上查过一些关于它的东西，但由于我对此相当陌生，它们对我来说似乎有点迷惑。 有人能解释一下我应该做些什么来完成这件事吗？ 谢啦！
另外，下面是我的HTML:
<div id="features">
<p id="homeValue"></p>
<h3>Find Out What Your Home is Worth</h3>
<center><h4>Begin by clicking your town name</h4></center>
<div class="wrapper">
<ul>
<li class="feature-1">
<h4><a href="https://d.github.io/Real-Estate/a.html">A</a></h4> <!-- This links only the text to the appropriate page -->
<p>sdfhsfkjs</p>
</li>
<li class="feature-2">
<h4>B</h4>
<p>sfkljsfklsjf</p>
</li>
<li class="feature-3">
<h4>C</h4>
<p>sdfkljsdlkfj</p>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
您可以将图像保留在锚标记中
<li>
<a href="https://yoursite.com/yourlink">
<img alt="image" src="https://www.yoursite.com/images/youimage.png">
</a>
</li>
或者如果您仍然从样式表中生成图像
<li class="feature-1">
<a href="https://yoursite.com/yourlink"></a>
</li>
但这里的问题是图像不是你内心的一个标签
您可以将LI内容包装在A标记中。 您仍然可以获得背景图像的好处，但是整个内容块将链接到一个新的URL:
null
#features ul li.feature-1 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li.feature-2 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li.feature-3 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li a {
display: block;
}<div id="features">
<p id="homeValue"></p>
<h3>Find Out What Your Home is Worth</h3>
<center>
<h4>Begin by clicking your town name</h4>
</center>
<div class="wrapper">
<ul>
<li class="feature-1">
<a href="#">
<h4>A</h4>
<!-- This links only the text to the appropriate page -->
<p>sdfhsfkjs</p>
</a>
</li>
<li class="feature-2">
<a href="#">
<h4>B</h4>
<p>sfkljsfklsjf</p>
</a>
</li>
<li class="feature-3">
<a href="#">
<h4>C</h4>
<p>sdfkljsdlkfj</p>
</a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>