gpt4 book ai didi

html - 如何使两个图像按钮超链接并排占据全屏?

转载 作者:太空宇宙 更新时间:2023-11-04 14:12:00 25 4
gpt4 key购买 nike

我想要两张图片,分别是页面的左右两半,点击后会重定向到特定链接。

当用户进入网页时,我希望他们只看到这两张图片(可点击),我也不希望它可以滚动,即我只希望它适合单个页面。

不是很熟悉 HTML - 如何修改/重写下面的代码?

<a href="http://www.google.com">
<img src="left_image.png" alt="Go to Google!" >
</a>

<a href="http://www.facebook.com">
<img src="right_image.png" alt="Go to Facebook!" >
</a>

最佳答案

看起来像这样

html,body{
width:100%;
height:100%;
margin:0
}
div.container{
position:relative;
width:100%;
height:100%;
box-sizing:border-box;

}
.left, .right{
width:50%;
height:inherit;
float:left
}
a{
display:block;
width:100%;
height:inherit
}
.left{
background:url(http://www.planwallpaper.com/static/images/desktop-year-of-the-tiger-images-wallpaper.jpg);
background-size:cover;
}
.right{
background:url(https://pixabay.com/static/uploads/photo/2016/03/28/12/35/cat-1285634_960_720.png);
background-size:cover;
}
<div class="container">
<div class="left">
<a href="www.google.com" ></a>
</div>
<div class="right">
<a href="www.facebook.com"></a>
</div>
</div>

关于html - 如何使两个图像按钮超链接并排占据全屏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40457797/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com