Back
CSS 响应式导航栏实例
阅读：5187 输入：2018-09-09
<html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>body {margin: 0;} ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover:not(.active) {background-color: #111;} ul.topnav li a.active {background-color: #4CAF50;} ul.topnav li.right {float: right;} @media screen and (max-width: 600px){ ul.topnav li.right, ul.topnav li {float: none;} }</style></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>
电脑版