Practica de html5 y css3
0 recomendaciones760 vistas
Este documento proporciona instrucciones para completar un proyecto de diseño web, incluyendo la estructura del sitio, archivos necesarios como index.html y estilo.css, y código de plantilla. También incluye código CSS para el diseño adaptable del menú de navegación para diferentes tamaños de pantalla.
Practica de html5 y css3
- 1. IESTP “Ramón Copaja” Lic. Noé ARPASI JIMÉNEZ -1- U.D. “Diseño Web” PRACTICA DE HTML5 Y CSS3 1. Plantilla para el proyecto05: 2. Estructura del sitio para el proyecto05 NOTA: Los archivos necesarios para el proyecto05 que se estuvo realizando en clases pueden descargarlo de la siguiente dirección URL: https://yadi.sk/d/6VuN82ElhTFUn 3. Archivos que se deben realilizar: 3.1.Archivo: index.html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum- scale=1"> <title>Proyecto Diseño Web 2015</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/estilo.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script> BANNER MENU BANNER
- 2. IESTP “Ramón Copaja” Lic. Noé ARPASI JIMÉNEZ -2- U.D. “Diseño Web” <script> $(function() { var pull = $('#pull'); menu = $('nav ul'); menuHeight = menu.height(); $(pull).on('click', function(e) { e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); if(w > 320 && menu.is(':hidden')) { menu.removeAttr('style'); } }); }); </script> </head> <body> <header class="container"> <img src="images/logo044.png" alt="" id="logo"> </header> <nav class="clearfix"> <ul class="clearfix"> <li><a href="#">Inicio</a></li> <li><a href="#">Proyectos</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Clientes</a></li> <li><a href="#">Nosotros</a></li> <li><a href="#">Contacto</a></li> </ul> <a href="#" id="pull">MENU</a> </nav> </body> </html> 3.2.Archivo: estilo.css .container { width: 900px; margin: 0 auto; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { background-color: #E9E4E4; }
- 3. IESTP “Ramón Copaja” Lic. Noé ARPASI JIMÉNEZ -3- U.D. “Diseño Web” nav { height: 40px; width: 100%; background: #0A5E8F; font-size: 11pt; font-family: Arial, sans-serif; font-weight: bold; position: relative; border-bottom: 2px solid #B60921; } nav ul { padding: 0; margin: 0 auto; width: 600px; height: 40px; } nav li { display: inline; float: left; } nav a { color: #fff; display: inline-block; width: 100px; text-align: center; text-decoration: none; line-height: 40px; text-shadow: 1px 1px 0px #283744; } nav li a { border-right: 1px solid #576979; /*linea a la derecha de item menu */ box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } nav li:last-child a { border-right: 0; /*Suprime linea a la derecha de item menu CONTACTO*/ } nav a:hover, nav a:active { background-color: #59A5E5; } nav #pull { display: none; } @media screen and (max-width: 900px){ nav { height: auto; } nav ul { width: 100%; display: block; height: auto; } nav li { width: 50%; float: left; position: relative; } nav li a { border-bottom: 1px solid #576979; border-right: 1px solid #576979; } nav a { text-align: left; width: 100%; text-indent: 25px; } }
- 4. IESTP “Ramón Copaja” Lic. Noé ARPASI JIMÉNEZ -4- U.D. “Diseño Web” @media screen and (max-width: 480px) { nav { border-bottom: 0; } nav ul { display: none; height: auto; } nav a#pull { display: block; background-color: #0A5E8F; width: 100%; position: relative; border-bottom: 2px solid #B60921; } nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width: 30px; height: 30px; display: inline-block; position: absolute; right: 15px; top: 10px; } } @media only screen and (max-width: 320px) { nav li { display: block; float: left; width: 100%; } nav li a { border-bottom: 1px solid #576979; } }