創建橫幅帶導航欄？

花了一年多的時間學習之後，嘗試做我的第一個獨唱項目，感覺就像我什麼都沒學到。創建橫幅帶導航欄？

出於某種原因，創建橫幅非常困難。

起初，我想標記我的導航欄到我的橫幅底部。我放棄了這一點，現在只是試圖讓我的旗幟以最基本的方式工作。

如果我把圖像與HTML內聯，它保持在一切的最前沿，並與頁面滾動。沒有bueno。 background-image根本不工作。

我希望它留在頁面的頂部。我希望導航欄保持在用戶可見區域的頂部（所以它會隨頁面一起滾動）。

我已經在這上面花了三個小時了！

這裏是我的代碼：

<!DOCTYPE html> 
<html > 
<head> 
    <meta charset="UTF-8"> 
    <title>Teo Hannum | Teacher of the Alexander Technique</title> 
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.0.0/bootstrap-social.min.css'> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 

<head> 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 
    <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> 
    <title>Teo Hannum | Teacher of the Alexander Technique</title> 
</head> 

<!-- MASTHEAD --> 
<body> <!-- data-spy="scroll" data-target=".navbar" data-offset="0"> --> 
    <div id="page"> 
     <header role="banner"> 
      <!-- NAVBAR --> 
      <nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation"> 
       <div class="container-fluid"> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a> 
       </div> 
        <ul class="nav navbar-nav navbar-right" id="topMenu"> 
         <li class="active"> 
          <a href="#who">Who</a> 
          </li> 
         <li> 
          <a href="#what">What</a> 
         </li> 
         <li> 
          <a href="#where">Where</a> 
         </li> 
        </ul> 
       </div> 
      </nav> 
      <div id="brand"> 
       <p>Move with Fluidity and Intention</p> 
      </div> 
     </header> 
     <div class="bannerimage"> 
      <div class="bannerWrapper"> 
       <div class="bannerText"> 
        <p>Move with Fluidity and Intention</p> 
       </div> 
      </div> 
     </div> 
      <!-- WHO SECTION --> 
      <div id="who"> 

      </div> 

      <!-- WHAT SECTION --> 
      <div id="what"> 
      <article> 
       <div class="portblock"> 
        <h1>Portfolio</h1> 
        <p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity. 

      </article> 

        <div class="container-fluid img-thumbnail"> 
         <div class="row"> 
          <img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081"> 
          <img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067"> 
          <img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044"> 
          <img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012"> 
         </div> 
        </div> 
       </div> 
      </div> 
     <div id="where"> 

     </div> 
    </div> 
</body> 


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script> 
<script src="js/index.js"></script> 

</body> 
</html> 


body{ 
    font-family:'Open Sans Condensed', sans-serif; 
    color:white; 
    margin:0; 
    padding:0; 
} 

h1{ 
    padding: 0; 
    margin-top: -1%; 
    text-align: center; 
    color:black; 
    font-size: 6.5vw; 

} 

p{ 
    font-family: 'EB Garamond', serif; 
    font-size: 2.5vw; 

} 

header { 
    height: 70px; 
    position: fixed; 
    top: 0; 
    transition: top 0.2s ease-in-out; 
    width: 100%; 
    font-size: 12px; 
    line-height: 14px; 
    text-transform: uppercase; 
    font-weight: 500; 
    letter-spacing: 2px; 
    z-index: 66666; 

} 

.navbar-nav{ 
    font-family:'Open Sans Condensed', sans-serif; 
    font-size: 2.0em; 

} 

.navbar-brand{ 
    font-family:'Open Sans Condensed', sans-serif; 
    font-size:2.0em; 
} 

/* MASTHEAD */ 
#masthead { 
    position: relative; 

} 

.custom-header { 
    display: block; 
    height: auto; 
} 

#mast-img { 
    max-width: 100%; 
    display: block; 
    height: auto; 
    position: fixed; 
} 

#brand { 
    z-index: 100; 
    position: absolute; 
    color: white; 
    font-size: 40px; 
    font-weight: bold; 
    line-height: 50px; 
    left: 150px; 
    top: 325px; 
} 

#masthead .wrap { 
    position: relative; 
} 

#topMenu { 
    z-index: 1; 
} 

/* END MASTHEAD */ 

#page { 
    position: relative; 
} 

#bannerimage { 
    width: 100%; 
    background-image: url(https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg); 
    height: 405px; 
    background-color: purple; 
    background-position: center; 
} 

.bannerWrapper { 
    width: 94%; 
    max-width: 960px; 
    margin: 0px auto; 
} 



.btn:hover{ 
    color:#FEEE8B; 

} 

.btn:active{ 
    color:white; 

} 

.btn{ 
    align-text: center; 
    margin-bottom:3%; 
    margin-right:5px; 
    margin-left:5px; 
    border-radius: 0 !important; 
    font-size:1.5vw; 
    color:white; 

} 

article{ 
padding-bottom:10px; 
} 

.block{ 
    background-color:rgba(157,178,197,.6); 
    opacity:1; 
    padding:1em; 
    width:50%; 
    height:12%; 
    margin-right:auto; 
    margin-left:auto; 
    margin-top:10%; 
    object-border:10px; 

} 

