javascript - 为什么我的内容出现在我的应用的屏幕之外？

Question

所以我有这个项目，我必须制作一个应用程序，我正在使用 html、css 和 jquery。每当我尝试将内容放入其中时，它总是出现在屏幕之外......有人可以提供任何建议吗？尝试运行代码时它将无法正常工作，因为您无权访问文件，但如果有人可以提供建议，那就太好了

问题的图像

$("main, section").hide(); // set display: none to main/section divs in css to stop flash

// SPLASH SCREEN //////////////////////////////////////////////

// display splash screen
$("#splash").show();

// animate on the splash screen on app load
gsap.from("#splash", {
    delay: 0.25,
    opacity: 0,
    duration: 0.5
});

// Animate Header
gsap.from("#splash header", 0.5, {
    delay: 0.5,
    y: -$("#splash header").outerHeight(),
    duration: 0.5,
    ease: "sine.out"
});

// // Animate Footer
gsap.from("#splash footer", {
    delay: 0.5,
// ! MAKE SURE YOU HAVE # FOR ID
    y: $("#splash footer").outerHeight(),
    duration: 0.5,
    ease: "sine.out"
});

gsap.from("#splash img", {
    delay: 1,
    scale: 0,
    duration: 0.5,
    ease: "back.out"
});

// wait 4 secs then fade out and load landing screen
gsap.to("#splash", {
    // ! CHANGE BACK TO 4
    delay: 2,
    opacity: 0,
    duration: 0.5,
    //! MUST COMPLETE LOAD LANDING FUNCTION
    onComplete: loadLanding
});

function loadLanding(){
    // hide and reset all screens/sections
    $("main, section").hide().css({opacity: 1});

    // ************************ SHOW ************************
    // display landing screen
    $("#landing").show();

    //  animate on the landing screen
    gsap.from("#landing", {
        delay: 0.25,
        opacity: 0,
        duration: 0.5
    });

    gsap.from("#landing header", {
        delay: 0.5,
        y: -$("#landing header").outerHeight(),
        duration: 0.5,
        ease: "sine.out"
    });

    gsap.from("#landing footer", {
        delay: 0.5,
        y: $("#landing footer").outerHeight(),
        duration: 0.5,
        ease: "sine.out"
    });

    gsap.from("#logo1", {
        delay: 1,
        opacity: 0,
        duration: 0.5
    });

    gsap.from("#logo2", {
        delay: 1.25,
        opacity: 0,
        duration: 0.5
    });

    gsap.from("#logo3", {
        delay: 1.5,
        opacity: 0,
        duration: 0.5
    });
}

//! Part of the landing screen but not part of the loading function
// !!!! MAKE SURE YOU MAKE YOUR LOAD REST FUNCTION!!!!
// set up logos to link to related restaurant
// pass rest ID and subnav highlight colour to loadRest function
// fade landing out and load selected restaurant

$("#logo1").click(function() {

    gsap.to("#landing", {
        opacity: 0,
        duration: 0.5,
        onComplete: loadRest,
        // ! TWO PARAMETERS HIGHLIGHT AND ID OF RESTAURANT
        // WHICH ICON IS ACTIVE IS HEX CODE
        onCompleteParams: ["#rest1", "#0f6b37"]
    });
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  
}

/**************** ADDED **************/
/* FONTS /////////////////////////////////////////////// */

/* app font */
@font-face {
  font-family: "AppFont";
  src: url(../css/fonts/SF-Pro-Display-Regular.otf);
}

/* GENERAL APP STYLES /////////////////////////////////// */

body {
  font-size: 14px;
  overflow: hidden;
}

main {
  position: absolute;
  width: 375px;
  height: 667px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);
}

section {
  position: absolute;
  top: 60px;
  width: 375px;
  height: 547px;
  background: #fff;
  overflow: auto;
  padding: 20px;
}


/**************** Splash Screen **************/

#splash {
  background-image: url(../img/launchbg.jpg);
  background-size: cover;
  display: flex;
  justify-content: center;
}


#splash img {
  width: 173px;
  height: auto;
}


/**************** Landing Screen **************/


#landing {
  font-family: "AppFont";
  background-image: url(../img/choicebg.jpg);
  background-size: cover;
  padding-top: 130px;
}

#cevicheLogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 200px;
  position: relative;
  bottom: 100px;
}

#ballcontainer {
  margin-left: 115px;
  position: relative;
  bottom: 300px;

}

.balls {
  width:15px;
  height: 15px;
  margin-left: 26px;
  border-radius: 50%;
  background-color: #755A40;
  float: left;
}

#ball2 {
  opacity: .6;
}

#ball3 {
  opacity:.6;
}

<!DOCTYPE html>

<!-- Setup HTML -->
<html dir='ltr' lang='en-ca'>
    <!-- Put metadata in head -->
    <head>
        <meta charset='UTF-8'>
        <meta name='description' content='My description of my site for search engines'>
        <meta name='viewport' content="width=device-width, initial-scale=1.0, maximum-scale=1">
        <link rel='stylesheet' href='css/style.css'>
        

        <title>Lab-04</title>
    </head>

    <body>
     
    <!--* MENU  -->
    <main id="menu">MENU</main>
    
    
    <!--* SPLASH SCREEN FOR APP COMPANT  -->
    <main id="splash">
        <img src="img/eateries_logo_family of eateries.svg" alt="Family of Eateries" id="eaterylogo" />
    </main>
    
    <main id="landing">
        
        <!-- ! ********** ADD LANDING PAGE -->
        <!-- LANDING -->

        <div id="logo1" class="landingLogos">  
            <img id="cevicheLogo" src="img/cevichelogo.svg" alt="Ceviche" width="300" height="400" />
        </div>

        <div id="ballcontainer">
            <div id="ball1" class="balls"> </div>
            <div id="ball2" class="balls"> </div> 
            <div id="ball3" class="balls"> </div>
        </div>

        <h3>Fine Dining</h3>

        <p>Each dish is created with passion, respect and care.</p>

    </main>

`

标签： javascripthtmlcssgsap