Question

我对StackOverflow非常陌生，而对HTML / CSS则相对较新。正如标题所示，我的问题是如何仅用两个按钮“菜单”和“联系我们”制作导航栏，菜单在左侧，右侧与我们联系，中间放置一个矩形徽标？我一直在网上搜索，总有一些地方卡住，所以我必须重做。我正在使用引导程序，我知道要对齐，我需要将每个浮动到其预期位置。但是由于我是新来的，所以总会有一些我被卡住的概念。有人可以告诉我如何构建此导航栏吗？有无Bootstrap。

Answer 1

在这里，您可以采用以下方式开始：NavBar

或者，您也可以按照上述指南查看此代码段：

您可以根据需要编辑此NavBar，如果您想了解有关FlexBox的更多信息，建议您阅读这篇文章。

main {
   width: 70%
}
ul {
  padding: 0;
  list-style: none;
}
.twitter {
  display: flex;
}
.twitter__bird {
  margin-left: auto;
  margin-right: auto
}

.twitter {
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  color: rgba(117,117,117 ,1);
  box-shadow: 5px 10px 20px -20px rgba(85,172,238 ,1);
}
.twitter li {
  cursor: pointer;
}
.twitter li:hover{
  color: rgba(85,172,238 ,1);
}
.twitter__bird {
  color: rgba(85,172,238 ,1);
  font-size: 1.3em;
}
.twitter li:not(:last-child):not(.twitter__bird) {
  margin-right: 10px;
}
.twitter li  i:not(.fa-twitter):not(.fa-search):not(.fa-user-circle-o) {
  margin-right: 3px;
}
.twitter li > button {
  font-size: 0.8em;
  border: 0;
  background: rgba(85,172,238 ,1);
  color: #fff;
  border-radius: 100px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<ul class="twitter" role="navigation">
  <li><i class="fa fa-home"></i>Home</li>
  <li class="twitter__bird"><i class="fa fa-twitter"></i></li>
  <li><i class="fa fa-users"></i>Contact Us</li>
</ul>

导航栏只有两个按钮，一个在左侧，一个在右侧，中间是矩形徽标？

1 个答案: