Question

This is the problem I've been having.我最近开始学习Web开发并开始制作自己的迷你游戏网站，但是由于我是新手，所以我在页脚和超链接图像方面遇到了问题尽管可以在线查找答案，但仍然能够解决问题。

我遇到的问题是，当我将超链接的图像添加到我想要游戏所在的页面时，页脚从页面底部移动到图像所在的位置，页脚也随之变为超链接本身使其成为游戏将要访问的页面之一的可单击链接，我希望将图像保留在一边，以供“推荐游戏”使用，而游戏本身位于页面的中心。当我删除超链接的图像时，此问题不再发生。谢谢您的任何反馈意见。

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

Answer 1

您需要关闭</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>

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

1 个答案: