用导航栏创建横幅？

时间：2017-07-22 04:18:55

标签： css background-image banner

在花了一年多的学习之后，尝试做我的第一个个人项目，感觉我什么都没学到。

出于某种原因，创建横幅证明非常困难。

首先，我想将导航栏标记到横幅的底部。我放弃了这一点，现在我正试图让我的旗帜以最基本的方式运作。

如果我将图像与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，所以这里有很多尚未使用的东西。

1 个答案:

答案 0 :(得分：1)

这里有一些问题。首先，你已经在身体部分创建了两次头部。将头部保持在一起，有一个头部和一个身体部分。不止一次打开和关闭这些部分会导致问题。

至于背景图片，你的no-repeat（等）之前有一个分号，在你的who / what / where css中;如果你删除这个半冒号，它就可以了。

您的css中还有2个其他小问题;它是text-align而不是align-text，也只用object-border替换border

编辑：您的主要问题是您有background-image:，其中css中应该只有background:（因为您拥有所有信息而不仅仅是图片网址）。此外，我从小图像中删除了背景大小：封面，因为这些将覆盖设置为覆盖的主背景图像。您的大背景图片在网址括号中的文件路径周围没有引号。您的banner-image也是一个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>

相关问题
最新问题