Cómo hacer una cabecera con el logotipo y la barra de búsqueda utilizando HTML y CSS?

Dado que, HTML se utiliza para describir el contenido y el diseño se proporciona mediante CSS. Por lo tanto, hoy vamos a aprender cómo hacer encabezado del sitio web utilizando HTML y CSS ? Cabecera de cualquier página web contiene un logotipo de la compañía botones de inicio de sesión, el menú de la página web, y la barra de búsqueda, registro y. Pero aquí vamos a ver cómo podemos hacer que la cabecera usando solamente logotipo de la empresa y la barra de búsqueda.

Desde cabecera está diseñado en cada diseño de sitios web. Contiene varios elementos como el logotipo de la empresa, varios menús, etc.

En primer lugar , haremos una sección div con el nombre class cabecera . Es como un recipiente que contiene varios elementos HTML. Definimos div en html de la siguiente manera,

HTML

<div class="header">
</div>

Definiremos elemento del cuerpo CSS class con margen: 0px; y padding: 0px; para que ningún espaciamiento es de alrededor de elemento de cabecera. Con esto se va a ocupar toda la anchura sin ningún margen o relleno alrededor de ella. Desde margen es el espacio fuera del elemento HTML y el relleno es el espacio en el interior del elemento html.

CSS

body{
margin:0px;
padding:0px;
}

Después de esto vamos a definir CSS de div cabecera con anchura: 100%; , altura: 60px y background-color de cabecera. Anchura: 100% tomará anchura entera de dispositivo.

class se define con “” Y el nombre for. Define styling de tipo similar de elementos.

Ejemplo

.header{
width:100%;
height:60px;
background-color:#E6E6FA;
}

Después de definir cabecera contenedor ahora vamos a definir cómo alinear nombre del sitio web logotipo y la barra de búsqueda en la cabecera de la página web.

Ahora vamos a definir encabezamiento E1 y su CSS de la siguiente manera ,

<h1 class="logo">Website Logo</h1>

Ya que sabemos elemento h1 es elementos de bloque . elementos de bloque siempre tienen ancho y no permite ningún elemento al lado de él. Así lo haremos inline-block . Un elemento en línea toma sólo anchura necesaria pero no puede proporcionar la altura y la anchura de la misma. Así que vamos a utilizar propiedad de presentación de inline-block, ya que puede tener anchura y altura y podemos class con otros elementos. Vamos a ofrecer propiedad de visualización como,

display:inline-block;

Utilizaremos propiedad class en el encabezamiento. class propiedad ayuda a alinear los elementos de izquierda o derecha del contenedor. Podemos colocar varios elementos a su alrededor. Si queremos eliminar la propiedad class y elementos HTML queremos que vengan a nueva línea de romper el flujo class, utilizaremos propiedad clear .

Ejemplo

Sin claro div2 es después de div1, ya div1 se hace flotar a la izquierda del texto en div2 se hace flotar alrededor div1 y div2 lo rodea.

How to make a header with logo and search bar using html and CSS? - 4

Con propiedad clear podemos pasar div2 abajo div1.The propiedad clear se utiliza en la misma dirección de los elementos Class. class ejemplo, tuvimos que flotaba div 1 a la izquierda por lo que vamos a utilizar claro: CSS izquierda. Con el uso de clara, div2 vendrá a continuación div1, clara: a la izquierda ;

How to make a header with logo and search bar using html and CSS? - 5

Este es el CSS de encabezamiento E1 utilizado,

.logo{
color:#663399;
font-size:25px;
font-family:verdana;
text-align:left;
margin-top:0px;
float:left;
margin:0px;
line-height:50px;
padding-left:9px;
}

Tuvimos la propiedad line-height usado. Define cantidad de espacio por encima y por debajo de los elementos HTML. Se utiliza para alinear dos elementos en una misma línea de altura.

Nosotros proporcionamos padding-left de encabezamiento E1 modo que un poco de espacio es en el lado izquierdo antes de logotipo de la empresa.

Adición de barra de búsqueda

Ahora haremos barra de búsqueda usando elementos de forma y de entrada. Definimos forma con forma tag & lt; form & gt; … & lt; form / & gt ;. Hacer una barra de búsqueda utilizando el elemento de entrada de la siguiente manera,

<input type="text" name="searchbar" placeholder="search.." size="70">

Desde , vamos a alinear barra de búsqueda a la derecha así que utilizaremos siguiente propiedad de CSS en el elemento de formulario,

float:right;
display:inline-block;
line-height:52px;
padding-right:14px;

Código HTML con CSS

<!DOCTYPE html>
<html>
<head>
<title>Header Demo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
.header{
width:100%;
height:60px;
background-color:#E6E6FA;
}
body{
margin:0px;
padding:0px;
}
.logo{
color:#663399;
font-size:25px;
font-family:verdana;
text-align:left;
margin-top:0px;
float:left;
margin:0px;
line-height:50px;
padding-left:9px;
}
</style>
</head>
<body>
<div class="header">
<h1 class="logo">Website Logo</h1>
<form style="float:right;display:inline-block;line-height:52px;padding-right:14px;">
<input type="text" name="searchbar" placeholder="search.." size="70">
</form>
</div>
</body>
</html>

salida

How to make a header with logo and search bar using html and CSS? - 6


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *