Question

我的导航栏上有6个链接，并设法将标识（这是一个jpeg）附加到栏中，但我的链接位于徽标的顶部。我如何将我的链接分开，以便我的徽标独立。

HTML

    <html>
       <head>
       <title>TITLE HERE</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <link rel="stylesheet" href="style.css">
       </head>

        <body>
    <a name="top"></a>
    <table align="center" cellpadding="0" cellspacing="0" border="0" height="100%">
    <tr><new class="right" colspan="2">&nbsp;</td></tr>
    <tr>

<!--Top Navigation Links (top horizontal navigation bar)-->
    <td id="nav1" colspan="2"><a href="index.html">Home</a>
    <a href="LINK1.html" class="nav1">Name</a>
    <a href="LINK2.html">Name</a>
    <a href="LINK3.html" class="nav1">Name</a>
    <a href="LINK4.html">Name</a>
    <a href="LINK5.html" class="nav1">Name</a>
    </tr>
    <tr><td id="head" colspan="2"></td></tr>
    </td>
    </tr>
    <td id="main" valign="right">

AND CSS

td#nav1 {
height: 66px;
background: #000000 url('images/logo.jpg') no-repeat top left;
}

Answer 1

在td#nav1左侧添加一些等于或大于徽标宽度的填充。

Answer 2

在主页链接之前的<img>内添加图片作为HTML nav1标记。

<img src="images/logo.jpg" alt="This is my sites logo">

删除CSS背景属性

background: #000000 url('images/logo.jpg') no-repeat top left;。

将其添加到样式表中。

td#nav1 * {
   float: left;
}

然后，您可以在各种元素上使用边距/填充css属性来完善布局。

如何在导航栏上放置徽标

2 个答案: