Question

当布局复杂时，我对CSS和html并不是很好。我可以快速解决问题，但我没有真正的知识。

我正在尝试为我的网站调整此演示：http://demo.marcofolio.net/bgimg_slideshow/。

问题：徽标是div的背景图片，而不是链接。

我不够好看看如何在不损坏布局的情况下改变它。

你可以通过提供修复（如果不超过5分钟）或者给我提示或链接来帮助我，这样我就可以自己搞清楚了吗？

以下是文件：

html：

<div id="header">
    <div id="headerimgs">
        <div id="headerimg1" class="headerimg"></div>
        <div id="headerimg2" class="headerimg"></div>
    </div>
    <div id="nav-outer">
        <div id="navigation">
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Css：

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

#header { height:600px; }

.headerimg { background-position: center top; background-repeat: no-repeat; width:100%; height:600px; position:absolute; }

#nav-outer { height:110px; padding-top:11px; position:relative; top:24px; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/headerbg.png"); }

#navigation { height:100px; width:960px; margin:0 auto; background-image:url("http://demo.marcofolio.net/bgimg_slideshow/images/logo.png"); background-position:top left; background-repeat:no-repeat; }

#menu { position:relative; top:85px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; font-variant:small-caps; font-size:12px; }
#menu ul li a { color:white; text-decoration:none; font-weight:bold; padding-right:20px; }
#menu ul li a:hover { text-decoration:underline; }

Answer 1

我对您提供的链接进行了一些实时修改。我认为这就是你想要实现的目标。

这是Demo，基于你的小提琴。

<强> HTML

<div id="navigation">
  <h1 id="logo"><a href="/">My Website!</a><br />
    <span>loving jQuery and CSS</span>
  </h1>
...

<强> CSS

#navigation {
    position: relative;
}

#logo {
    position: absolute;
    top: 0;
    left: 0;
}
#logo a {
    color: #fff;
    text-decoration: none;
    font-size: 32px;
}
#logo span {
    font-size:20px;
    color:#48bdee;
    margin-left:50px;
}

Answer 2

我是这样做的。

首先，从#navigation div。

中删除背景图片

然后将以下内容添加为#navigation的第一个孩子。

<a href="/" style="
    height: 80px; 
    width: 500px;  
    background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png');
    background-position: top left; 
    background-repeat: no-repeat;
    display: inline-block;
    position: absolute;
" alt="Image Description"></a>

所以你的导航div应该是这样的：

<!-- Remove all background attributes from #navigation in the CSS -->
<div id="navigation">
            <!-- Below is the new line!, makes your logo clickable! -->
            <a id="logo" href="" style="height: 80px; width: 500px; background-image: url('http://demo.marcofolio.net/bgimg_slideshow/images/logo.png'); background-position: top left; background-repeat: no-repeat;display: inline-block; position: absolute;"></a>
            <!-- Everything else below stays the same!... -->
            <div id="search">
                <form>
                    <input type="text" id="searchtxt">
                    <input type="submit" value="search" id="searchbtn">
                </form>
            </div>
            <div id="menu">
                <ul>
                    <li><a href="http://www.marcofolio.net/">Marcofolio</a></li>
                    <li><a href="http://www.twitter.com/marcofolio">Twitter</a></li>
                    <li><a href="http://feeds2.feedburner.com/marcofolio">RSS</a></li>
                    <li><a href="http://jquery.com/">jQuery</a></li>
                    <li><a href="http://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a></li>
                    <li><a href="http://buysellads.com/buy/detail/956">Advertisements</a>
                </li></ul>
            </div>
        </div>

基本上，您制作的<a href>具有背景图片（所有a href's都可点击）。将背景图像指定给<a href>时，必须将display:block设置为呈现为块级元素。在这种情况下，我们绝对将其定位为将其从文档流中剔除并防止其干扰其他元素。

有更好的方法可以做到这一点，但可能需要重新编写一些代码（这并不困难，但需要业余技能水平的HTML和CSS）。

希望这有帮助！

Answer 3

你应该添加

    <div id="logo">
        <a href="#">
            <img src="images/logo.png" alt="" />
        </a>
    </div>

到＆lt; div id =“＃navigation”＆gt;，在＆lt; div id =“search”＆gt;

之前

然后：

1）你应该将徽标浮动到左侧

    #logo{
         float: left;
    }

2）从#menu中删除 top：85px; 并添加 clear：both;

3）从#navigation中删除 background-image：url（“../ images / logo.png”）;

这样，您就拥有了可点击的图片徽标。：）

说明：

您将徽标浮动到左侧，因为#search浮动到右侧
你删除顶部：85px;因为那是对空白空间的补偿，现在用图像填充，并添加清晰：因为它清除浮动并将菜单放回原位

Answer 4

如果您也使用javascript，则可以执行以下操作。

将鼠标悬停在鼠标指针上时，将div的样式设置为鼠标指针：

.Logo { cursor:pointer; }

然后使用javascript，打开一个包含onclick事件的网址：

<div class="Logo" onclick="window.open('google.com')" />

初学者：帮我用可点击的徽标替换背景图片徽标

4 个答案: