Publicado el Deja un comentario

Php 23. Acceso Usuarios

En este video creamos la plantilla en html que nos servira para preparar la entrada de usuarios con php y mysql.
A esta plantilla le damos formato con el archivo css.
El siguiente video tendra codigo php para comenzar el proyecto.






Index

<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”initial-scale=1,width=device-width”>
<meta name=”keywords” content=”acceso,usuarios,php,mysqli”>
<link rel=”stylesheet” href=”css/estilos.css” type=”text/css”>
<title>Acceso Usuarios</title>
</head>
<body>
<header id=”cabecera”>
<nav id=”navegacion”>
<ul>
<li><a href=”#”>Inicio</a></li>
<li><a href=”#”>Acerca de</a></li>
</ul>
</nav>
</header>
<div id=”contenido”>
<section>
<article>
<div id=”formulario”>
<h1>Acceso usuarios</h1>
<form autocomplete=”off” action=”index.php” method=”post” name=”formulario”>
<input type=”text” name=”nombre” required placeholder=”Nombre”/><br/>
<input type=”password” name=”clave” required placeholder=”Clave”/><br/>
<input type=”submit” value=”Entrar” class=”boton”/>
</form>
</div>
</article>
</section>
<aside></aside>
<footer id=”pie”>
<p>@Copyright ——</p>
</footer>
</div>
</body>
</html>




Estilos Css

*{
margin:0 auto;
color: white;
padding:2px;
font-family:sans-serif,Helvetica,Arial;
text-decoration:none;
}
header,nav,section,article,aside,footer{
display:block;
background:linear-gradient(200deg,orange,blue);
}
#cabecera{
height:auto;
width:100%;
margin-bottom:5px;
padding:5px;
}
#navegacion{
padding:5px;
margin:2px;
text-align:center;
}
#navegacion li{
display:inline-block;
text-align:center;
padding:2px;
margin:2px;
}
#navegacion li a{
background-color:orange;
color:blue;
text-decoration:none;
padding:10px;
}
#navegacion li a:hover{
background-color:yellow;
color:red;
}
#formulario{
display:block;
text-align:center;
margin:10px;
padding:5px;
}
input[type=”text”],input[type=”password”]{
border-radius:5em;
color:blue;
padding:2px;
margin:5px;
}
.boton{
border-radius:5em;
color:blue;
padding:2px;
margin:5px;
width:120px;
}
#pie{
margin-top:5px;
padding:5px;
font-size:0.5em;
}


Enlace video instalacion WampServer

Please follow and like us:

Deja un comentario