如何修复带有超链接图像的页脚移动



这是我一直遇到的问题。我最近开始学习网络开发并开始制作自己的迷你游戏网站,但我的页脚和超链接图像遇到了问题,由于我是新手,尽管在网上寻找答案,但我无法弄清楚这个问题。

我遇到的问题是,当我将超链接图像添加到我希望游戏所在的页面时,页脚从页面底部移动到图像所在的位置,然后页脚本身变为超链接,使其成为游戏所在的页面之一的可点击链接, 我想将图像放在"推荐游戏"的旁边,游戏本身位于页面的中心。当我删除超链接图像时,此问题不再发生。任何反馈将不胜感激,谢谢。

.HTML

    <aside1>
        <div class="container">
            <h1>Recommended Games</h1>
        </div>
    </aside1>
    <aside1 id="boxes">
        <div class="container">
            <div class="box">
            <a href="spaceinvader.html">
            <img src="img/spaceinvader.jpg">
            <h3>Space Invaders</h3>
        </div>
        <div class="box">
                <a href="hangman.html">
                <img src="img/hangman.jpg">
                <h3>Hangman</h3>
            </div>
        <div class="box">
                <a href="pacman.html">
                <img src="img/pacman.jpg">
                <h3>Pacman</h3>
            </div>
    </aside1>
    <footer>
        <p>ACI Games, Copyright &copy; 2019</p>
    </footer>

.CSS

    aside1{
       width:20%;
       position:absolute;
       top:212px;
       bottom:60px;
       left:0px;
       border-left:6px solid;
       border-right:6px solid;
       border-color:aqua
    }
    aside1 h1{
       color:white;
       text-align:center;
    }
    footer{
       position: absolute;
       bottom:0;
       width:100%;
       height:60px;
       background:aqua;
       text-align:center;
       color:white;
   }

您需要关闭</a>标签。

这是更新的小提琴:

<aside1>
  <div class="container">
    <h1>Recommended Games</h1>
  </div>
</aside1>
<aside1 id="boxes">
  <div class="container">
    <div class="box">
      <a href="spaceinvader.html">
        <img src="img/spaceinvader.jpg"></a>
      <h3>Space Invaders</h3>
    </div>
    <div class="box">
      <a href="hangman.html">
        <img src="img/hangman.jpg"></a>
      <h3>Hangman</h3>
    </div>
    <div class="box">
      <a href="pacman.html">
        <img src="img/pacman.jpg"></a>
      <h3>Pacman</h3>
    </div>
</aside1>
<footer>
  <p>ACI Games, Copyright &copy; 2019</p>
</footer>

最新更新