踏遍青山
Log in
Main
临时存放
响应式布局测试
root
abc abc
5 Jul
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { background-color: #333; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .logo { font-size: 24px; } #navbar a { color: white; text-decoration: none; margin: 0 15px; transition: all 0.3s ease; } #navbar a:hover { color: #ddd; } #toggleMenu { display: none; background: none; border: none; color: white; font-size: 24px; cursor: pointer; } .content-block { padding: 20px; border-bottom: 1px solid #ccc; } @media (max-width: 768px) { #navbar { position: absolute; top: 60px; left: 0; right: 0; background: #333; display: none; flex-direction: column; width: 100%; } #navbar.active { display: flex; } #navbar a { display: block; padding: 10px; text-align: center; } #toggleMenu { display: block; } } </style> </head> <body> <header> <div class="logo">Logo</div> <nav id="navbar"> <a href="#home">首页</a> <a href="#services">服务</a> <a href="#about">关于我们</a> <a href="#contact">联系我们</a> </nav> <button id="toggleMenu">☰</button> </header> <main> <section class="content-block"> <h2>欢迎来到我们的网站</h2> <p>这里是主页的内容。</p> </section> <section class="content-block"> <h2>我们的服务</h2> <p>这里介绍我们提供的服务。</p> </section> <section class="content-block"> <h2>关于我们的团队</h2> <p>了解我们的团队成员和使命。</p> </section> </main> <script> document.getElementById('toggleMenu').addEventListener('click', function() { var navbar = document.getElementById('navbar'); if (navbar.classList.contains('active')) { navbar.classList.remove('active'); } else { navbar.classList.add('active'); } }); </script> </body> </html>
<!DOCTYPE html>
<html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; } header { background-color: #333; color: white; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } .logo { font-size: 24px; } #navbar a { color: white; text-decoration: none; margin: 0 15px; transition: all 0.3s ease; } #navbar a:hover { color: #ddd; } #toggleMenu { display: none; background: none; border: none; color: white; font-size: 24px; cursor: pointer; } .content-block { padding: 20px; border-bottom: 1px solid #ccc; } @media (max-width: 768px) { #navbar { position: absolute; top: 60px; left: 0; right: 0; background: #333; display: none; flex-direction: column; width: 100%; } #navbar.active { display: flex; } #navbar a { display: block; padding: 10px; text-align: center; } #toggleMenu { display: block; } } </style> </head> <body> <header> <div class="logo">Logo</div> <nav id="navbar"> <a href="#home">首页</a> <a href="#services">服务</a> <a href="#about">关于我们</a> <a href="#contact">联系我们</a> </nav> <button id="toggleMenu">☰</button> </header> <main> <section class="content-block"> <h2>欢迎来到我们的网站</h2> <p>这里是主页的内容。</p> </section> <section class="content-block"> <h2>我们的服务</h2> <p>这里介绍我们提供的服务。</p> </section> <section class="content-block"> <h2>关于我们的团队</h2> <p>了解我们的团队成员和使命。</p> </section> </main> <script> document.getElementById('toggleMenu').addEventListener('click', function() { var navbar = document.getElementById('navbar'); if (navbar.classList.contains('active')) { navbar.classList.remove('active'); } else { navbar.classList.add('active'); } }); </script> </body> </html>