Lesson 2 Pantalla Principal(Menu)

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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</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.!

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s