.portblock{ 
    text-align:right; 
    padding:1em; 
    background-color:rgba(157,178,197,.6); 
    opacity:1; 
    width:50%; 
    height:12%; 
    margin-top:10%; 
    margin-right:1%; 
    margin-left:auto; 
    object-border:10px; 


} 

.portrait{ 
    width:40%; 
    height:auto; 
    border-radius:50%; 
    margin-bottom:3%; 
    margin-top:3%; 
    opacity:.9; 

} 

.img-thumbnail{ 
    background:rgba(157,178,197,.6); 
    margin-top:8%; 
    padding:1em; 
    margin-right:1%; 
    margin-left:1%; 

} 

#who{ 
    background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg?X-Amz-Date=20161019T232852Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=3b5a5267c478a5ea16ade4496e34221342748dbda8813840fa9867fe3270b6f7&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D"); 
    no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:800px; 
    padding: 1px; 

} 

#what{ 
    background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D"); 
    no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:800px; 
    padding: 1px; 

} 

#where{ 
    background-image:url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg?X-Amz-Date=20161019T232942Z&X-Amz-Expires=300&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Signature=2c6a81a324d7a3ae6587b00c8cfba95f6620b9ec47222caa643963bfbae97b76&X-Amz-Credential=ASIAIK2R6BOZXGQHU5CQ/20161019/us-west-2/s3/aws4_request&X-Amz-SignedHeaders=Host&x-amz-security-token=FQoDYXdzEDkaDN3PwRF5BiQ0M7XC3CL6Aal8I83b8wlOIm5EBzQqiMdVj0tSmaoJn1a8DHvHD7bWWs47ywISxJpL95AavWhli2XQ3z4WgaPLtJz5BIoPJUFRHluYm5DH46Q62nXJIDY%2BJ/GrScPriWBko6yd/9YQ4A/7GuFpH6z/fG2ZenPcACf9hkpUj5aKD72scXWuANgZbF4aN5xWQBpxYteRfnh3zio86PaG84yfMr3X5R6GVmlQMAqFFB9OYhAzH7mkCwKZYXT6Hb3IdxNpiaYqxgUsvl3G4Vdi8vg813n78dwY97hXkwWSaItLh0Nkq7JM%2BQ/mIisjgrm1ntZ3kEb%2Bbk2nUmhRr2EtTHC4cqwomIGgwAU%3D"); 
    no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    height:800px; 
    padding: 1px; 

}

請注意，我複製粘貼大部分來自另一個項目的CSS，所以有很多尚未將要使用的東西在這裏。

來源

2017-07-22 David

這裏有幾個問題。首先，您在身體部分創建了兩次頭部部分。將頭部保持在一起，有一個頭部和一個身體部分。多次打開和關閉這些部分會導致問題。

至於背景圖片，你在你的no-repeat（etc）之前有一個分號，在你的who/what/where css;如果你刪除這個分號，它會起作用。

你的css中還有2個其他小問題;它text-align不align-text，也只有border

編輯替換object-border：你的主要問題是，你有background-image:那裏應該在CSS一直只是background:（因爲你必須有所有的信息，而不僅僅是圖像URL）。我還從小圖像中刪除了背景大小的封面，因爲這些將覆蓋被設置爲覆蓋的主背景圖像。您的大背景圖片在url括號內的文件路徑周圍沒有引號。此外，您的橫幅圖像是一個id，而不是最初在HTML中調用的類。

我創建了一個片段，所以如果你運行它，你可以看到輸出。

希望這會有所幫助。

body { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h1 { 
 
    padding: 0; 
 
    margin-top: -1%; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 6.5vw; 
 
} 
 

 
p { 
 
    font-family: 'EB Garamond', serif; 
 
    font-size: 2.5vw; 
 
} 
 

 
header { 
 
    height: 70px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
    font-size: 12px; 
 
    line-height: 14px; 
 
    text-transform: uppercase; 
 
    font-weight: 500; 
 
    letter-spacing: 2px; 
 
    z-index: 66666; 
 
} 
 

 
.navbar-nav { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-size: 2.0em; 
 
} 
 

 
.navbar-brand { 
 
    font-family: 'Open Sans Condensed', sans-serif; 
 
    font-size: 2.0em; 
 
} 
 

 

 
/* MASTHEAD */ 
 

 
#masthead { 
 
    position: relative; 
 
} 
 

 
.custom-header { 
 
    display: block; 
 
    height: auto; 
 
} 
 

 
#mast-img { 
 
    max-width: 100%; 
 
    display: block; 
 
    height: auto; 
 
    position: fixed; 
 
} 
 

 
#brand { 
 
    z-index: 100; 
 
    position: absolute; 
 
    color: white; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
    line-height: 50px; 
 
    left: 150px; 
 
    top: 325px; 
 
} 
 

 
#masthead .wrap { 
 
    position: relative; 
 
} 
 

 
#topMenu { 
 
    z-index: 1; 
 
} 
 

 

 
/* END MASTHEAD */ 
 

 
#page { 
 
    position: relative; 
 
} 
 

 
#bannerimage { 
 
    width: 100%; 
 
    height: 405px; 
 
    background-image: url('https://static.pexels.com/photos/486895/pexels-photo-486895.jpeg'); 
 
    background-repeat:no-repeat; 
 
    background-position: center center 
 
    background-size:cover; 
 
} 
 

 
.bannerWrapper { 
 
    width: 94%; 
 
    max-width: 960px; 
 
    margin: 0px auto; 
 
} 
 

 
.btn:hover { 
 
    color: #FEEE8B; 
 
} 
 

 
.btn:active { 
 
    color: white; 
 
} 
 

 
.btn { 
 
    text-align: center; 
 
    /*not align-text*/ 
 
    margin-bottom: 3%; 
 
    margin-right: 5px; 
 
    margin-left: 5px; 
 
    border-radius: 0 !important; 
 
    font-size: 1.5vw; 
 
    color: white; 
 
} 
 

 
article { 
 
    padding-bottom: 10px; 
 
} 
 

 
.block { 
 
    background-color: rgba(157, 178, 197, .6); 
 
    opacity: 1; 
 
    padding: 1em; 
 
    width: 50%; 
 
    height: 12%; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
    margin-top: 10%; 
 
    border: 10px; 
 
} 
 

 
.portblock { 
 
    text-align: right; 
 
    padding: 1em; 
 
    background-color: rgba(157, 178, 197, .6); 
 
    opacity: 1; 
 
    width: 50%; 
 
    height: 12%; 
 
    margin-top: 10%; 
 
    margin-right: 1%; 
 
    margin-left: auto; 
 
    border: 10px; 
 
    /*it's just border, not object-border*/ 
 
} 
 

 
.portrait { 
 
    width: 40%; 
 
    height: auto; 
 
    border-radius: 50%; 
 
    margin-bottom: 3%; 
 
    margin-top: 3%; 
 
    opacity: .9; 
 
} 
 

 
.img-thumbnail { 
 
    background: rgba(157, 178, 197, .6); 
 
    margin-top: 8%; 
 
    padding: 1em; 
 
    margin-right: 1%; 
 
    margin-left: 1%; 
 
} 
 

 
#who { 
 
    background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1422394882588-508654c3f5d4.jpeg") no-repeat center center fixed; 
 
    /*the reason why the bg-image wasn't working was you had a semi-colon before no-repeat*/ 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    /*background-size: cover;*/ 
 
    height: 800px; 
 
    padding: 1px; 
 
} 
 

 
#what { 
 
    background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    /*background-size: cover;*/ 
 
    height: 800px; 
 
    padding: 1px; 
 
} 
 

 
#where { 
 
    background: url("https://s3-us-west-2.amazonaws.com/codepen-portfolio/photo-1467348733814-f93fc480bec6.jpeg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    /*background-size: cover;*/ 
 
    height: 800px; 
 
    padding: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="css/style.css"> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'> 
 
<link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> 
 
<title>Teo Hannum | Teacher of the Alexander Technique</title> 
 

 

 
<!-- MASTHEAD --> 
 

 
<body> 
 
    <!-- data-spy="scroll" data-target=".navbar" data-offset="0"> --> 
 
    <div id="page"> 
 
    <header role="banner"> 
 
     <!-- NAVBAR --> 
 
     <nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
      <a class="navbar-brand" href="">Teo Hannum | Teacher of the Alexander Technique</a> 
 
      </div> 
 
      <ul class="nav navbar-nav navbar-right" id="topMenu"> 
 
      <li class="active"> 
 
       <a href="#who">Who</a> 
 
      </li> 
 
      <li> 
 
       <a href="#what">What</a> 
 
      </li> 
 
      <li> 
 
       <a href="#where">Where</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
     <div id="brand"> 
 
     <p>Move with Fluidity and Intention</p> 
 
     </div> 
 
    </header> 
 
    <div id="bannerimage"> 
 
     <div class="bannerWrapper"> 
 
     <div class="bannerText"> 
 
      <p>Move with Fluidity and Intention</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- WHO SECTION --> 
 
    <div id="who"> 
 

 
    </div> 
 

 
    <!-- WHAT SECTION --> 
 
    <div id="what"> 
 
     <article> 
 
     <div class="portblock"> 
 
      <h1>Portfolio</h1> 
 
      <p>Utilizing the "less is more" mindset, I create focused content that delivers results while developing brand culture and identity.</div> 
 

 
     </article> 
 

 
     <div class="container-fluid img-thumbnail"> 
 
     <div class="row"> 
 
      <img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1081"> 
 
      <img class="img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1067"> 
 
      <img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1044"> 
 
      <img class="img-responsive img-responsive col-xs-6 col-sm-3" src="https://unsplash.it/320/150?image=1012"> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="where"> 
 

 
    </div> 
 

 
</body> 
 

 

 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js'></script> 
 
<script src="js/index.js"></script>

來源

2017-07-22 08:14:08

不幸的是，你的代碼片段看起來很像我所看到的在我結束。我也做了一些改變，但仍然不起作用。 – David

創建橫幅帶導航欄？

回答

相關問題