Question

内容div没有响应..

当浏览器的宽度和高度缩小时，它覆盖了页眉和页脚。

我也使用flex（不确定我是否正确使用它）

display: -webkit-box;
display: -ms-flexbox;
display: flex;

也许我误用了..

我也使用内容作为背景视频的叠加层。

我压倒什么？请帮忙!!

这里是Jsfiddle的例子 - jsfiddle

这是代码段 -

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

header {
  z-index: 1;
  position: fixed;
  top: 5%;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  font-family: 'Century Gothic', serif;
}

header a {
  color: #fff;
  font-family: 'Century Gothic', serif;
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 700;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 95%;
  position: absolute;
  padding: 1% 2%;
  margin-top: 5%;
  margin-left: 2%;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  letter-spacing: 2px;
}

.quote {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 15%;
  text-align: center;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: lowercase;
}

footer {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
}

＆＃13;

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container">
  <div class="overlay">
    <header>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </header>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>

    </div>
    <div class="quote">get a quote!</div>
    <footer>copyright 2018</footer>
  </div>
</div>

＆＃13;

另外..如果可能，我想在菜单下面显示一个lil箭头...向用户显示他/她当前正在访问的页面..

但它没有修复（再次）

这是我使用的css代码：

.arrow {
  position: relative;
  background: #fff;
  display: inline-block;
  padding: 15px;
  color: #000;
  text-decoration: none;
  border-radius: 6px;
}
.arrow:after {
  position: absolute;
  bottom: 100%;
  right: 50%;
  margin-right: -9px;
  content: ' ';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  border-top: 10px solid transparent;
}

谢谢！

Answer 1

如果您想要响应式网站，那么您可以使用bootstrap。使用bootstrap，您可以轻松地为您的网站制作响应式布局。如果它帮助你，请尝试以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  html,
body {
  margin: 0;
  padding: 0;
  color: #fff;
}

video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-transition: 1s opacity;
  transition: 1s opacity;
}

#container {
  height: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.overlay {
  z-index: 1;

  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
}

header {
  z-index: 1;
  position: fixed;
  top: 5%;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  font-family: 'Century Gothic', serif;
  clear:both;
}

header a {
  color: #fff;
  font-family: 'Century Gothic', serif;
  display: inline-block;
  padding: 0px 20px;
  font-size: 25px;
  text-decoration: none;
  font-weight: 700;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline;
}

.content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 95%;
  position: absolute;
  padding: 1% 2%;
  margin-top: 5%;
  margin-left: 2%;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  letter-spacing: 2px;
}

.quote {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 15%;
  text-align: center;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 3rem;
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: lowercase;
}

footer {
  position: fixed;
  display: block;
  width: 100%;
  bottom: 0;
  color: #fff;
  font-family: 'Century Gothic', serif;
  text-decoration: none;
  text-align: center;
  line-height: 60px;
  font-size: 15px;
}
  </style>
</head>
<body>

<video poster=".jpg" id="bgvid" playsinline autoplay muted loop>
  <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>

<div id="container-fluid">
  <div >

    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">home</a></li>
        <li><a href="#">about</a></li>
      </ul>
  </div>
  </div>
</nav>


    <div class='col-sm-12'>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>
      <p>Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi
        pro.
      </p>

    </div>
    </div>
    <div class="quote">get a quote!</div>
    <footer>copyright 2018</footer>
  </div>
</div>

</body>
</html>

内容div不固定

1 个答案: