Ahora comenzare con Lesson 2 Pantalla Principal(Menu)
Me van a disculpar la tardancia….. =D
Si se perdieron Lesson 1 aqui les dejo el link Lesson1
Bueno comenzemos.!!!!
MMMmmmm… Bueno creo q lo ultimo q vimos fue la parte LogIn, Si se recuerden el resultado del LogIn tenia que dar esto:
Ahora vamos a crear la pagina y menu
principal.php
<html>
<div>
</div>
<head>
<title></title>
<link rel=”stylesheet” href=”css/main.css” type=”text/css”>
<style type=”text/css”>.Estilo2 {font-family: “Bookman Old Style”}
body {
background-image: url(wallpaper-509685.jpg);
}
.Estilo6 {color: #FFFFFF}
.Estilo7 {font-size: 3pc; color: #000000}
</style>
</head><center>
<div>
<h2><span><font color=”Maroon”>Pantalla</font><font color=”blue”> ALSW</font></span></h2>
<p> </p>
<p> </p>
<p> </p>
<ul>
<!–li><a href=”principal.php”>Inicio</a></li–>
<li><a href=”#”>Ver registros</a>
<ul><li><a href=”bus_producto.php”>Ver Productos</a></li>
</ul>
</li>
<li><a href=”#”>Insertar</a>
<ul><li><a href=”agregar_producto.php”>Agregar Producto</a></li>
</ul>
</li></li>
<li><a href=”#”>Log Out</a>
<ul><li><a href=”logout.php”>Desea Salir?</a></li>
</ul>
</li></center>
</body>
</html>
Resultado:
Ahora pongamos un toque mas visible y profesional al menu con la ayuda de css
Pero primero creamos una carpeta llamado css dentro del archivo ALSW
Como asi:
Dentro de la carpeta css vamos a guardar el siguiente rollo de codigo css
main.css
*
{
margin: 0px;padding: 0px;
outline: 1000;}
html, body
{
width: 25%;
}body
{
font-family: Candara;
font-weight: bold;
font-size: 1pc;
color: #000066;
background-color: #ffffff;
}.menu
{text-align: center;
width: 1000px;
margin: 100px auto;
}
.menu ul
{
list-style-type: none;
}.menu ul li.nivel1
{
float: right;width: 140px;
margin-right: 100px;
}
.menu ul li a
{
display: table-cell;
color:#000000;
text-decoration: none;background-color: #0000;
border: solid 1px #ffffff;
padding: 6px;
position: relative;
}
.menu ul li:hover
{
position: relative;}
.menu ul li a:hover, .menu ul li:hover a.nivel1
{
color: #000000;background-color: #ffffff;
position: relative;
}
.menu ul li a.nivel1
{
display: block!important;
display: none;position: relative;
}
.menu ul li ul
{
display: none;}
.menu ul li a:hover ul, .menu ul li:hover ul
{
display: block;position: absolute;
left: 0px;}
.menu ul li ul li a
{
width: 140px;border-top-color: #000000;
padding: 6px 0px 8px 0px;
}
.menu ul li ul li a:hover
{
border-top-color: #000000;position: relative;
}
De ultimo para darle un Toque SeXy pongamos un fondo como este:
El Resultado final se va ver asi:
Bueno esto es lo ultimo de Lesson 2 !!
Espero preguntas, comentarios( o errores) y si saben una mejor manera de mejorar algun codigo compartalo con tod@s porfavor.
Lesson 3 Insertar y Ver Registros coming soon.!
