版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/lengyuezuixue/article/details/82807251
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
*{
box-sizing:border-box;
}
body {
margin:0px;
font-family:Arial, Helvetica, sans-serif;
}
.topnav {
overflow:hidden;
background-color:#e9e9e9;
}
.topnav a {
float:left;
display:block;
color: black;
text-align:center;
padding: 14px 16px;
text-decoration: none;
text-align: left;
}
.topnav a:hover {
background-color:#ddd;
color:black;
}
.topnav a.active {
background-color:#2196F3;
color:white;
}
.topnav input[type=text] {
float:right;
padding:6px;
margin-top:8px;
margin-right:16px;
border:none;
font-size:17px;
}
@media screen and (max-width:600px) {
.topnav a, .topnav input[type=text] {
float:none;
display:block;
text-align:left;
width:100%;
margin:0;
padding:14px;
}
.topnav input[type=text] {
border:1px solid #ccc;
}
}
</style>
</head>
<body >
<div class="topnav">
<a class="active" href="#home">主页</a>
<a href="#about">关于</a>
<a href="#contact">联系我们</a>
<input type="text" placeholder="搜索..">
</div>
<div style="padding-left:16px">
<h2>响应式搜索菜单</h2>
<p>导航栏里面有一个搜索框。</p>
<p>调整浏览器窗口的大小, 查看效果。</p>
</div>
</body>
</html>
