如何利用 JavaScript 实现网站浮动布局

要使用 JavaScript 实现浮动布局，可以使用 CSS 定位属性并添加一些 JavaScript 代码，以根据屏幕大小动态调整布局。下面是一个示例代码片段，演示如何使用 HTML 和 CSS 创建浮动布局：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>浮动布局演示-模站无忧</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>模站无忧演示代码</h1>
  </header>
  <main>
    <section id="intro">
      <h2>欢迎来到模站无忧( mz5u.cn)!</h2>
      <p>这是一条浮动布局演示</p>
    </section>
    <section id="about">
      <h2>About Me</h2>
      <p>我是一名Web开发人员和设计师，热衷于创建美丽且用户友好的网站。.</p>
    </section>
  </main>
  <footer>
    <p>&copy; 2023 模站无忧 Mz5u.cn</p>
  </footer>
  <script src="script.js"></script>
</body>
</html>

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

header h1 {
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  min-height: 100vh;
  background-color: #fff;
}

#intro, #about {
  flex: 1;
  padding: 20px;
  text-align: center;
}

#intro h2, #about h2 {
  margin: 0;
  font-size: 2.5em;
}

#intro p, #about p {
  font-size: 1.2em;
  line-height: 1.5;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

footer p {
  margin: 0;
  text-align: center;
}

//模站无忧 网站浮动布局Js代码

const introSection = document.getElementById('intro');
const aboutSection = document.getElementById('about');
const footer = document.getElementById('footer');

// Set the initial layout
introSection.style.display = 'block';
aboutSection.style.display = 'none';
footer.style.display = 'block';

// Add a scroll event listener to the main container
document.querySelector('main').addEventListener('scroll', () => {
  // Check if the user has scrolled past the intro section
  if (window.innerHeight >= introSection.offsetTop + introSection.offsetHeight) {
    // Show the about section
    introSection.style.display = 'none';
    aboutSection.style.display = 'block';
    footer.style.display = 'none';
  } else {
    // Hide the about section
    aboutSection.style.display = 'none';
    introSection.style.display = 'block';
    footer.style.display = 'block';
  }
});

此代码使用 CSS 定位属性创建一个浮动布局，并添加一些 JavaScript 代码以根据屏幕大小动态调整布局。“主”容器设置为具有“flex”布局，带有“flex-wrap：wrap”以允许多个元素换行到新行上。“两端对齐内容”和“对齐项”属性用于使容器内的元素居中。

“display： none”属性最初用于隐藏“关于”部分，“display： block”属性用于在用户滚动到介绍部分时显示它。“页脚”元素始终显示在页面底部。

原创文章禁止随意转载，转载需得到授权

本文链接：

文章来源

Mz5u.Cn

隐私政策

PrivacyPolicy

用户协议

UseGenerator

许可协议

NC-SA 4.0

1. 资源都是经过站长或作者收集测试后修改发布分享。转载请在文内以超链形式注明出处，谢谢合作！
2. 本站除原创内容，其余所有内容均收集自互联网，仅限用于学习和研究目的，本站不对其内容的合法性承担任何责任。如有版权内容，请通知我们或作者删除，其版权均归原作者所有，本站虽力求保存原有版权信息，但因众多资源经多次转载，已无法确定其真实来源，或已将原有信息丢失，所以敬请原作者谅解！
3. 本站用户所发布的一切资源内容不代表本站立场，并不代表本站赞同其观点和对其真实性负责，若您对本站所载资源作品版权归属存有异议，请留言附说明联系邮箱，我们将在第一时间予以处理，同时向您表示歉意！为尊重作者版权，请购买原版作品，支持您喜欢的作者，谢谢！
4. 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客如有发现请立即向站长举报；本站资源文件大多存储在云盘，如发现链接或图片失效，请联系作者或站长及时更新。

THE END

喜欢就支持一下吧