无法摆脱黑条

时间：2019-03-04 06:01:21

标签： html css

该网站的顶部有一个黑色的栏，我无法理解它的来源。如果我使用float：left，则不会出现，将导航栏放在左侧而不是display：inline-block将其居中。我想使导航栏在背景顶部透明，而不是黑栏。

“ Home”和其他菜单之间也有很小的空间，我也不知道它来自哪里。我对html和CSS还是陌生的，请帮助我。预先感谢！

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 10px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
}

.first-level > li:hover {
	background-color: teal;
}

.second-level {
	display: none;
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

3 个答案:

答案 0 :(得分：0)

增加第一级ul的填充。它将隐藏溢出的按钮

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 10px;
  padding:12px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
  
}

.first-level > li:hover {
	background-color: teal;
  
}

.second-level {
	display: none;
  
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

答案 1 :(得分：0)

将top: 10px更改为top :0;

在.first级别上添加display: flex和justify-content: center和background: orange;

删除显示：内联块；来自.first-level li 

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'), url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'), url('space-mono-v4-latin-regular.woff2') format('woff2'), url('space-mono-v4-latin-regular.woff') format('woff'), url('space-mono-v4-latin-regular.ttf') format('truetype'), url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Space Mono', monospace;
  background: #000;
}

header {
  padding: 10px 100px;
  box-sizing: border-box;
}

section {
  width: 100%;
  height: 100vh;
}

section.sec1 {
  background: orange;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
}

section.sec2 {
  padding: 100px;
  box-sizing: border-box;
  height: auto;
}

section.sec2 h2 {
  font-size: 3em;
  margin: 0;
  padding: 0 0 20px;
  color: #fff;
}

section.sec2 p {
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  color: #fff;
}

section.sec3 {
  background: url(bg2.jpg);
  background-size: cover;
}

.first-level {
  list-style: none;
  text-align: center;
  padding: 0px;
  margin: 0px;
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  background: orange;
}

.first-level a {
  text-decoration: none;
  line-height: 40px;
  color: #fff;
}

.first-level li {
  position: relative;
  text-align: center;
  height: 40px;
  width: 160px;
  background: rgba(0, 0, 0, 0.4);
}

.first-level>li:hover {
  background-color: teal;
}

.second-level {
  display: none;
}

.third-level {
  display: none;
}
<ul class="first-level">
  <li><a href="#">HOME</a></li>
  <li><a href="#">LAB 1-5</a>
    <ul class="second-level">
      <li><a href="#">LAB 1</a></li>
      <li><a href="#">LAB 2</a></li>
      <li><a href="#">LAB 4</a></li>
      <li><a href="#">LAB 5</a></li>

    </ul>
    <li><a href="#">LAB 6-8</a>
      <ul class="second-level">
        <li><a href="#">LAB 6</a></li>
        <li><a href="#">LAB 7</a></li>
        <li><a href="#">LAB 8</a></li>

      </ul>
      <li><a href="#">LAB 9-11</a>
        <ul class="second-level">
          <li><a href="#">LAB 9</a></li>
          <li><a href="#">LAB 10</a></li>
          <li><a href="#">LAB 11</a></li>

        </ul>
        <li><a href="#">LAB 12-14</a>
          <ul class="second-level">
            <li><a href="#">LAB 12</a></li>
            <li><a href="#">LAB 13</a></li>
            <li><a href="#">LAB 14</a></li>

          </ul>
</ul>


<section class="sec1"></section>

<section class="sec2">
  <h2>CSS Sticky Navigation Bar</h2>
  <p>Insert text here.</p>

</section>

<section class="sec3"></section>

答案 2 :(得分：0)

更改first-level的背景颜色，因为它的位置是粘性的，因此请使用body和top：0px的CSS；并在li元素font-size：0px到first-level和五个font-size到first-level li

之间删除空格 

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url('space-mono-v4-latin-regular.eot');
  src: local('Space Mono'), local('SpaceMono-Regular'),
       url('space-mono-v4-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('space-mono-v4-latin-regular.woff2') format('woff2'),
       url('space-mono-v4-latin-regular.woff') format('woff'),
       url('space-mono-v4-latin-regular.ttf') format('truetype'),
       url('fonts/space-mono-v4-latin-regular.svg#SpaceMono') format('svg');
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Space Mono', monospace;
	background: #000;
}

header {
	padding: 10px 100px;
	box-sizing: border-box;
}

section {
	width: 100%;
	height: 100vh;
}

section.sec1 {
	background: orange;
	background-size: cover;
	background-position: top;
	background-attachment: fixed;
}

section.sec2 {
	padding: 100px;
	box-sizing: border-box;
	height: auto;
}

section.sec2 h2 {
	font-size: 3em;
	margin: 0;
	padding: 0 0 20px;
	color: #fff;
}

section.sec2 p {
	font-size: 1.2em;
	margin: 0;
	padding: 0;
	color: #fff;
}

section.sec3 {
    background: url(bg2.jpg);
    background-size: cover;
}

.first-level {
	list-style: none;
	text-align: center;
	padding: 0px;
	margin: 0px;
	position: sticky;
	top: 0px;
  background:orange;
  font-size:0px;
}

.first-level a {
	text-decoration: none;
	line-height: 40px;
	color: #fff;
}

.first-level li {
	position: relative;
	text-align: center;
	display: inline-block;
	height: 40px;
	width: 160px;
	background: rgba(0,0,0,0.4);
  font-size:12px;
}

.first-level > li:hover {
	background-color: teal;
}

.second-level {
	display: none;
}

.third-level {
	display: none;
}
<!DOCTYPE html>
<html>
    <head>
        <title>NavigationBar</title>
        <link rel="stylesheet" href="newnavbar.css" type="text/css">
    </head>
  <body>

    <ul class ="first-level">
        <li><a href="#">HOME</a></li>
   	    <li><a href="#">LAB 1-5</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 1</a></li>                    
                <li><a href ="#">LAB 2</a></li>                    
                <li><a href ="#">LAB 4</a></li>                    
                <li><a href ="#">LAB 5</a></li>
                    
            </ul>
	      <li><a href="#">LAB 6-8</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 6</a></li>                    
                <li><a href ="#">LAB 7</a></li>                   
                <li><a href ="#">LAB 8</a></li>
                    
            </ul>
        <li><a href="#">LAB 9-11</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 9</a></li>                    
                <li><a href ="#">LAB 10</a></li>                    
                <li><a href ="#">LAB 11</a></li>
                    
            </ul>
        <li><a href="#">LAB 12-14</a>
            <ul class ="second-level">
                <li><a href ="#">LAB 12</a></li>                    
                <li><a href ="#">LAB 13</a></li>          
                <li><a href ="#">LAB 14</a></li>
                    
              </ul>
    </ul>


    <section class="sec1"></section>

    <section class="sec2">
      <h2>CSS Sticky Navigation Bar</h2>
      <p>Insert text here.</p>

    </section>

    <section class="sec3"></section>

  </body>
</html>

相关问题
最新问题