Question

由于我无法使用所需的文本创建水平导航栏，因此我必须在Illustrator中创建一个新的navbar并将其另存为jpeg。我打算在单词home和products上使用热点。当然，现在的问题是，当用户调整浏览器大小时，他们仍然需要点击链接。这样做的最佳方法是什么？当用户调整浏览器大小时，我是否真的需要在页面上找出每个单词的位置？

以下是三个不同的地方，当用户调整大小时，页面上会显示home和products字样。 Home和Products在第一个和第二个屏幕截图之间左右移动，在第二个和第三个屏幕截图之间上下移动。除此之外，页面上的文字几乎都是固定的 Resize 3 Resize 2 Resize 1

我担心的是用户可以找到一个不在那里的单词的热点。我怎么能阻止这个？谢谢。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#banner {width:100%}
#banner img {width:100%;height:auto}
nav {width:100%;display:block;}
nav ul {list-style-type:none;margin:0;padding:0;text-align:center;
background-color:#c0872e;}
nav li {display:inline-block;background-color:#c0872e;
font-family:Georgia;}
nav a {line-height:35px; color:white; padding: 0 30px; font-size:22px;
 font-family:Georgia; background-color:#c0872e;}
nav a:hover {text-decoration:none}

a{float:left;margin-right:58px; margin-left:58px;color:#000;
text-decoration:none;
}
body {background-image: url("daikinbackground1.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

-->
</style>
<meta charset="utf-8"/>
<title>daikininc.com</title>
</head>
<body>
<div id="body">
<header>
<div>
<div style="text-align:center" id="banner">
<title="daikinincbanner">
<img src="daikinbanner1.jpg" border="0" alt="daikinbanner1">
</div>
<!--
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
</ul>
</nav>
-->
<nav style="text-align:center">
<img style ="height:300px" width="1355" src="navbarimage1.jpg">
</nav>
<br>
<p style="text-align:center;font-family:WindsorDemi;">
<font size="4">
Welcome to daikininc.com! Home to the world's greatest eggorll
wrappers and noodles.
</font>
</p>
<br><br><br><br><br><br><br><br><br>
</nav>
</header>
<section>
<aside>
</aside>
<article>
</article>
<footer>
</footer>
</div>
</body>
</html>

Answer 1

您可以创建一组与图像尺寸相同的叠加div（内部链接）。如果您的图像没有根据视口调整大小，那么您应该在这些div上设置修复宽度/高度/位置。

话虽这么说，我建议您在不使用像这样的大图像的情况下构建您的设计布局/样式。这会让你感到头疼。

Answer 2

你不应该用图像做这个。查找Windsor的Web字体版本，并将其用于@font-face。

css-tricks有nice write up on using @font-face。

为可调整大小的图像创建热点？

2 个答案: