顶部粘性导航栏无法固定在顶部。

huangapple
go评论65阅读模式
英文:

Sticky topbar not "sticking" to the top

问题

I see that you're having an issue with the TOPBAR section not staying on top as expected. This could be due to several reasons, but without seeing the complete code and CSS, it's challenging to pinpoint the exact problem. However, here are a few general suggestions you can consider:

  1. Check Z-Index: Make sure that the z-index property of your section#TOP_BAR_SECTION is set higher than other elements on the page. This ensures that it stays on top.

  2. Position Property: You've set position: sticky; for section#TOP_BAR_SECTION, which is correct. Double-check if there are any conflicting CSS rules that might be affecting its behavior.

  3. Parent Elements: Ensure that there are no parent elements with properties like overflow: hidden; that might be affecting the scrolling behavior of your sticky element.

  4. Viewport Height: The height of the section#TOP_BAR_SECTION might be causing it to disappear if it's taller than the viewport height. Ensure it's not taller than the viewport.

  5. JavaScript Interference: Check if any JavaScript code is manipulating the CSS properties of section#TOP_BAR_SECTION in a way that interferes with its stickiness.

  6. Browser Compatibility: Different browsers may interpret sticky positioning differently. Check if the issue persists across different browsers.

  7. Console Errors: Inspect the browser console for any JavaScript errors or CSS warnings that might be related to this issue.

If you've checked all of these and still can't find the issue, you may need to provide more code and CSS details for a more specific diagnosis.

英文:

So this is my code... it's my first time trying to create a code for a website, so I'm sorry if the code is a little bit of a mess, but I'm only worried about the section "section#TOP_BAR_SECTION" as it was supposed to stick to the top of the page but it does not

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const SIDE_MENU_SECTION = window.document.getElementById(&quot;SIDE_MENU_SECTION&quot;);
  const SIDE_MENU_DIV1 = window.document.getElementById(&quot;Side_Menu_Div1&quot;);
  
  const MAIN_CONTENT_SECTION = window.document.getElementById(&quot;MAIN_CONTENT_SECTION&quot;);
  const TOP_BAR_SECTION = window.document.getElementById(&quot;TOP_BAR_SECTION&quot;);
  const TOP_BAR_DIV1 = window.document.getElementById(&quot;Top_Bar_Div1&quot;);
  const CONTENT_SECTION = window.document.getElementById(&quot;CONTENT_SECTION&quot;);
  const CONTENT_DIV1 = window.document.getElementById(&quot;Content_Div1&quot;);

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da vari&#225;vel Loaded, para garantir que a p&#225;gina est&#225; carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = &quot;0.75s&quot;){
  	SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
  	Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + &quot;px&quot;;
    SIDE_MENU_DIV1.style.width = New_Width + &quot;px&quot;;

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + &quot;px&quot;;
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + &quot;px&quot;;
    
    CONTENT_DIV1.style.width = Page_Width + &quot;px&quot;;
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener(&quot;resize&quot;,debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
      	if (Side_menu_section_width === 0) {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById(&quot;Top_Bar_Div1_Logo1&quot;);

  const Top_Bar_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Top_Bar_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Top_Bar_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target =&gt; Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById(&quot;Content_Div1_Div1_Logo1&quot;);

  const Front_Page_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Front_Page_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Front_Page_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target =&gt; Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

<!-- language: lang-css -->

@import url(&#39;https://fonts.googleapis.com/css?family=Monoton&#39;);
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
background-color: #191919;
background-image: url(&#39;img_tree.gif&#39;);
background-image: url(&#39;imagens/pagina_inicial/congresso_nacional_escurecido_70.png&#39;);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
overflow: auto;
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw; 
height: 100%;
width: 0px;
position: fixed; 
z-index: 1; 
top: 0px; 
left: 0px;
display: block;
background-color: lightgray; 
overflow-x: hidden; 
transition: 0.75s; 
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;   
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;  
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer; 
color: black;
font-weight: bold;
}
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw); 
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

<!-- language: lang-html -->

  &lt;section id=&quot;WHOLE_PAGE&quot;&gt;
&lt;section id=&quot;SIDE_MENU_SECTION&quot;&gt;
&lt;div id=&quot;Side_Menu_Div1&quot; class=&quot;side_menu_div1&quot;&gt;
&lt;a id=&quot;Side_Menu_Close_Btn&quot; class=&quot;side_menu_close_btn&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;CloseSideMenu()&quot;&gt;&amp;times;&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option1&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot; onclick=&quot;location.href = &#39;sobre.html&#39;;&quot;&gt;Option1&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option2&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option2&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option3&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option3&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option4&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option4&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option5&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option5&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;MAIN_CONTENT_SECTION&quot;&gt;
&lt;section id=&quot;TOP_BAR_SECTION&quot;&gt;
&lt;div id=&quot;Top_Bar_Div1&quot; class=&quot;top_bar_div1&quot;&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Menu1&quot; class=&quot;top_bar_div1_menu1&quot; onclick=&quot;OpenSideMenu();&quot; href=&quot;#&quot;&gt;&amp;#9776 Menu&lt;/h1&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Logo1&quot; class=&quot;top_bar_div1_logo1&quot; onclick=&quot;;&quot;&gt;TEXT&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;CONTENT_SECTION&quot;&gt;
&lt;div id=&quot;Content_Div1&quot; class=&quot;content_div1&quot;&gt;
&lt;div id=&quot;Content_Div1_Div1&quot; class=&quot;content_div1_div1&quot;&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Text1&quot; class=&quot;content_div1_div1_text1&quot;&gt;Text&lt;/h1&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Logo1&quot; class=&quot;content_div1_div1_logo1&quot;&gt;Text&lt;/h1&gt;
&lt;/div&gt;
&lt;div id=&quot;Content_Div1_Div2&quot; class=&quot;content_div1_div2&quot;&gt;
&lt;p id=&quot;Content_Div1_Div2_P1&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;p id=&quot;Content_Div1_Div2_P2&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;

<!-- end snippet -->

I'm not sure what I did wrong but the TOPBAR "section#TOP_BAR_SECTION" was supposed to stay on top because its position is sticky, but it does not keep itself on top of the page.

答案1

得分: 1

你的section#SIDE_MENU_SECTION和section#CONTENT_SECTION选择器缺少闭合大括号}。

在你的.side_menu_text:hover和.content_div1_div2_p选择器后面有多余的闭合大括号}。

看起来你尝试嵌套CSS选择器，这在普通CSS中是无效的。我通过验证工具运行了你的CSS以找到这个错误。将来你可以使用这个工具验证你自己的CSS：https://jigsaw.w3.org/css-validator/#validate_by_input

英文:

You are missing a closing brace } for your section#SIDE_MENU_SECTION and section#CONTENT_SECTION selectors

You also have extra closing braces after your .side_menu_text:hover and .content_div1_div2_p selectors.

It looks like you are trying to nest CSS selectors, which is NOT valid in plain CSS. I ran your CSS through the validation tool to find that error. You can validate your own CSS using this tool in the future: https://jigsaw.w3.org/css-validator/#validate_by_input

Now that the code is valid, it's much easier to find issues. The issue with your sticky header is that a bunch of its parent element had overflow:hidden or position:fixed on them. You can't do this because the sticky element needs to be able to get the scroll position correctly and those types of properties will prevent that. See the demo below, I added a /*THIS WAS COMMENTED OUT*/ comment above everything I commented out. This also has your fixed braces I mentioned above.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const SIDE_MENU_SECTION = window.document.getElementById(&quot;SIDE_MENU_SECTION&quot;);
  const SIDE_MENU_DIV1 = window.document.getElementById(&quot;Side_Menu_Div1&quot;);
  
  const MAIN_CONTENT_SECTION = window.document.getElementById(&quot;MAIN_CONTENT_SECTION&quot;);
  const TOP_BAR_SECTION = window.document.getElementById(&quot;TOP_BAR_SECTION&quot;);
  const TOP_BAR_DIV1 = window.document.getElementById(&quot;Top_Bar_Div1&quot;);
  const CONTENT_SECTION = window.document.getElementById(&quot;CONTENT_SECTION&quot;);
  const CONTENT_DIV1 = window.document.getElementById(&quot;Content_Div1&quot;);

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da vari&#225;vel Loaded, para garantir que a p&#225;gina est&#225; carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = &quot;0.75s&quot;){
  	SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
  	Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + &quot;px&quot;;
    SIDE_MENU_DIV1.style.width = New_Width + &quot;px&quot;;

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + &quot;px&quot;;
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + &quot;px&quot;;
    
    CONTENT_DIV1.style.width = Page_Width + &quot;px&quot;;
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener(&quot;resize&quot;,debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
      	if (Side_menu_section_width === 0) {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById(&quot;Top_Bar_Div1_Logo1&quot;);

  const Top_Bar_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Top_Bar_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Top_Bar_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target =&gt; Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById(&quot;Content_Div1_Div1_Logo1&quot;);

  const Front_Page_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Front_Page_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Front_Page_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target =&gt; Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

<!-- language: lang-css -->

@import url(&#39;https://fonts.googleapis.com/css?family=Monoton&#39;);
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
background-color: #191919;
background-image: url(&#39;img_tree.gif&#39;);
background-image: url(&#39;imagens/pagina_inicial/congresso_nacional_escurecido_70.png&#39;);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow: auto;*/
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw; 
height: 100%;
width: 0px;
position: fixed; 
z-index: 1; 
top: 0px; 
left: 0px;
display: block;
background-color: lightgray; 
overflow-x: hidden; 
transition: 0.75s; }
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;   
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
}
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;  
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer; 
color: black;
font-weight: bold;
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
}
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw); 
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

<!-- language: lang-html -->

&lt;section id=&quot;WHOLE_PAGE&quot;&gt;
&lt;section id=&quot;SIDE_MENU_SECTION&quot;&gt;
&lt;div id=&quot;Side_Menu_Div1&quot; class=&quot;side_menu_div1&quot;&gt;
&lt;a id=&quot;Side_Menu_Close_Btn&quot; class=&quot;side_menu_close_btn&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;CloseSideMenu()&quot;&gt;&amp;times;&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option1&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot; onclick=&quot;location.href = &#39;sobre.html&#39;;&quot;&gt;Option1&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option2&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option2&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option3&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option3&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option4&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option4&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option5&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option5&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;MAIN_CONTENT_SECTION&quot;&gt;
&lt;section id=&quot;TOP_BAR_SECTION&quot;&gt;
&lt;div id=&quot;Top_Bar_Div1&quot; class=&quot;top_bar_div1&quot;&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Menu1&quot; class=&quot;top_bar_div1_menu1&quot; onclick=&quot;OpenSideMenu();&quot; href=&quot;#&quot;&gt;&amp;#9776 Menu&lt;/h1&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Logo1&quot; class=&quot;top_bar_div1_logo1&quot; onclick=&quot;;&quot;&gt;TEXT&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;CONTENT_SECTION&quot;&gt;
&lt;div id=&quot;Content_Div1&quot; class=&quot;content_div1&quot;&gt;
&lt;div id=&quot;Content_Div1_Div1&quot; class=&quot;content_div1_div1&quot;&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Text1&quot; class=&quot;content_div1_div1_text1&quot;&gt;Text&lt;/h1&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Logo1&quot; class=&quot;content_div1_div1_logo1&quot;&gt;Text&lt;/h1&gt;
&lt;/div&gt;
&lt;div id=&quot;Content_Div1_Div2&quot; class=&quot;content_div1_div2&quot;&gt;
&lt;p id=&quot;Content_Div1_Div2_P1&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;p id=&quot;Content_Div1_Div2_P2&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月22日 05:59:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76302087.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定