不正确使用html显示属性

时间:2018-12-07 10:40:30

标签: html css

这是我的html代码的一部分。问题是我的计时器ID为timerel的计时器和html表单未正确显示。我的页脚有一个相对显示,并具有宽度和顶部设置。当我更改它们时,将显示部分计时器。有人可以帮我解决这个问题吗?

* {
  padding: 0;
  margin: 0;
}

#canvas {
  background: #99afa3;
  display: block;
  width: 700px;
  height: 500px;
  float: left;
  margin: 0 auto;
}

#c {
  background: #eeeeee;
  display: block;
  margin: 0 auto;
}

#timerel {
  background: #eeeeee;
  display: block;
  margin: 0 auto;
}
<header>
  <nav>
    <!--<img alt="logo" src ="images/logo.png" style="float: left"/>-->
    <a href="profile.php"><i></i>Profile</a>
    <a href="info.php">Info</a>
    <a href="ranking.php">Ranking</a>
    <a href="index.php">Home</a>
  </nav>
</header>
<aside style="background-color:#E0F9A1; float:right; width:300px; height:550px">
  <p style="font-size:20px"> Poor Snoopy is sad. Help him to get out of the maze by giving commands. </p>
  <img src="GameImg1.jpg" alt="GameImage" />
</aside>
<section>

  <div id="c" style="margin-left:auto; margin-right:auto;margin-bottom: 10px;text-align: center;width: 10%;font-size: large"></div>
  <canvas id="canvas" width="700" height="560">
                This text is displayed if your browser does not support HTML5 Canvas.
            </canvas>
  <div id="timerel" style="text-align: center;width: 15%;font-size: large"></div>
  <!--not display text before timer-->

  <form>
    <!--move box and num box not displayed-->
    <input type="text" id="move" />
    <input type="text" id="num" />
    <button onclick="test();"> click me </button>
    <p id="dem"></p>
  </form>

  <footer style="position: relative; top:570px; width:550px;">
    <div class="footer-icons">
      <ul>
        <li><a href="#facebook"><i class="fa fa-facebook"> </i></a></li>
        <li><a href="#twitter"><i class="fa fa-twitter"> </i></a></li>
        <li><a href="#google"><i class="fa fa-google"> </i></a></li>
        <li><a href="#youtube"><i class="fa fa-youtube"> </i></a></li>
      </ul>
    </div>
    <p style="text-align: center; font-size: 24px; font-family: calibri"> Contact us on SnoopyMazeGame@gmail.com </p>
  </footer>

0 个答案:

没有答案