CSS海军条码诊断

Question

我定制了我的肚脐，以适应适当的风格。我已经寻找了许多其他资源来帮助我解决这个问题，但我的技能还没有到位。第一个问题，我想知道在我的css，什么中心我的肚脐？是什么使我肚脐中的按钮专门指定到页面上的位置？我的另一个问题是，当你在边缘的按钮上悬停时，哪一段代码告诉导航栏有圆角边？

JSFddle：http://jsfiddle.net/r3cj2zkL/

代码：

body {
  width: 100%;
  max-width: 960px;
  margin: auto; }
nav {
  width: 100%;
  margin: 0px 0; }
nav ul {
  list-style: none;
  overflow: hidden; }
nav ul li {
  float: left;
  width: 20%; }
nav ul li a {
  text-align: center;
  padding: 8px 0;
   display: block;
  width: 100%;
  background: #fff; /* Old browsers */
  background: -moz-linear-gradient(top,  
    #fff 0%, #fff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%,#fff), 
    color-stop(100%,#fff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  
    #fff 0%,#fff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  
    #fff 0%,#fff 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #fff 0%,#fff 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#fff', 
    endColorstr='#fff',GradientType=0 ); /* IE6-9 */
  }
nav ul li a,
nav ul li a:focus,
nav ul li a:visited,
nav ul li a:hover,
nav ul li a:active {
  color: #000;
  text-decoration: none; }
nav ul li a:hover,
nav ul li a:active {
      background: #D3D3D3; /* Old browsers */
      background: -moz-linear-gradient(top,  
        #D3D3D3 0%, #D3D3D3 100%); /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, 
        color-stop(0%,#D3D3D3), 
        color-stop(100%,#D3D3D3)); /* Chrome,Safari4+ */
       background: -webkit-linear-gradient(top,  
        #D3D3D3 0%,#D3D3D3 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  
         #D3D3D3 0%,#D3D3D3 100%); /* Opera 11.10+ */
  background: linear-gradient(to bottom,  
    #D3D3D3 0%,#D3D3D3 100%); /* W3C, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#000', 
    endColorstr='#000',GradientType=0 ); /* IE6-9 */
  }
nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px; }
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px; }

谢谢你的帮助！！

Answer 1

我肚脐的中心是什么？

由于max-width: 960px和margin: auto位于body标记上，整个页面都是居中的。由于lis上设置的宽度，导航条占据了960px页面的整个宽度。

是什么使我肚脐中的按钮专门指定到页面上的位置？

每个li都有left: float，只要有足够的空间，它们就会水平地(从左边开始)“排列”在一起。因为有5，并且它们被设置为width: 20%，所以它们最终都在彼此的旁边。浮子需要一点时间才能理解，你可以读到更多的在MDN上。

什么代码告诉肚脐有圆角边？

CSS的最后一部分：border-top-left-radius: 8px;等。

Answer 2

1 -我肚脐的中心是什么？是什么使我的导航栏中的按钮专门分配到页面上的位置？

你的导航实际上不是中心。它在全宽度上展开。身体和margin: auto;在一起。其中的<li>项包含锚标记<a>。这些标记是用text-align: center;对齐文本的

nav ul li a {
    text-align: center;
    /*...*/

看到层次结构吗？a在li中，在ul中，在nav中。

2 -哪一段代码告诉导航栏有圆角边？

带有伪选择器的:first-child和:last-child

nav ul li:first-child a {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
nav ul li:last-child a {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}