html - CSS:关于如何创建此导航栏的最有效建议？

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 8 年前。

Improve this question

我正在尝试制作一个与图像上的导航栏完全一样的导航栏。我在 Photoshop 中制作了几秒钟，但用代码制作它并不容易。进步是我为它写了代码，但恐怕它没有响应。我的意思是它可能会在使用媒体查询进行大量调整后的某个时候出现。

创建此导航栏的方法是什么？您将如何创建 Logo 下方的小形状？我的方法是切片形状和切片 Logo 并对其进行编码，但它不是很灵敏。

enter image description here

HTML

<header>
<div class="float_center">
  <ul class="navigation">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li>
      <img class="shape" src="<?php echo site_url('assets/images/test.png');?>"/>
      <div class="logo"></div>
    </li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</div>
</header>

CSS

header 
{
    background-color:rgba(0, 0, 0, 0.74);
    height:100px;
} 

.float_center 
{
  float: right;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}

.float_center > .navigation 
{
  position: relative;
  left: 50%;
}


ul.navigation
{
  list-style-type: none;
  margin:0;
  padding:10px 0;
}
ul.navigation > li 
{
  float: left;
  list-style-type: none;
  margin: 0 6px;
}
ul.navigation > li > a 
{
  display: block;
  height: 26px;
  line-height: 70px;
  font-family: "American Captain";
  font-size: 20px;
  letter-spacing: 2px;
  color: #FFF;
  text-transform: uppercase;
  padding: 0px 50px;
}

ul.navigation > li > a:hover, a:active, a:focus
{
  color: #d43100;
}

.logo 
{
    background: url("../images/logo.png");
    background-repeat:no-repeat;
    background-size: 150px;
    height:150px;
    display:block;
    width:150px;
    margin-top:6px;
    padding: 0;
}

.shape
{
    position: absolute;
    width:28%;
    top: 101px;
    left: 31.5%;
    z-index: -1;
}

最佳答案

第一次迭代

演示:http://codepen.io/dcdev/full/Jhtxv/

#nav { position:absolute;top:0;height:50px;background:#666; width:100%;}
ul { list-style:none;display:inline;width:100%;margin:0 5%; }
ul li { display:inline-block; width:10%;border:1px solid #000;}
.bump { top:0;left:50%;width:25%;height:65px;border-radius:50%;background:#666;font-size:50px;line-height:70px;color:yellow;text-align:center;line-height:50px; }

<div id="nav">
<ul>
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li class="bump">M</li>
  <li>Menu 3</li>
  <li>Menu 4</li>
</ul>
</div>

第二次迭代

基于 kshay 的回答，我认为这是一个比我之前匆忙输入的示例更好的解决方案。我采用了他的示例并本着使其稍微更有效率的精神进一步改进了它。

演示:http://cssdeck.com/labs/full/z4rbbe47

#navbar{padding:25px 30px 0;width:500px;height:40px;background:#808080;position:absolute;}
#navbar a{width:80px;background:#808080;float:left;text-decoration:none;text-align:center;}
#navbar a:nth-child(n+3){float:right;}
.circleimage{border-radius:50%;width:150px;height:65px;background-color:#808080;margin-left:175px;}
.circleimage img{margin:0 auto;display:block;position:relative;bottom:10px;}

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <div class="circleimage">
      <img src="https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283" />
    </div>
</div>

第三次迭代

决定今天晚上再多花点功夫，我想我已经差不多完美了..

演示:http://cssdeck.com/labs/full/z4rbbe47

#navbar:before { content:'\A';display:block;width:100vw;height:65px;position:absolute;background:#808080;top:0;z-index:-1; }
#navbar:after { content:url(https://d13yacurqjgara.cloudfront.net/users/305445/avatars/small/m-icon-sml.png?1364435283);display:block;height:85px;position:absolute;background:#808080;top:0;z-index:1;border-radius:50%;width:175px;height:80px;background-color:#808080;margin:0 auto;left:0;right:0; }
#navbar { padding:20px 0 0;width:100%;height:40px;background:#808080;text-align:center; }
#navbar a { width:25%;margin:0 40px;background:#808080;text-decoration:none;color:#fff;font-weight:600;letter-spacing:0.025em;text-transform:uppercase; }
#navbar a:nth-child(2) { margin-right:100px }
#navbar a:nth-child(3) { margin-left:100px }
a:hover,a:active,a:focus,a:visited { text-decoration:none;outline:none; }

<div id="navbar">
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
</div>

全宽:

enter image description here