CSS：制作这些导航“；图片“/徽标链接到普通html链接

请看

和公认的问题答案

正如您所看到的，所有链接（服务、工具箱等，包括工作[at]play徽标+联系我们）都包含在以下内容中：

（来源：）

---

我希望有正常的html链接。。所以我有正常的服务。它与sprite nav.png有任何关系。

如果您不想使用CSS sprite，而是将导航栏作为一个整体图像使用，那么您可以使用

map

标记在该图像上创建一个带有单独页面链接的地图。下面是一个例子：

<map id="headermap" name="headermap">
  <area shape="rect" coords="43, 57, 119, 97" href="services.html" alt="Go to services" />
  and so on...
</map>
<img src="07jVk.png" alt="" usemap="#headermap" />

网站。
那些已经存在的HMTL链接，刚刚用列表包装。您只需修改CSS即可

我是为你做的，你可以用这个取代旧的款式：

CSS:

/* Resetter */
ol, ul, li, a {
    background: transparent;
    border: 0px;
    font-size: 100%;
    margin: 0px;
    outline: 0px;
    padding: 0px;
    vertical-align: baseline;
}
ul, li {
    list-style-type: none;
}

/* Body */
body {
    background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
    font:13px Verdana;
}

/* Header */
.header {
    margin: 0px auto;
    position: relative;
    width: 1000px;
}
.header ul li {
    float: left;
}
.header ul li a {
    background-position: 0% 0%;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    color:white;
    text-decoration:none;
    padding:10px;
}
.header ul li:hover {
    background:red;
}

/* Nav */
ul#nav {
    height: 80px;
    margin-top: 80px;
    -webkit-padding-start: 10px;
    display: block;
}
ul#nav li.home {
    float: right;
}

/* Sub Nav */
ul#nav-sub {
    background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
ul#nav-sub {
    background-position: 0px -160px;
    background-repeat: no-repeat;
    height: 40px;
}
ul#nav-sub li {
    margin-top:10px;
}
ul#nav-sub li.contact {
    float: right;
}

请对您想要实现的目标进行更详细的描述，并/或发布一张显示intendet布局的图形。您看到“服务”“工具箱”“工作”“关于”“洞察”和“workatplay”徽标，它们现在都在。我不想这样。我想正常的链接，没有任何图像，所以答案是有链接（相同的位置），包括一个文本“LOGO HERE”，取代了工作[在]播放的标志。。