克隆一个网站来训练CSS

guicsvcw 于 2023-10-21 发布在其他

关注(0)|答案(1)|浏览(85)

我正在复制一个网站来使用CSS进行训练（我正在尝试重现这个：click here to see the image）但我在复制边框时遇到问题，结果如下：click here to see，这是我写的代码：

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

我可以有你的帮助吗？

css

来源：https://stackoverflow.com/questions/47369107/cloning-a-website-to-train-with-css

1条答案

按热度按时间

k2arahey1#

当我在Chrome中查看这段代码时-我可以看到.topbar-section的左边框。
当你说你有问题的时候-你能告诉我们发生了什么吗？是没有显示，还是显示不正确？
从我所看到的-主要的问题是，你做了2个单独的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>

赞(0）回复(0）举报 2023-10-21

我来回答

克隆一个网站来训练CSS

1条答案

相关问题

热门标签

最新问答