La ventana del navegador es una herramienta para ver las páginas de Internet. Se utiliza para buscar el contenido en Internet y obtener la información relevante de Internet.
Creación de estructura: en esta sección, crearemos una estructura básica del sitio y también adjuntaremos el enlace CDN de Font-Awesome para los iconos que se utilizarán como icono de menú.
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:
html
<!DOCTYPE html> <html> <head> <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"> </head> <body> <div class="container"> <div class="geeks"> <div class="gfg left"> <i class="fa fa-google" aria-hidden="true">oogle</i> </div> <!-- Google icon from font awesome--> <div class="gfg middle"> <input type="text" value="https://www.geeksforgeeks.org/"> <i class="fa fa-search" aria-hidden="true"></i> </div> <div class="gfg right"> <div style="float:right"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </div> </div> <div class="body"> <h3>GeeksforGeeks</h3> <p>A Computer Science Portal for Geeks</p> </div> </div> </body> </html>
Estructura de diseño: En la sección anterior, hemos creado la estructura del sitio web básico que vamos a utilizar como ventana del navegador. En esta sección, diseñaremos la estructura de la ventana del navegador.
- Código CSS:
html
<style>
* {
box-sizing: border-box;
}
/* Container Design */
.container {
border: 2px solid #bdc3c7;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.geeks {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Input field design */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: gray;
padding: 5px;
}
.gfg {
float: left;
}
.middle {
width: 75%;
position: relative;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle i {
position: absolute;
left: 430px;
top: 2px;
color: gray;
}
.geeks:after {
content: "";
display: table;
clear: both;
}
/* Address bar design */
.bar {
width: 15px;
height: 3px;
margin: 3px 0;
display: block;
background-color: #aaa;
}
.body {
padding: 15px;
}
</style>
Solución final: este es el código final después de combinar las secciones anteriores. Será la ventana de los navegadores.
html
<!DOCTYPE html>
<html>
<head>
<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>
* {
box-sizing: border-box;
}
/* Container Design */
.container {
border: 2px solid #bdc3c7;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.geeks {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Input field design */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: gray;
padding: 5px;
}
.gfg {
float: left;
}
.middle {
width: 75%;
position: relative;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle i {
position: absolute;
left: 430px;
top: 2px;
color: gray;
}
.geeks:after {
content: "";
display: table;
clear: both;
}
/* Address bar design */
.bar {
width: 15px;
height: 3px;
margin: 3px 0;
display: block;
background-color: #aaa;
}
.body {
padding: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="geeks">
<div class="gfg left">
<i class="fa fa-google"
aria-hidden="true">oogle</i>
</div>
<!-- Google icon from font awesome-->
<div class="gfg middle">
<input type="text"
value="https://www.geeksforgeeks.org/">
<i class="fa fa-search"
aria-hidden="true"></i>
</div>
<div class="gfg right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="body">
<h3>GeeksforGeeks</h3>
<p>A Computer Science Portal for Geeks</p>
</div>
</div>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
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