Question

我刚开始用html5和CSS开头。我似乎无法将我的第一个标题置于顶部徽标下方，中间图像位于标题下方。基本上我想知道如何按顺序排列元素。

以下是我的截图和以下代码：

＆＃13;

body {
  text-align: center;
  background-color: white;
  color: black;
}

#logo {
  align: left;
}

#tagline {
  text-align: left;
  color: black;
  font-family: arial;
}

#car {
  align: center;
}

table {
  text-align: center;
}

#p01 {
  color: black;
  font-size: 24;
  line-height: 10%
}

#p02 {
  color: blue;
  font-size: 24;
  line-height: 25px;
}

#h102 {
  color: green;
  font-family: arial;
}

＆＃13;

<div id="logo">

  <img src="auto.png" alt="autologo" width="200" align="left" />

</div>

<div id="tagline">

  <h3><em>Explore the world's supercars</em>
    <h3>

</div>

<div id="car">

  <img src="aventador-coupe-facebook-og.jpg" alt="lambo" width="700" border="5px" />

</div>

<p id="p01">Here is a picture of the Lamborghini Aventador</p>

<p id="p02">The Lamborghini flagship model</p>

<table cellspacing="0" cellpadding="4" border="4" align="center">

  <tr>
    <td>aventador</td>
    <td>huracan</td>
    <td>centenario</td>
  </tr>

  <tr>
    <td>asterion</td>
    <td>esoque</td>
    <td>murcielago</td>
  </tr>

  <tr>
    <td>gallardo</td>
    <td>diablo</td>
    <td>countach</td>
  </tr>

</table>

<h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1>

＆＃13;

Answer 1

您使用了大量无效的CSS属性和HTML属性。我评论了需要解决的问题。删除一些无效的标记类固定自己。希望这会有所帮助。

运行下面的代码段并制作完整页面以查看结果

<html>

<head>

  <title>My Car Website</title>

  <!-- Start of internal style sheet -->

  <style type="text/css">
    body {
      text-align: center;
      background-color: white;
      color: black;
    }
    
    #logo {
      margin: auto;
      /* align: left;  not a valid property */
    }
    
    #tagline {
      text-align: center; /* centered text */
      color: black;
      font-family: arial;
    }
    
    #car {
      /* align: center; not a valid property */
    }
    
    table {
      text-align: center;
    }
    
    #p01 {
      color: black;
      font-size: 24;
      line-height: 10%
    }
    
    #p02 {
      color: blue;
      font-size: 24;
      line-height: 25px;
    }
    
    #h102 {
      color: green;
      font-family: arial;
    }
  </style>

  <!-- End of internal style sheet -->

</head>

<body>

  <div id="logo">

    <img src="http://i.imgur.com/jUinHhf.png" alt="autologo" /> <!-- removed invalid attributes -->

  </div>

  <div id="tagline">

    <h3><em>Explore the world's supercars</em></h3>

  </div>

  <div id="car">

    <img src="http://i.imgur.com/lfAFZaA.png" alt="lambo" width="700" border="5px" />

  </div>

  <p id="p01">Here is a picture of the Lamborghini Aventador</p>

  <p id="p02">The Lamborghini flagship model</p>

  <table cellspacing="0" cellpadding="4" border="4" align="center">

    <tr>
      <td>aventador</td>
      <td>huracan</td>
      <td>centenario</td>
    </tr>

    <tr>
      <td>asterion</td>
      <td>esoque</td>
      <td>murcielago</td>
    </tr>

    <tr>
      <td>gallardo</td>
      <td>diablo</td>
      <td>countach</td>
    </tr>

  </table>

  <h1 id="h102">FIND YOUR LUXURY CAR TODAY</h1>

</body>

</html>

间距和定心元素

1 个答案: