使用边框线创建导航栏

Question

所以，我对html很新，所以如果这是一个noob问题，我很抱歉，但我想建立一个基于这个概念艺术的网站，我把它放在Photoshop上。我知道如何制作一个导航栏，但不知道如何制作它，所以它只是围绕项目的轮廓，如图所示。我的代码会是什么样子，所以它顶部没有任何背景或轮廓。谢谢！

网站概念

Answer 1

执行此操作的正确方法是使用C规则。以下是他们的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/border

Answer 2

您可以向导航栏添加底部边框，并为每个链接添加右边框。您的代码将如下所示：

＆＃13;

＆＃13;

body {
  background-color: black;
}

.nav-container {
  border-bottom: 1px solid #00933d;
  padding: 8px;
}
.nav-item {
  color: white;
  size: 14pt;
  padding: 10px 30px;
  border-right: 1px solid #00933d;
}

＆＃13;

<nav class="nav-container">
  <span class="nav-item">HOME</span>
  <span class="nav-item">CONTACT</span>
</nav>

＆＃13;

＆＃13;

＆＃13;

这应该给你一些基本的想法，你可以进一步自定义。

Answer 3

我将border-bottom和border-right用于链接，然后使用伪类border-right从最后一个链接中删除last-child。对于圆角，您可以使用border-radius属性。

有用的链接：

• border property
• :last-child伪类
• border-radius property

.navbar {
    background-color: #121212;
    width: 100%;
    height: 100px;
    display: table;
    table-layout: fixed;
}
.navcell {
    display: table-cell;
    color: #fff;
    font-family: sans-serif;
    text-align: center;
    vertical-align: middle;
}
.navcell span {
    width: 100%;
    height: 20px;
    border-bottom: 1px solid #2c6133;
    border-right: 1px solid #2c6133;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.navcell:last-child span {
    border-right: none;
}
.navactive span {
    border:none;
    background-color: #2c6133;
    height: 45px;
    padding: 13px;
    border-radius: 10px;
}
.navcell span:hover {
    color: #fff267;
    cursor: pointer;
}

<div class="navbar">
    <div class="navcell navactive"><span>JOIN NOW</span></div>
    <div class="navcell"><span>HOME</span></div>
    <div class="navcell"><span>CONTACT</span></div>
    <div class="navcell"><span>ABOUT US</span></div>
    <div class="navcell"><span>PORTFOLIOS</span></div>
    <div class="navcell"><span></span></div>
</div>

Answer 4

这样的东西？

CSS：

body {background-color: #000000; padding: 0; margin: 0;;}
.btn1  {color: #FFFFFF; background-color: #347235; padding: 10px 35px; border-radius: 10px;}
.nav  {margin-top: 45px;}
#bot  { border-bottom: 2px solid #347235;}
a  {text-decoration: none; color: #FFFFFF; padding-right: 40px; padding-left: 40px; border-right: 2px solid #347235;}

HTML：

<div class="nav">
<span id="bot"><a class="btn1" href="#">JOIN NOW</a> <a href="#">HOME</a> <a href="#">CONTACT</a> <a href="#">ABOUT US</a> <a href="#">PORTFOLIOS</a></span>
</div>