在我制作的网页上，整个页面内容将被导航栏向下推。我使用了 fullpage.js，但导航栏会下推整个页面内容，包括文本和图像。我该如何解决这个问题？图像的问题可以显示在第三张幻灯片上。<!DOCTYPE html><html><head> <title>title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.css" integrity="sha256-+dIh4jG2jQTHZwW81yUo8h6tzXWcNumyNL5XPZbwp1E=" crossorigin="anonymous" /> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/stylesheet.css"></head><body> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <a href="index.html">Home</a> <a href="junior.html">submenu1</a> <a href="senior.html">submenu2</a> <a href="contact.html">submenu3</a> </div> </div> <span class="stickynav" onclick="openNav()">☰</span> <img style="float: right;" src="images/dummy.png" alt="dummy" class="stickynav" width="100" height="120" class="dummy"> <script> function openNav() { document.getElementById("myNav").style.height = "100%"; } function closeNav() { document.getElementById("myNav").style.height = "0%"; } </script> <div id="fullPage"> <div class="section s1" id="section1" class="fontsize"> <h1 style="color:white;font-size:80px;z-index:999!important;"><strong>title</strong></h1> </div>
1 回答
拉丁的传说
TA贡献1789条经验 获得超8个赞
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.css" integrity="sha256-+dIh4jG2jQTHZwW81yUo8h6tzXWcNumyNL5XPZbwp1E=" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<div id="myNav" class="overlay">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div class="overlay-content">
<a href="index.html">Home</a>
<a href="junior.html">submenu1</a>
<a href="senior.html">submenu2</a>
<a href="contact.html">submenu3</a>
</div>
</div>
<span class="stickynav" onclick="openNav()">☰</span>
<img style="float: right;" src="images/dummy.png" alt="dummy" class="stickynav" width="100" height="120" class="dummy">
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
<div id="fullPage">
<div class="section s1" id="section1" class="fontsize">
<h1 style="color:white;font-size:80px;z-index:999!important;"><strong>title</strong></h1>
</div>
<div class="section s2" id="section2">
<h1><strong>title</strong></h1>
<p class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel libero eget quam dignissim blandit. Pellentesque ultrices tortor id nulla cursus, vel imperdiet lorem hendrerit. Phasellus pharetra lacus id molestie dictum. In odio sem, porttitor
vitae convallis hendrerit, ullamcorper quis enim. Donec aliquet lobortis egestas. Vivamus placerat imperdiet mattis. Quisque tincidunt facilisis diam. Nunc sodales cursus mi id condimentum. Ut blandit mattis velit. Aenean in posuere orci.</p>
</div>
<div class="section s3" id="section3">
<div class="row" id="jema">
<div class="col-xs-12 col-md-6">
<img src="images/dummy.png" alt="dummy" class="responsive" width="999" height="600">
</div>
<div class="col-md-6">
<h1> Lorem ipsum</h1>
<p class="container">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
<div class="row" id="jama">
<div class="col-xs-12 col-md-6">
<img src="images/dummy.jpg" alt="dummy" class="responsive" width="333" height="200">
<img src="images/dummy.jpg" alt="dummy" class="responsive" width="333" height="200">
<img src="images/dummy.jpg" alt="dummy" class="responsive" width="333" height="200">
</div>
</div>
</div>
<div class="section s4" id="section4">
<footer>
<h1>title</h1>
<h1>Contact information: ---</h1>
</footer>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.min.js" integrity="sha256-caNcSA0LvOCX90PTuEbwl+V09xPMca13CJUasl+VCtk=" crossorigin="anonymous"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true,
navigation: true
})
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消