Question

我有一个整页宽度的标题。该标题包含带背景图像的CSS。在该图像上，中心有一些文字，并在该图像的右侧绘制了一个“联系我们”框。如何使该按钮可单击（以便用户点击它并按照链接）。优选地，该标题图像的仅右侧部分应该是可点击的。这可以用jquery制作吗？

黑客欢迎。

Answer 1

您的问题似乎更多是关于如何构建导航菜单。

我建议你使用内置css的“grid”。通过这样做，您可以在顶部栏中构建多个区域并添加图片或文本。我不建议您使用图像映射，因为您使用的定位将无法根据您的设备进行调整。

下面有一个使用网格的基础。为简单起见，我添加了HTML和CSS。如果您的目标是创建导航栏，则需要添加文本链接并将其放置到相应的区域中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test</title>

<!--CSS-->
<style>

.wrapper {
  display: grid;
  grid-template-columns:
  1fr
  1fr
  1fr
  ;
  grid-template-rows:
  100px
  ;
  grid-template-areas:
  "header-1-left header-1-mid header-1-right"
  ;
  }

  .header-1-left {grid-area: header-1-left; background-color: grey;}
  .header-1-mid {grid-area: header-1-mid; background-color: pink;}
  .header-1-right {grid-area: header-1-right; background-color: lightblue;}

</style>

<div class="wrapper">
  <div class="header-1-left"></div>
  <div class="header-1-mid"></div>
  <div class="header-1-right"></div>
</div>


</head>
<body>

</body>
</html>

Answer 2

您已使用array of datetime创建标题，并使用position: relative创建元素。试试这段代码。

position: absolute

使标题图像右侧可点击

2 个答案: