Materialise - 全屏滑块和导航栏
Materialize - Full screen slider and navigation bar
在项目开发过程中,我决定使用全屏图像滑块。如官网所示:Link
这样导航栏就消失了,但是在 Youtube 视频上我看到有一种方法(我不知道)可以同时保持全屏滑块和导航栏。谁能帮我解决这个问题?有没有办法同时使用这两个功能?
谢谢
代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="./script.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="./src/jquery.js"></script>
<script src="./src/js.js"></script>
<title>Home Automation - Test</title>
<meta charset="utf-8" lang="it">
<link rel="stylesheet" href="./css/mycss.css">
</head>
<body class="bkground">
<nav class="teal darken-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Domotic Home</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active"><a href="index.html">General</a></li>
<li><a href="homecontrol1.html">Home Control - First floor</a></li>
<li><a href="homecontrol2.html">Home Control - Second floor</a></li>
<li><a href="privatearea.html">Private Area</a></li>
</ul>
</div>
</nav>
<br>
<br>
<div class="slider fullscreen">
<div class="main-content">
<ul class="slides">
<li>
<img src="./img/1.jpg">
</li>
<li>
<img src="./img/5.jpg">
</li>
<li>
<img src="./img/3.jpg">
</li>
<li>
<img src="./img/6.jpg">
</li>
<li>
<img src="./img/7.jpg">
</li>
<li>
<img src="./img/9.jpg">
</li>
<li>
<img src="./img/11.jpg">
</li>
<li>
<img src="./img/12.jpg">
</li>
<li>
<img src="./img/13.jpg">
</li>
<li>
<img src="./img/14.jpg">
</li>
<li>
<img src="./img/15.jpg">
</li>
<li>
<img src="./img/16.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
这里是 css
.modal {
max-height: 90%;
max-width: 90%;
}
.bkground {
background-image: url("/img/Sfondo3.jpg")
}
.sliderimg {
border-color: black;
border: solid 2px;
}
.floorimg {
border-color: black;
border: solid 4px;
}
.main-content {
top: 100%;
position: absolute;
width: 100%;
}
是的。可以 done.I 在 div.slider.fullscreen 之后添加一个 div.main 内容,如下所示:
div.main-content {
top: 100%;
position: absolute;
width: 100%;
}
它对我有用。只需在 div.main-content 元素
中添加任何你想要的内容
我找到了答案
CSS
.slider-adjustment{
position: fixed;
top: 56px; <!-- as nav bar has height of 56px -->
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background-color:cyan ;
}
HTML
<div class="slider-adjustment">
<!-- All html for slider goes here -->
</div>
你试过增加 z-index
nav{
z-index:100;
}
您可以将全屏滑块后的所有内容包装在 div 中(比如使用 id
内容)并设置 CSS 如下:
#content {
position: relative;
top : 100vh;
}
在项目开发过程中,我决定使用全屏图像滑块。如官网所示:Link
这样导航栏就消失了,但是在 Youtube 视频上我看到有一种方法(我不知道)可以同时保持全屏滑块和导航栏。谁能帮我解决这个问题?有没有办法同时使用这两个功能? 谢谢
代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="./script.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script src="./src/jquery.js"></script>
<script src="./src/js.js"></script>
<title>Home Automation - Test</title>
<meta charset="utf-8" lang="it">
<link rel="stylesheet" href="./css/mycss.css">
</head>
<body class="bkground">
<nav class="teal darken-1">
<div class="nav-wrapper">
<a href="#" class="brand-logo right">Domotic Home</a>
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li class="active"><a href="index.html">General</a></li>
<li><a href="homecontrol1.html">Home Control - First floor</a></li>
<li><a href="homecontrol2.html">Home Control - Second floor</a></li>
<li><a href="privatearea.html">Private Area</a></li>
</ul>
</div>
</nav>
<br>
<br>
<div class="slider fullscreen">
<div class="main-content">
<ul class="slides">
<li>
<img src="./img/1.jpg">
</li>
<li>
<img src="./img/5.jpg">
</li>
<li>
<img src="./img/3.jpg">
</li>
<li>
<img src="./img/6.jpg">
</li>
<li>
<img src="./img/7.jpg">
</li>
<li>
<img src="./img/9.jpg">
</li>
<li>
<img src="./img/11.jpg">
</li>
<li>
<img src="./img/12.jpg">
</li>
<li>
<img src="./img/13.jpg">
</li>
<li>
<img src="./img/14.jpg">
</li>
<li>
<img src="./img/15.jpg">
</li>
<li>
<img src="./img/16.jpg">
</li>
</ul>
</div>
</div>
</body>
</html>
这里是 css
.modal {
max-height: 90%;
max-width: 90%;
}
.bkground {
background-image: url("/img/Sfondo3.jpg")
}
.sliderimg {
border-color: black;
border: solid 2px;
}
.floorimg {
border-color: black;
border: solid 4px;
}
.main-content {
top: 100%;
position: absolute;
width: 100%;
}
是的。可以 done.I 在 div.slider.fullscreen 之后添加一个 div.main 内容,如下所示:
div.main-content {
top: 100%;
position: absolute;
width: 100%;
}
它对我有用。只需在 div.main-content 元素
中添加任何你想要的内容我找到了答案
CSS
.slider-adjustment{
position: fixed;
top: 56px; <!-- as nav bar has height of 56px -->
left: 0;
bottom: 0;
right: 0;
overflow: auto;
background-color:cyan ;
}
HTML
<div class="slider-adjustment">
<!-- All html for slider goes here -->
</div>
你试过增加 z-index
nav{
z-index:100;
}
您可以将全屏滑块后的所有内容包装在 div 中(比如使用 id 内容)并设置 CSS 如下:
#content {
position: relative;
top : 100vh;
}