【发布时间】：2015-05-14 23:20:10
【问题描述】：
由于我无法创建带有所需文本的水平导航栏，我不得不在 illustrator 中创建一个新的navbar 并将其保存为 jpeg。我计划在home 和products 上使用热点。当然，现在的问题是当用户调整浏览器的大小时，他们仍然需要点击链接。这样做的最佳方法是什么？当用户调整浏览器的大小时，我真的需要绘制出页面上可能出现单词的每个位置吗？
当用户调整大小时，home 和 products 将出现在页面上的三个不同位置。 Home 和 Products 在第一张和第二张截图之间左右移动，在第二张和第三张截图之间上下移动。除此之外，页面上的文字几乎是固定的。
我担心用户可能会为不存在的单词找到热点。我怎样才能防止这种情况？谢谢你。
<!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>
【问题讨论】：
-
“由于我无法创建带有所需文本的水平导航栏”是什么意思？ This is a simplified example... 你想实现什么是 CSS 和没有图像无法完成的？
-
我尝试使用 Windsor Bold 作为导航栏中的字体。即使我把它下载到我的电脑上，它也没有出现在浏览器中（它仍然显示为默认字体），而且我知道每个人的浏览器上都会显示有限数量的字体，除非他们下载了特定的字体。
-
水平导航栏内的字体必须是Windsor Bold。
标签： jquery html css hyperlink imagemap