CSS 带搜索导航栏的示例代码
网站建设 2023-01-28 21:39www.1681989.com免费网站
本文为大家介绍如何使用 CSS 创建一个带搜索的导航栏。
以下实例均是响应式的。
可以先看下效果图
创建一个搜索栏
<div class="nav"> <a class="active" href="#home">主页</a> <a href="#about">关于</a> <a href="#contact">联系我们</a> <put type="text" placeholder="搜索.."> </div>
/ 在顶部导航栏中添加黑色背景颜色 /
.nav {
overflow: hidden;
background-color: #e9e9e9;
}
/ 设置导航栏的链接样式 /
.nav a {
float: left;
display: block;
color: black;
text-align: center;
paddg: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/ 在悬停时更改链接的颜色 /
.nav a:hover {
background-color: #ddd;
color: black;
}
/ 突出显示当前选中的元素 /
.nav a.active {
background-color: #2196F3;
color: white;
}
/ 设置导航栏的搜索框样式 /
.nav put[type=text] {
float: right;
paddg: 6px;
border: none;
marg-: 8px;
marg-right: 16px;
font-size: 17px;
}
/ 当屏幕宽度小于 600px 时，垂直堆叠显示菜单选项和搜索框 /
@media screen and (max-width: 600px) {
.nav a, .nav put[type=text] {
float: none;
display: block;
text-align: left;
width: 100%;
marg: 0;
paddg: 14px;
}
.nav put[type=text] {
border: 1px solid #c;
}
}
CSS 带搜索导航栏 - 带提交按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.)</title>
<meta name="viewport" content="width=device-width, itial-scale=1">
<style>
{box-sizg: border-box;}
body {
marg: 0;
font-family: Arial, Helvetica, sans-serif;
}
.nav {
overflow: hidden;
background-color: #e9e9e9;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
paddg: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.nav a.active {
background-color: #2196F3;
color: white;
}
.nav .search-contaer {
float: right;
}
.nav put[type=text] {
paddg: 8px;
marg-: 8px;
font-size: 17px;
border: none;
}
.nav .search-contaer button {
float: right;
paddg: 6px;
marg-: 8px;
marg-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: poter;
}
.nav .search-contaer button:hover {
background: #c;
}
@media screen and (max-width: 600px) {
.nav .search-contaer {
float: none;
}
.nav a, .nav put[type=text], .nav .search-contaer button {
float: none;
display: block;
text-align: left;
width: 100%;
marg: 0;
paddg: 14px;
}
.nav put[type=text] {
border: 1px solid #c;
}
}
</style>
</head>
<body>
<div class="nav">
<a class="active" href="#home">主页</a>
<a href="#about">关于</a>
<a href="#contact">联系我们</a>
<div class="search-contaer">
<form action="/action_page.php">
<put type="text" placeholder="搜索.." name="search">
<button type="submit">提交</button>
</form>
</div>
</div>
<div style="paddg-left:16px">
<h2>响应式搜索菜单</h2>
<p>导航栏里面有一个搜索框。</p>
<p>调整浏览器窗口的大小, 查看效果。</p>
</div>
</body>
</html>
CSS 带搜索导航栏 - 带搜索图标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.)</title>
<lk rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/font-awesome/4.7.0/css/font-awesome.m.css">
<style>
{box-sizg: border-box;}
body {
marg: 0;
font-family: Arial, Helvetica, sans-serif;
}
.nav {
overflow: hidden;
background-color: #e9e9e9;
}
.nav a {
float: left;
display: block;
color: black;
text-align: center;
paddg: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.nav a:hover {
background-color: #ddd;
color: black;
}
.nav a.active {
background-color: #2196F3;
color: white;
}
.nav .search-contaer {
float: right;
}
.nav put[type=text] {
paddg: 6px;
marg-: 8px;
font-size: 17px;
border: none;
}
.nav .search-contaer button {
float: right;
paddg: 6px 10px;
marg-: 8px;
marg-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: poter;
}
.nav .search-contaer button:hover {
background: #c;
}
@media screen and (max-width: 600px) {
.nav .search-contaer {
float: none;
}
.nav a, .nav put[type=text], .nav .search-contaer button {
float: none;
display: block;
text-align: left;
width: 100%;
marg: 0;
paddg: 14px;
}
.nav put[type=text] {
border: 1px solid #c;
}
}
</style>
</head>
<body>
<div class="nav">
<a class="active" href="#home">主页</a>
<a href="#about">关于</a>
<a href="#contact">联系我们</a>
<div class="search-contaer">
<form action="/action_page.php">
<put type="text" placeholder="搜索.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
<div style="paddg-left:16px">
<h2>响应式搜索菜单</h2>
<p>导航栏里面有一个搜索框。</p>
<p>调整浏览器窗口的大小, 查看效果。</p>
</div>
</body>
</html>
到此这篇关于CSS 带搜索导航栏的示例代码的文章就介绍到这了,更多相关CSS 搜索导航栏内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！