¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Menu horizontal con html5 y css3
#1
0
En esta practica les traigo como hacer un menu horizontal utilizando html5 y css3 naturalmente, a continuación el codigo de la practica para que puedan replicarlo en sus casas.

CODIGO CSS
Código:
/*Body*/
body
{
   margin:0px;
   padding-top:5px;
}

#main_container
{
   width:90%;
   margin-left:5%;
   padding-top:5px;
   padding-bottom:5px;
   float:left;
   border: 3px outset;
}

/*Content*/

.content{
   width:90%;
   margin-top:5px;
   margin-left:5%;
   padding-bottom:50px;
   background:#ffffff;
   border: 1px dashed;
   height: auto;
   float:left;
}

.content article
{
   padding: 3%;

}

.content article h2
{

}

/*Header*/

.header
{
   width:90%;
   margin-top:5px;
   margin-left:5%;
   background:#ffffff;
   border: 3px outset;
   height: 200px;
   float:left;
}

/*Menu */
.top_menu ul
{
   list-style:none;
   float:left;
   border: 1px dashed;
   padding: 2%;
   width:95%;
}

.top_menu ul li
{
   float:left;
   margin-right:20px;
   margin-bottom:10px;
   background: #ff812d;
   padding:5px;
   border-radius: 15%;
}
.top_menu ul li a
{
   color: #FFFFFF;
   text-decoration:none;
}
.top_menu ul li a:hover
{
   color: blue;
}

/*Footer*/
.footer
{
   width:90%;
   margin-top:5px;
   margin-left:5%;
   background:#ffffff;
   border: 3px outset;
   height: 110px;
   float:left;
}

.footer_msg
{
   margin-top: 40px;
float: left;
margin-left: 5%;
font-size: 0.8em;
color: rgb(126, 126, 126);
}

CODIGO HTML
Código:
<!DOCTYPE  html>
<html>
<head>
   <meta charset="UTF-8">
   <title>foro.lagrihost.com</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
   <section id="main_container">
       <header class="header">
           <h1>Tutoriales - Html/Css</h1>
           <nav class="top_menu">
               <ul>
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Item 2</a></li>
                   <li><a href="#">Item 3</a></li>
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Item 2</a></li>
                   <li><a href="#">Item 3</a></li>
               </ul>
           </nav>
       </header>

       <section class="content">
           <article>
               <h2>Lorem Ipsum</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet scelerisque arcu, vitae mattis turpis.
                Cras dictum nisl non vulputate mollis. Vestibulum in elit vel sapien venenatis aliquam tincidunt nec arcu.
               Pellentesque non consequat felis, ac accumsan tellus. Donec sem magna, sagittis nec erat fringilla, commodo aliquet massa.
               Mauris risus lectus, ornare vel venenatis a, rutrum at augue. Nam eget turpis at metus commodo dignissim sit amet id lectus.
               Aliquam consectetur sem eget sem vehicula, nec laoreet felis pellentesque. Vivamus turpis ipsum, rutrum facilisis est semper,
               egestas congue nibh. Maecenas sodales leo sed quam lacinia luctus. Aliquam scelerisque rutrum nisi, ut tincidunt lorem pharetra in.
                Curabitur malesuada dolor ac accumsan ornare. Curabitur pellentesque gravida ipsum, at elementum tortor convallis nec. Aenean
                 condimentum, nunc ac tincidunt tristique, odio ante euismod ligula, et ullamcorper mauris nisi ut ligula. Vivamus faucibus mattis
                  turpis ac aliquet. Nam elementum velit ut lectus vestibulum, eu pretium turpis vehicula.
               </p>
           </article>
       </section>
       <footer class="footer">
           <span class="footer_msg"> pie de página - www.lagrihost.com</span>
       </footer>
   </section>
</body>    
</html>



Posibles temas similares…
Tema Autor Respuestas Vistas Último mensaje
  Ayuda Con Programa De Afiliado alieninc 6 1,722 19-06-2018, 05:32 PM
Último mensaje: alieninc
  Tutorial Como hacer chat con el símbolo del sistema (CMD) Diringax 0 939 10-07-2017, 06:07 PM
Último mensaje: Diringax
  Formato de los enlaces con css torgar22 0 1,081 23-10-2015, 06:42 PM
Último mensaje: torgar22
  LA FECHA EN CUALQUIER IDIOMA CON PHP torgar22 0 856 26-08-2015, 02:17 PM
Último mensaje: torgar22
  RESOLUCIÓN DE UNA ECUACIÓN DE SEGUNDO GRADO CON PHP torgar22 0 1,672 26-08-2015, 02:15 PM
Último mensaje: torgar22



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018