实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body{
margin:0;
}
ul{
list-style-type:none;
overflow:hidden;
padding:0;
margin:0;
background-color:#333;
}
li{
float:left;
}
li a{
display:block;
padding:14px 16px;
color:white;
text-decoration:none;
}
li.about{
float:right;
}
a.home{
background-color:#4CAF50;
}
li a:hover:not(.home){
background-color:black;
}
@media screen and (max-width:600px){
li,li.about{
float:none;
}
}
div{
padding:10px 16px;
}
</style>
</head>
<body>
<ul>
<li><a class="home" href="https://www.dwoke.com">Home</a></li>
<li><a href="https://www.dwoke.com">News</a></li>
<li><a href="https://www.dwoke.com">Contact</a></li>
<li class="about"><a href="https://www.dwoke.com">About</a></li>
</ul>
<div>
<h1>响应式顶部导航栏实例</h1>
<p>此示例使用媒体查询在屏幕尺寸小于或等于600像素时垂直堆叠topnav。</p>
<p>你稍后将在我们的css教程中尝到有关媒体查询和响应式web设计的更多知识。</p>
<h5>请调整浏览器窗口的大小以查看效果。</h5>
</div>
</body>
</html>
运行效果：
评论