3

我已经尝试了几个在网上找到的不同示例，但现在我没有想法......我试图让两个图像链接并排放置在页面中心。

我当前的代码如下所示：

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<div class="home">
<a href="http://www.xxx.net/blog/" id="h1"></a>
<a href="http://www.xxx.net/gallery/" id="h2"></a>
</div>

CSS

div.home a {
    float: left;
}

div.home {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

div.home #h1 {
    width:  500px;
    height: 350px;
    display: block;
    background-image: url('header1.jpg');
}

div.home #h1:hover {
    background-image: url('header1hover.jpg');
}

div.home #h2 {
    width:  500px;
    height: 350px;
    display: block;
    background-image: url('header2.jpg');
}

div.home #h2:hover {
    background-image: url('header2hover.jpg');
}
4

2 回答 2

1

您可以将图像放在具有 2 个字段的表格行中。然后在中心显示该表。

于 2013-05-11T20:21:57.750 回答
1

您应该添加display : inline到a标签并设置正确的宽度

更新：

看这个演示

于 2013-05-11T20:22:49.853 回答