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
No hay comentarios:
Publicar un comentario