第一个项目菜鸟问题

Question

我最近开始尝试学习网页设计，并且已经投入到我的第一个项目中。我在 photoshop 中创建了一个模板，但在我的 visual studio 代码中复制它时遇到问题。 任何帮助都会很棒。我已将我的问题包含在 CSS 评论中。也，不是很相关，但是，过去 3-4 天的这种新学习体验非常棒而且非常具有挑战性！如果可能的话，会喜欢一些通用的编码技巧。很抱歉成为一个绝对的菜鸟。 My first project ideal outcome

body {
  margin: 0;
  background-color: #282828;
}
/* how can I make the navbar go a few pixels down? like in the photo */
.navbar {
  width: 100%;
  float: left;
  background-color: #cb209d;
}
/* can't make the searchbox go to the left side of the navbar :( */
.searchbox {
  float: left;
}
/* how am I supposed to center the social logos without using position: absolute? */
li {
  list-style: none;
  float: right;
  border-right: 1px solid #282828;
  display: inline-block;
  font-size: 35px;
  padding: 0px 25px;
  color: #282828;
}
/*  Can't seem to fix these vertical dividers... I know, I'm a handful :/ */
li:last-child {
  border-right: none;
}
#u2b {
  border-right: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script
      src="https://kit.fontawesome.com/f77b4d6781.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="style.css" />

    <title>first project</title>
  </head>
  <body>
    <!-- top navigation bar -->
    <div class="navbar">
      <ul>
        <li id="u2b"><i class="fab fa-youtube" aria-hidden="true"></i></li>
        <li><i class="fab fa-facebook" aria-hidden="true"></i></li>
        <li><i class="fab fa-instagram" aria-hidden="true"></i></li>
        <li>
          <input
            class="searchbox"
            type="text"
            name=""
            placeholder="Search me fam"
            id=""
          />
        </li>
      </ul>
    </div>
  </body>
</html>

Answer 1

如何让导航栏向下移动几个像素？喜欢照片吗？
Margin or Paddings，如何取舍？考虑您的 HTML 布局。

不能让搜索框转到导航栏的左侧吗？
也研究一下 flexbox and study your layout, it's widely supported。

最后 3 个答案也可以通过 HTML 布局和 flexbox 的良好使用来回答。

我建议您也研究一下显示器属性

阅读 CSS 技巧文章后，尝试 Flexbox Froggy

第一个项目菜鸟问题

First project rookie problems

html

css

project

navbar