Crear una barra de búsqueda en la barra de navegación es fácil, al igual que crear otra opción en la barra de navegación que buscará en la base de datos. Debe tener cuidado con el momento de colocar la barra de búsqueda. Asegúrese de colocarlos por separado en la barra de navegación. Para crear una barra de navegación que contenga una barra de búsqueda, necesitará HTML y CSS. La siguiente explicación lo guiará paso a paso sobre cómo crear una barra de búsqueda. Este artículo contiene 2 secciones en la primera sección adjuntaremos el enlace CDN para el icono y haremos una estructura básica. La segunda sección diseñará la barra de navegación y la barra de búsqueda en ella.
Creación de estructura: en esta sección, solo crearemos la estructura básica del sitio y también adjuntaremos el enlace CDN de Font-Awesome para los íconos que se usarán como un ícono de búsqueda en la barra.
- Enlaces CDN para los iconos de Font Awesome:
<enlace rel=”hoja de estilo” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
- Código HTML: El código HTML se utiliza para crear una estructura de barra de navegación que contiene la barra de búsqueda. Dado que no contiene CSS, es solo una estructura simple. Usaremos alguna propiedad CSS para hacerlo atractivo.
html
<!DOCTYPE html> <html> <head> <title> Create a Search Bar using HTML and CSS </title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <!-- Navbar items --> <div id="navlist"> <a href="#">Home</a> <a href="#">Our Products</a> <a href="#">Careers</a> <a href="#">About Us</a> <a href="#">Contact Us</a> <!-- search bar right align --> <div class="search"> <form action="#"> <input type="text" placeholder=" Search Courses" name="search"> <button> <i class="fa fa-search" style="font-size: 18px;"> </i> </button> </form> </div> </div> <!-- logo with tag --> <div class="content"> <h1 style="color:green; padding-top:40px;"> GeeksforGeeks </h1> <b> A Computer Science Portal for Geeks </b> <p> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well explained solutions for selected questions. </p> </div> </body> </html>
Diseño de Estructura: En la sección anterior, creamos la estructura del sitio básico donde vamos a utilizar la barra de navegación con la barra de búsqueda con el icono. Diseñaremos la estructura y adjuntaremos los íconos para cada barra de navegación.
- Código CSS: el código CSS se utiliza para hacer que el sitio web sea atractivo. Esta propiedad CSS se usa para crear el estilo en la barra de navegación que contiene la barra de búsqueda.
html
<style>
/* styling navlist */
#navlist {
background-color: #0074D9;
position: absolute;
width: 100%;
}
/* styling navlist anchor element */
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
}
.navlist-right{
float:right;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: #ddd;
color: black;
}
/* styling search bar */
.search input[type=text]{
width:300px;
height:25px;
border-radius:25px;
border: none;
}
.search{
float:right;
margin:7px;
}
.search button{
background-color: #0074D9;
color: #f2f2f2;
float: right;
padding: 5px 10px;
margin-right: 16px;
font-size: 12px;
border: none;
cursor: pointer;
}
</style>
Combinación de código HTML y CSS: este es el código final que es la combinación de las dos secciones anteriores. Mostrará la barra de navegación que contiene la barra de búsqueda.
html
<!DOCTYPE html>
<html>
<head>
<title>
Create a Search Bar using HTML and CSS
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* styling navlist */
#navlist {
background-color: #0074D9;
position: absolute;
width: 100%;
}
/* styling navlist anchor element */
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
}
.navlist-right{
float:right;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: #ddd;
color: black;
}
/* styling search bar */
.search input[type=text]{
width:300px;
height:25px;
border-radius:25px;
border: none;
}
.search{
float:right;
margin:7px;
}
.search button{
background-color: #0074D9;
color: #f2f2f2;
float: right;
padding: 5px 10px;
margin-right: 16px;
font-size: 12px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Our Products</a>
<a href="#">Careers</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
<!-- search bar right align -->
<div class="search">
<form action="#">
<input type="text"
placeholder=" Search Courses"
name="search">
<button>
<i class="fa fa-search"
style="font-size: 18px;">
</i>
</button>
</form>
</div>
</div>
<!-- logo with tag -->
<div class="content">
<h1 style="color:green; padding-top:40px;">
GeeksforGeeks
</h1>
<b>
A Computer Science
Portal for Geeks
</b>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
</body>
</html>
Producción:
HTML y CSS son la base de las páginas web. HTML se usa para el desarrollo de páginas web al estructurar sitios web, aplicaciones web y CSS se usa para diseñar sitios web y aplicaciones web. Puede obtener más información sobre HTML y CSS en los enlaces que figuran a continuación:
- Tutorial de HTML y ejemplos de HTML
- Tutorial de CSS y ejemplos de CSS
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA