如何在CSS中进行自定义文本编辑并在学校项目中获取错误

时间:2015-12-11 02:17:03

标签: html css

这是页面的代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Ian Kenji Part 2 Web Development</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="Description" lang="en" content="Ian Kenji Part 2 Web Development">
    <meta name="author" content="Ian Kenji">
    <meta name="robots" content="index, follow">
    <script>
      function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML =
        h + ":" + m +  " o'clock";
        var t = setTimeout(startTime, 500);
      }
      function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
      }
    </script>

    <script>
      function greetings(){
        var now = new Date();
        if (now.getHours() < 5) {
          document.getElementById('greeting').innerHTML =
          "What are you doing up so late?";
        }
        else if (now.getHours() < 9) {
          document.getElementById('greeting').innerHTML =
          "Good Morning!";
        }
        else if (now.getHours() < 17) {
          document.getElementById('greeting').innerHTML =
          "No surfing during working hours!";
        }
        else {
          document.getElementById('greeting').innerHTML =
          "Good Evening!";
        }
      }
    </script>

    <!-- icons -->
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png">
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Override CSS file - add your own CSS rules -->
    <link rel="stylesheet" href="assets/css/styles.css">
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1 class="header-heading">James Bond Spectre</h1>
      </div>
      <div class="nav-bar">
      <ul class="nav">
        <li><a href="homepage.html">Home</a></li>
        <li><a href="images.html">Images</a></li>
        <li><a href="video.html">Video</a></li>
        <li><a href="audio.html">Audio</a></li>
        <li><a href="text.html">Text</a></li>
        <li><a href="documentation.html">Documentation</a></li>
        <li><a href="validation.html">Validation</a></li>
        <li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>
      </ul>
    </div>
    <div class="content">
      <div class="main">

        <h1>Images</h1>
        <hr>
        <hr>
        <h4>Bond, James Bond</h4>
        <center><img src="assets/img/Spectre1.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
        <p><br><p>
        <center><img src="assets/img/pic5.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
        <p><br><p>
        <center><img src="assets/img/pic2.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
        <p><br><p>
        <center><img src="assets/img/pic3.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
        <p><br><p>
        <center><img src="assets/img/pic4.jpg" alt="Spectre" style="width:100%;height:100%;"></center>
        <p><br><p>

        <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/7GqClqvlObY" frameborder="0" allowfullscreen></iframe> -->

        </div>
      </div>
      <div class="footer">
        &copy; Copyright 2015 Ian Kenji
      </div>
    </div>
  </body>
</html>

我知道这真是草率但我对此有点新意。这是我的问题,当通过验证器运行时,我收到此错误

启动标记正文,但相同类型的元素已经打开。 从第72行,第28栏;到第72行,第67栏

<li><a><p><br></p><body onload="greetings(); startTime()"><div id="txt"></div><div id="greeting"></div></a></li>

另外我被告知使用<center>来使图片居中是过时的,我应该使用CSS。但是,我有一个问题,因为我需要一些图片集中,其中一些不是。我怎样才能做到这一点,有些不是?

我该怎么做才能解决这个错误?

1 个答案:

答案 0 :(得分:0)

你有2个身体标签。将第1个替换为第2个,然后移除第2个。

将等级center添加到您的CSS中 像这样的东西

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto
}

并将该类放在要居中的图像标记上,然后删除中心标记。

<img src="assets/img/Spectre1.jpg" class="center" />

在此处详细了解css:http://www.w3.org/Style/Examples/007/center.en.html