Para Menu y Login

UNIVERSIDAD NACIONAL PEDRO RUIZ GALLO
FACULTAD DE INGENIERIA CIVIL, SISTEMAS Y

ARQUITECTURA
ESCUELA PROFESIONAL DE INGENIERIA DE SISTEMAS
Para menú y Log In
Docente:
Jorge Alberto Díaz Plaza
Asignatura:
Taller de programación
Alumno:
Pérez Rocha José Eduardo
Ciclo:
5to Ciclo
Tema:
Para menú y Log In
Lambayeque, agosto del 2021

Informe sobre la creación de dos menú y dos Log In
Para la creación de nuestra menú y login, Ingresaremos a NetBeans y procederemos a
crear un nuevo proyecto en Java web  Web Application , el cuál llamaremos:
PrimeraAppWeb
Abriremos el folder de Web Page y nos daremos cuenta que tenemos 2 folder:
META-INF y WEB- INF, procederemos a crear dos folders adicionales el cual
llamaremos Vista(Nos servirá para crear los codigos de Html, es opcional) y el otro
CSS(Para crear nuestro estilos que utilizaremos en la creación de nuestro menú y Log
In)

En el Folder de CSS, crearemos:
En caso de no encontrarlo, daremos click en Other y buscaremos Cascading Style Sheet

en la categoria HTML5/JavaSript.
Crearemos cuatro CSS:
De la misma manera, crearemos en el Folder de vista 4 HTML

Posteriormente, pasaremos a la creación tanto del código HTML como del css de cada
uno de lo acordado.
1. Creación del primer Log In (Login1)

Para la creación de nuestro primer login, trabajaremos con Login1.html y el
EstiloLogin1.css
Crearemos el codigo para cada uno quedandonos de la siguiente manera:

Login1.html
<html>
<head>
<title>Login1</title>
<meta
charset="utf-8">
<meta http-
equiv="X-UA-
Compatible"
content="IE=edge,ch
rome=1">
<link
href="CSS/EstiloLogi
n1.css"
rel="stylesheet"
type="text/css"/>
</head>
<body>
<div
class="uno">Bienve
nido</div>
<div
id="contenido">
<form>
<div
class="contenido">
<img
src="Imagen/img1.jp
g" alt=""/>
<div
class="texto-
encima">
<div><label
for="usuario">Usuari
o:</label>
<input
type="name"><!--
Para ingresar
nombre de usuario--
>

<br><br></div>
EstiloLogin1
.uno {
background-
color: #328db5;
text-align:
center;
font-weight:
bold;
font-size: 80;
}
div form div img{
background-
size:cover;
background-
attachment: fixed;
}
div form {
vertical-align:
text-top;
}
.contenido {
position:
relative;
display:
inline-block;
text-align:
center;
}
.texto-encima {
position:
absolute; Quedándome, más a menos así:
top: 40%;
left: 50%;
transform:
translate(-50%, -
50%);
}
2. Creación del segundo Log In (Login2)
Pasando con la creación del segundo Log In, tendremos otro diseño, el cuallleva
un cuadro; para ello se usaron los siguientes códigos:
Login2
<html>
<head>
<meta
charset="utf-8">
<title>Log In
2</title>
<link
rel="stylesheet"
href="../CSS/EstiloL
ogin2.css">
</head>
EstiloLogin2
body {
margin: 0;
padding: 0;
background:
url(../Imagen/img1.jpg
) no-repeat center top;
background-size:
cover;
font-family: courier;
height: 100vh;
}
.recuadro {
width: 420px; Lambayeque, agosto del 2021
height: 390px;
background: black;
.recuadro
input[type="text"], .recua
dro
input[type="password"] {
border: none;
border-bottom: 1px
solid white;
background:
transparent;
outline: none;
height: 40px;
color: white;
font-size: 16px;
font-family: courier;
}
.recuadro
input[type="submit"] { Lambayeque, agosto del 2021
border: none;
outline: none;
3. Creación del primer menú (Menu1)
Para la creación del login tuve algunos inconvenientes a la hora de centrar el
contenido, y algunos otros inconvenientes
Menu1
<!DOCTYPE html>
<html lang="es">
<th rowspan="3" class=
<head> </li>
"salir"><a href="#">Sa

<meta charset="UTF-8">
lir</a></th>
<li><a href="#">C
<meta http-equiv="X- EstiloMenu2
</
ONTACTO</a>
UA-Compatible" content="IE
tr>

=edge">
</
<ul class="su
<meta name="viewport"
*{
table>
bmenu">
content="width=device-
margin: 0;
</div>

width, initial-scale=1.0">
.centro {
padding:
</td>0;
<li><a hr
<title>Menu Vertical</
margin: 0;
</tr>
ef="#">Contacto</a></
title> li a:hover { border-
.menu
-webkit-box-sizing:
padding: 0;
</table>
li>
<link rel="stylesheet"
box; display: block;
text-align: center;

href="../css/
}-moz-box-sizing:
<table class="segu
<li><a hr
color:#dd8538;
estilomenu1.css"> border-
nda">
ef="#">email</a></li>
</head>
box;
.encabezado { all .3s;
transition:
<tr>

<body>
width: 800px;
box-sizing: border-box;
} <div class="centro">
<td>
<li><a hr
background: #BBEBFB;
text-decoration: none;
<div c
ef="#">Facebook</a></
<table class="primera"
.submenu
}>li>
{
lass="navegar">
list-style: none;
position: absolute;

<tr>
}
<ul class="menu">
</ul>
<td>
background:
.titulo { white;
.logo {

<div class
font-family: Arial;
font-size: 12px;
<li><a href="#">I
</li>
="encabezado">
height: 100%;
font-size: 12px;
NICIO</a>

<table cla
width:0;200%;
width:
text-align: center;

</ul>
ss="primera">
visibility: hidden;
background:
<ul class="su
</div>
} <tr>
</td>
bmenu">
opacity: 0;
<t
url(../imagen/img4.jpg)
.salir { no-
</tr>
h rowspan="3" class="logo"
repeat center top;
transition:
font-family: opacity 1.5s;
Arial;
<li><a hr
</table>
titulo="Logo de la escuela
font-size: 10px;
background-size:
ef="#">Malla curricula
</div> cover;
}profesional Ingenieria de
4. Creación del segundo menú (Menu2)

Para Menu y Login

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Para Menu y Login

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD NACIONAL PEDRO RUIZ GALLO

FACULTAD DE INGENIERIA CIVIL, SISTEMAS Y

Jorge Alberto Díaz Plaza

Pérez Rocha José Eduardo

Para menú y Log In

Lambayeque, agosto del 2021

Lambayeque, agosto del 2021

En caso de no encontrarlo, daremos click en Other y buscaremos Cascading Style Sheet

De la misma manera, crearemos en el Folder de vista 4 HTML

Lambayeque, agosto del 2021

1. Creación del primer Log In (Login1)

Lambayeque, agosto del 2021

Lambayeque, agosto del 2021

Lambayeque, agosto del 2021

También podría gustarte