Javascript 第一次运行时显示的布局不正确_Javascript_Html_Css

Javascript 第一次运行时显示的布局不正确
javascript html css
Javascript 第一次运行时显示的布局不正确,javascript,html,css,Javascript,Html,Css,有一个站点（），当第一次以高于1920的分辨率运行时，第一次加载时的布局显示不正确-字体、前导和对象之间的距离减小。同时，当您在站点周围移动一段时间并返回到原始页面时，一切都会恢复正常。该网站是用整版js编写的。代码笔链接关于 .bg init、.animposition覆盖幻灯片{background:#f3f2ed；z-index:9999}。左侧覆盖幻灯片{background:#f3f2ed；z-index:9999} 请检查文件加载的顺序。确保首先加载css，然后才能加载j
有一个站点（），当第一次以高于1920的分辨率运行时，第一次加载时的布局显示不正确-字体、前导和对象之间的距离减小。同时，当您在站点周围移动一段时间并返回到原始页面时，一切都会恢复正常。该网站是用整版js编写的。代码笔链接

关于
.bg init、.animposition覆盖幻灯片{background:#f3f2ed；z-index:9999}。左侧覆盖幻灯片{background:#f3f2ed；z-index:9999}



请检查文件加载的顺序。
确保首先加载css，然后才能加载js文件请在问题本身中发布所有相关代码。
<!DOCTYPE html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<meta charset=UTF-8>
<meta name=viewport content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<script type=text/javascript src=https://ajax.googleapis.com/ajax/libs/jquery//2.2.0/jquery.min.js></script>
<link rel=stylesheet id=six_mainstyle-css href=./artfiles/mainbig.css type=text/css media=all>
<link rel=icon href=favicon.ico type=image/x-icon>
<link rel="shortcut icon" href=favicon.ico type=image/x-icon>
<link rel=stylesheet href=https://use.fontawesome.com/releases/v5.0.13/css/all.css integrity=sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp crossorigin=anonymous>
<link rel=stylesheet href=https://unpkg.com/swiper/css/swiper.min.css>
<link rel=stylesheet href=./artfiles/fullpage.css>
<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/css/animsition.min.css>
<title>About</title>
<style media=screen>.bg-init,.animsition-overlay-slide{background:#f3f2ed;z-index:9999}.overlay-slide-in-left{background:#f3f2ed;z-index:9999}</style>
</head>
<body class=bg-init id=clrmen>
<div class=animsition-overlay>
<nav class="l-nav pushy pushy-left">
<ol>
<ul id=menu-primary-menu class=l-nav__menu>
<p><li id=linkin><a id=linkinclr4 class=animsition-link href=gallery.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Gallery</div></a></li></p>
<p><li id=linkin><a id=linkinclr2 class=animsition-link href=about.html data-animsition-out-class=overlay-slide-out-left><div class=ml>About</div></a></li></p>
<p><li id=linkin><a id=linkinclr3 class=animsition-link href=courses.html data-animsition-out-class=overlay-slide-out-left><div class=ml>Courses</div></a></li></</p>
<p><li id=menu-item-615 class="js-site-underlay-trigger menu-item menu-item-type-post_type menu-item-object-page menu-item-615"><a href=https://www.artimpress.com/about.html/><div class=ml>Contact</div></a></li></p>
</ul>
<ul class="l-nav__menu l-nav__menu--secondary">
<div class=l-nav__logo>
<img src=./img/artlogom.png></div>
</li>
</ul>
</nav>
<div class="site-burger site-burger--left [ menu-btn ]" data-pushy-dir=left>
<span></span>
<span></span>
<span></span>
</div>
<div class=site-transition></div>
<div class=site-transition__inner>
</div>
<div class=site-overlay></div>
<div class=site-underlay>
<div class=site-underlay__close>
<div class=c-close><span></span><span></span></div>
</div>
<div class=site-underlay__content>
<div class=row>
<div class="columns small-20 medium-offset-9 medium-11 xlarge-offset-8 xlarge-12 xlarge-offset-11 xlarge-9 xxlarge-offset-13 xxlarge-7">
<div class=m-page>
<ul>
<p style=font-family:Thin><strong>Address</strong></p>
<p>Saint-Peterburg,</p>
<p>Mokhovaya str. 42</p>
<p> Metro st. Gostiny Dvor</strong></p>
<div class=cont><p style=font-family:Thin><strong>Contact</strong></p>
<p>impress.art@yandex.ru </p></div>
<div class="circle-effect circle-effect-1a"><div class=block010>
<a href=https://twitter.com/art_impress_sc><div class=circle><i class="fab fa-twitter"></i></div></a>
<a href=https://www.facebook.com/ArtImpressSchool/><div class=circle><i class="fab fa-facebook-f"></i></i></div></a>
<a href="https://www.instagram.com/art_impress/?utm_source=ig_profile_share&igshid=v7vcvy2xvgcs"><div class=circle><i class="fab fa-instagram"></i></div></a>
<a href=https://www.youtube.com/channel/UC7TSohPBtJAnzzN9EnXIjDQ><div class=circle><i class="fab fa-youtube"></i></div></a>
<a href=https://vk.com/art_impress><div class=circle><i class="fab fa-vk"></i></i></div></a>
<a href=https://tlgg.ru/art_impress><div class=circle><i class="fab fa-telegram-plane"></i></i></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=site-mark>
</div>
</div>
</div>
<div id="myContainer">
    <div class="section">
        <div class="slide"><div class="txtblock1">

 <div class="textline"></div>

    <div class="fadeInM1"><h1> About</h1></div>
<div class="fadeInM2"><h3>Direction</h3></div>
<div class="fadeInM3"><p>The Art Impress is a private international art school where you can get knowledge and skills in classical visual arts:</p>
<ul><li>• Academic drawing;</li>
<li>• Academic painting;</li>
<li>• Academic sculpture;</li>
<li>• Analogue photography<br>&nbsp&nbsp&nbspand cinematography.</li></ul></div>
  </div><div class="nmrblock2"><div class="fadeInM3" style="color: #cdccc8;">01</div></div>
<div class="fadeInM3"><div class="imgblock1">
  <div class="swiper-container">
    <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="./img/about-01.jpg" ></div>
<div class="swiper-slide"><img src="./img/about-01.2.jpg" ></div>
     </div>
    <div class="swiper-pagination"></div>
  </div>
 </div></div>

 </div></div>
    <div class="section" >
        <div class="slide"><div class="txtblock" >

 <div class="textline"></div>

    <h1> About</h1>
<h3>Tutors</h3>
<p> During your studies in The Art Impress you can develop your artistic skills and rapidly upgrade your professional art competencies in our powerful environment consisted of well-trained students and highly qualified tutors. Our tutors are graduates of The Saint-Petersburg State Repin Academic Institute of Painting, Sculpture and Architecture.</p> 
  </div><div class="nmrblock2">02</div>
<div class="imgblock">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/about-02.jpg" ></div>
       <div class="swiper-slide"><img src="./img/about-02.2.jpg" ></div>
     </div>
    <div class="swiper-pagination"></div>
  </div>
 </div></div>


<div class="slide"><div class="txtblock">

 <div class="textline"></div>

    <h1> About</h1>
<h3>Objective</h3>
       <p>Our mission is valuable knowledge transfer from professional instructor to student in face-to-face communication.</p>

  </div><div class="nmrblock2">03</div>
<div class="imgblock">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/about-3.2.jpg" ></div>
       <div class="swiper-slide"><img src="./img/about-3.3.jpg" ></div>
     </div>
    <div class="swiper-pagination"></div>
  </div>
 </div></div>
<div class="slide"><div class="txtblock">

 <div class="textline"></div>

    <h1> About</h1>
<h3>Education</h3>
<p>Every syllabus is tailor-made, it depends on your goals and level of training:</p>
<ul>

<li>• Advanced training</li>
<li>• Requalification</li>
<li>• Hobby for your soul</li>
<li>• Entrance exam preparation <br>&nbsp&nbsp&nbspfor institutes of fine arts</li></ul>
  </div><div class="nmrblock2">04</div>
<div class="imgblock">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/about-04.jpg" ></div>
       <div class="swiper-slide"><img src="./img/about-4.2.jpg" ></div>
     </div>
    <div class="swiper-pagination"></div>
  </div>
 </div></div>
</div>
<div class="section"><div class="fadeInM1">
        <div class="slide"><div class="txtblock4">

 <div class="textline"></div>

    <h1> About</h1>
    <h3></h3>
<p>In The Art Impress there are classes on regular bases and also intensive sessions are available if you come to Saint-Petersburg from other regions of Russia or from abroad for a limited time. Classes take place in our studio, museums of Saint-Petersburg and plein air. In The Art Impress you study with complete immersion in creative educational environment and gain considerable experience in fine arts.</p>
  </div><div class="nmrblock3">05</div>
<div class="imgblock3">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/about-05.jpg" ></div>
       <div class="swiper-slide"><img src="./img/about-5.2.jpg" ></div>
     </div>
    <div class="swiper-pagination"></div>
  </div>
 </div></div>

        <div class="slide">

 <div class="imgblock3">
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./img/about-01.3.jpg" ></div>

     </div>
      <div class="swiper-pagination"></div>

  </div>
 </div>
<div class="fadeInM2"><div class="txtblock3">

     <div class="fl1">To be cultured,</div><div class="fl2">Is to be relevant</div>





      <div class="fl3">   Saint-Peterburg
    <br>

          Mokhovaya str. 42 <br>Metro st. Gostiny Dvor <br><br>impress.art@yandex.ru</div>  
          <div class="l-nav__logo2">
                <img src="./img/artlogo.png " >
            </div>

      <p></p>


<div class="circle-effect circle-effect-1a"><div class="icons">


    <a href="https://twitter.com/art_impress_sc"><div class="circle"><i class="fab fa-twitter"></i></div></a>

   <a href="https://www.facebook.com/ArtImpressSchool/"><div class="circle"><i class="fab fa-facebook-f"></i></i></div></a>

    <a href="https://www.instagram.com/art_impress/?utm_source=ig_profile_share&igshid=v7vcvy2xvgcs"><div class="circle"><i class="fab fa-instagram"></i></div></a>

    <a href="https://www.youtube.com/channel/UC7TSohPBtJAnzzN9EnXIjDQ"><div class="circle"><i class="fab fa-youtube" ></i></div></a>

    <a href="https://vk.com/art_impress"><div class="circle"><i class="fab fa-vk"></i></i></div></a>

    <a href="https://tlgg.ru/art_impress"><div class="circle"><i class="fab fa-telegram-plane"></i></i></div></a></div>

  </div>

</div>
</div>
</div>





<script type=text/javascript src=fullpage.scrollHorizontally.min.js></script>
<script type=text/javascript src=https://unpkg.com/fullpage.js/dist/fullpage.extensions.min.js></script>
<script type=text/javascript>new fullpage("#myContainer",{sectionsColor:["#f3f2ed","#5c5d62","#5c5d62","#5c5d62","#5c5d62","#f3f2ed"],anchors:["firstPage","secondPage","3rdPage","4thpage"],menu:"#menu",slidesNavigation:false,scrollBar:false,licenseKey:"INSERT YOUR FULLPAGE LICENSE KEY HERE",controlArrows:false,keyboardScrolling:false,scrollHorizontally:true,scrollHorizontallyKey:"71E55697-D9CA4722-B12417FB-6467B0C3",normalScrollElements:".scrollable-content",});</script>
<script type=text/javascript src=./artfiles/mainbig.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.2/js/animsition.min.js integrity="sha256-8y2mv4ETTGZLMlggdrgmCzthTVCNXGUdCQe1gd8qkyM=" crossorigin=anonymous></script>
<script src=https://unpkg.com/swiper/js/swiper.min.js></script>
<script>var swiper=new Swiper(".swiper-container",{speed:3600,pagination:{el:".swiper-pagination",},autoplay:{delay:5000,},});</script>
<script>$(document).ready(function(){$(".animsition-overlay").animsition({inClass:"overlay-slide-in-left",outClass:"overlay-slide-out-left",overlay:true,overlayClass:"animsition-overlay-slide",overlayParentElement:"body"}).one("animsition.inStart",function(){$("body").removeClass("bg-init");$(this).find(".item").append('<h2 class="target">Callback: Start</h2>');console.log("event -> inStart")}).one("animsition.inEnd",function(){$(".target",this).html("Callback: End");console.log("event -> inEnd")})});</script><script>
  $(document).ready(function() {
    $('.animsition-overlay').animsition({
      inClass: 'overlay-slide-in-left',
      overlay : false,
      overlayClass : 'animsition-overlay-slide',
      overlayParentElement : 'body'
    })
    .one('animsition.inStart',function(){

      $('body').removeClass('bg-init');

      $(this)
        .find('.item')
        .append('<h2 class="target">Callback: Start</h2>');

      console.log('event -> inStart');
    })
    .one('animsition.inEnd',function(){
      $('.target', this).html('Callback: End');

      console.log('event -> inEnd');
    });
  });
  </script>
  <script>

$( "#linkinclr" ).click(function( event ) {
  event.preventDefault();
  $( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr2" ).click(function( event ) {
  event.preventDefault();
  $( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr3" ).click(function( event ) {
  event.preventDefault();
  $( "#clrmen" ).fadeOut(900);
});
$( "#linkinclr4" ).click(function( event ) {
  event.preventDefault();
  $( "#clrmen" ).fadeOut(900);
});
</script>

</body>
</html>