想要使用引导程序放置一个底部折叠的标题文本横幅

Want to put an head text banner with collapsing bottom with use of bootstrap

本文关键字：折叠底部一个标题文本引导程序更新时间：2023-09-26

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
@import 'https://fonts.googleapis.com/css?family=Pattaya';
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);
h1 {
font-family: 'Pattaya', sans-serif;
text-shadow:5px 5px 10px #663300;
}
h2 {
font-family: 'Open Sans Condensed', sans-serif;
}
p1 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
}
p2 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p3 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p4 {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 9px 15px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 18px;
  font-family: 'Open Sans Condensed', sans-serif;
}
li {
  float: left;
  border-right: 0px solid #bbb;
}
li:last-child {
  border-right: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 19px 10px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #112;
}
.active {
  background-color: #990000;
}
body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
ul.topnav li {
  float: left;
}
ul.topnav li.right{
  float: right;
  }
ul.topnav li a {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 10.5px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  font-family: 'Dosis', sans-serif;
}
ul.topnav li a:hover {
  background-color: #990000;
}
ul.topnav li active {
  background-color: #990000;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(.mob) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  ul.topnav li.right{
  float: none;
    text-align: center;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: fixed;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  ul.topnav.responsive li.right{
      position: absolute;
      top:0;
      left: 50%;
      transform: translate(-50%, 0);
  }
}
.videoWrapperOuter {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  max-width: 40.7em;
  margin: 0 auto;
}
a:link {
text-decoration: none;
color:gray
}
a:visited {
text-decoration: none;
color:gray
}
a:hover {
text-decoration: none;
color: red
}
a:active {
text-decoration: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meata charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="Beats,Hip-Hop,Rap,Stockholm,Sweden">
<title>Statos Productions</title>
</head>
<body>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<ul class="topnav" id="myTopnav">
  <li class="active mob">
    <a href="index.html">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
  </li>
  <li><a href="beats.html">Beats</a>
  </li>
  <li><a href="history.html">History</a>
  </li>
  <li><a href="studio.html">Studio</a>
  </li>
  <li><a href="contact.html">Contact</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:17px;" onclick="myFunction()">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </a>
  </li>
  <li class="right mob"><p4>Statos Productions</p4></li>
</ul>
<div style="padding:10px;margin-top:30px;background-color:#FFF;height:1500px;">
<h2>Confidence and Dj Technic made an track with the legendary Edo G!</h2>
<p3>4 of August, 2016</p3>
</br>
<p1>I only knew Dj Technic over the internet. He seem an nice dude. He and his friend Confidence, made an track togheter with G. Dot & Born. featuring the legendary rapper Edo G! First time I ever heard of Edo G, was his song "I got to have it",
way back in the 1991. So I was suprised that Dj Technic made skratches and Confidence on the beat, with there latest song "Makin' Tracks":
</p1>
</br>
</br>
<center>
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/F8McUSZkE5k"
frameborder="0" allowfullscreen></iframe>
 </div>
</div>
</center>
<h2>I'm on a music video!</h2>
<p3>4 of August, 2016</p3>
</br>
<p1>Couple of months ago, Algato called me, to appering on a musicvideo that he casted, togheter with Critical. So I dressed up and he took the best part of me in the video! His song is "Mary" and you can see my face at 1:07.
</br>
</br>
</p1>
<center>
<div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/QMtS6EiccGo"
frameborder="0" allowfullscreen></iframe>
 </div>
</div>
</center>
<h2>Im back!</h2>
<p3>3 of August, 2016</p3>
</br>
<p1>Its been a while. I was kind of lazy to promote my self into the net. But if you want to survive in this industry you must be self promoting, while you still can! Under these years, I have been workin some of my own projects and did some mastering to Pangaia Crew, who is an rapgroup from South of Stockholm. The results came out pretty good. Here is their video "Paradox":
</br>
</br>
</p1>
<center>
  <div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="https://www.youtube.com/embed/cppOsbK9vGg"
frameborder="0" allowfullscreen></iframe>
 </div>
</div>
</center>
</br>
<p2><center><I>&copy; Copyright Statos Productions 2016</I></p2>
</br>
<p1><a href="https://www.soundcloud.com/statos" target="_blank" alt="Soundcloud"><i class="fa fa-soundcloud"></i></a></p1>
</br>
</br>
</br>
</br>
</br>
</br>
</center>
</div>
</body>
</html>

这是我创建的页面。多亏了这里的一位成员，他用解决了这个问题。

我现在的问题是，我是否对引导程序代码感兴趣，但还不理解。

我想在这个页面上做的两件事是一个头带，我会把Statos Production放在红色背景下。然后我想当你向下滚动时，标题横幅会消失，但导航菜单仍然存在。当你向上滚动时，标题横幅出现了。

然后我想要相同的颜色，就像菜单上一样，在底部，但在折叠引导程序代码中。我在youtube上看了看，并试图将代码实现到其中，但无论我尝试什么，都无济于事。要么导航栏失效，要么完全消失了，因为我在为菜单编写代码之前忘记了放代码。在那里的底部，我会把链接从脸书，谷歌+，声音云等。使该页面dymaninc。(对不起我的语法，我有自闭症(

无论我读什么或看什么视频，我尝试的次数越多，我就越能破坏我的页面。

我很抱歉！我的大脑不在那里。我现在明白了，简单地说吧。这里有一个更简单的代码：

function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);
@import 'https://fonts.googleapis.com/css?family=Pattaya';
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
@import url(https://fonts.googleapis.com/css?family=Dosis:400,300,200,500,600,700,800);
h1 {
font-family: 'Pattaya', sans-serif;
text-shadow:5px 5px 10px #663300;
}
h2 {
font-family: 'Open Sans Condensed', sans-serif;
}
p1 {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 20px;
}
p2 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p3 {
font-family: 'Indie Flower', cursive;
font-size: 15px;
}
p4 {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 9px 15px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 18px;
  font-family: 'Open Sans Condensed', sans-serif;
}
li {
  float: left;
  border-right: 0px solid #bbb;
}
li:last-child {
  border-right: none;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 19px 10px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #112;
}
.active {
  background-color: #990000;
}
body {
  margin: 0;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
ul.topnav li {
  float: left;
}
ul.topnav li.right{
  float: right;
  }
ul.topnav li a {
  display: inline-block;
  color: #FFF;
  text-align: center;
  padding: 10.5px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
  font-family: 'Dosis', sans-serif;
}
ul.topnav li a:hover {
  background-color: #990000;
}
ul.topnav li active {
  background-color: #990000;
}
ul.topnav li.icon {
  display: none;
}
@media screen and (max-width: 680px) {
  ul.topnav li:not(.mob) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
  ul.topnav li.right{
  float: none;
    text-align: center;
  }
}
@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: fixed;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
  ul.topnav.responsive li.right{
      position: absolute;
      top:0;
      left: 50%;
      transform: translate(-50%, 0);
  }
}
.videoWrapperOuter {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container {
  width: 100%;
  max-width: 40.7em;
  margin: 0 auto;
}
a:link {
text-decoration: none;
color:gray
}
a:visited {
text-decoration: none;
color:gray
}
a:hover {
text-decoration: none;
color: red
}
a:active {
text-decoration: none;
}

!DOCTYPE html>
<html lang="en">
<head>
<meata charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="Beats,Hip-Hop,Rap,Stockholm,Sweden">
<title>Statos Productions</title>
</head>
<body>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<ul class="topnav" id="myTopnav">
  <li class="active mob">
    <a href="index.html">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
  </li>
  <li><a href="beats.html">Beats</a>
  </li>
  <li><a href="history.html">History</a>
  </li>
  <li><a href="studio.html">Studio</a>
  </li>
  <li><a href="contact.html">Contact</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" style="font-size:17px;" onclick="myFunction()">
      <i class="fa fa-bars" aria-hidden="true"></i>
    </a>
  </li>
  <li class="right mob"><p4>Statos Productions</p4></li>
</ul>
</body>
</html>