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

Question

我正在复制一个网站来使用 CSS 进行训练（我正在尝试重现此内容：），但我在复制边框时遇到问题，这就是结果：这是我编写的代码:

<!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>

请问您可以帮忙吗？

Answer 1

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

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

据我所知 - 主要问题是你制作了 2 个单独的 div，而它应该是一个 div 位于另一个 div 中。

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

<!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>

Answer 2

我无意中发现了这个潜在的新工具，在紧急期限内克隆网站很方便。它从任何网站复制 CSS 和 HTML 并转换为 Elementor 或其他页面构建器。 https://youtu.be/y6rViyiQN3U?si=5cvUPBpFC1xwPeV1 https://softlite.io/docs/clonewebx/

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

问题描述投票：0回答：2

2个回答

最新问题

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

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2