响应式顶部导航 - 如何使用 CSS3 媒体查询来创建一个响应式导航。
引用示例
点击运行
自动执行
HTML 教程
JavaScript 教程
HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <ul class="topnav"> <li><a class="active" href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系</a></li> <li class="right"><a href="#about">关于</a></li> </ul> <div style="padding:0 16px;"> <h2>响应式导航栏实例</h2> <p>在屏幕宽度小于 600px 会重置导航栏。</p> <h4>重置浏览器窗口大小，查看效果。</h4> </div> </body> </html>
CSS
JAVASCRIPT
嵌入代码
