0

当布局复杂时，我不太擅长 CSS 和 html。我可以快速解决问题，但我没有真正的知识。

我正在尝试为我的网站改编这个演示：http ://demo.marcofolio.net/bgimg_slideshow/ 。

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

我还不够好，看不到如何在不破坏布局的情况下更改它。

您能否通过提供修复程序（如果您花费的时间不超过 5 分钟）或给我提示或链接来帮助我，以便我自己解决？

编辑：这是一个代码最少的 jsfiddle

这里是文件：

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; }
4

4 回答 4

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;
}
于 2013-01-02T17:09:45.380 回答
1

这是我的做法。

#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 时<a href>，您必须设置display:block它以将其呈现为块级元素。在这种情况下，我们绝对定位它以将其从文档流中剔除并防止它干扰其他元素。

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

希望这可以帮助！

于 2013-01-02T17:11:17.997 回答
1

你应该添加

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

到 <div id="#navigation">，就在 <div id="search"> 之前

然后：

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

    #logo{
         float: left;
    }

2）移除顶部：85px；从 #menu 并添加clear: both;

3) 删除背景图片：url("../images/logo.png"); 来自#navigation

这样，您就有了可点击的图像徽标。:)

解释：

  • 您将徽标浮动到左侧，因为#search 浮动到右侧

  • 你删除 top: 85px; 因为这是对现在填充图像的空白空间的补偿，并添加 clear: 两者都是因为它清除了浮动并将菜单定位回原位

于 2013-01-02T17:13:48.303 回答
0

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

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

.Logo { cursor:pointer; }

然后使用 javascript，打开onclick事件的 url：

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

于 2013-01-02T17:08:50.350 回答