Question

我正在复制网站以使用CSS进行培训（我试图重现这一点：click here to see the image）但是我在复制边框时出现问题，结果是：{ {3}}这是我写的代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Technology - BBC News</title>
  <style>
    .topbar {
      width: 1000px;
      height: 40px;
      background-color: #ffffff;
    }
    
    body {
      margin: 0px;
      padding: 0px;
    }
    
    .logo {
      margin-top: 8px;
      width: 100px;
      float: left;
      margin-left: 16px;
    }
    
    .topbar-section {
      border-left: 1px solid grey;
      height: 40px;
      float: left,
    }
  </style>

</head>

<body>
  <div class="topbar">
    <img src="bbc-blocks-dark.png" class="logo"></div>
  </div>

  <div class="topbar-section">Sign in</div>

</body>

</html>

＆＃13;

我可以请你帮忙吗？

Answer 1

当我在Chrome中查看此代码时 - 我可以在.topbar-section上看到左边框。

当你说你遇到问题时 - 你能告诉我们发生了什么吗？它们没有显示或显示不正确吗？

从我所看到的 - 主要问题是你已经制作了2个单独的div，它应该是另一个div。

您还有3次关闭，只有2次开放 - 如果您使用的是Atom或Notepad ++等编辑器，这可以帮助您跟踪您的开始和结束元素。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Technology - BBC News</title>
  <style>
    .topbar {
      width: 1000px;
      height: 40px;
      background-color: #ffffff;
    }

    body {
      margin: 0px;
      padding: 0px;
    }

    .logo {
      margin-top: 8px;
      width: 100px;
      float: left;
      margin-left: 16px;
      border-right: 1px solid grey;

    }

    .topbar-section {
      height: 40px;
      float: left;
      margin-left: 5px;
    }


  </style>

</head>

<body>
  <div class="topbar">
    <img src="bbc-blocks-dark.png" class="logo">


  <div class="topbar-section"><p>Sign In</p></div>
</div>
</body>

</html>

＆＃13;

克隆网站以使用CSS进行培训

1 个答案: