Sugerencia 1: Cómo crear un menú emergente
Sugerencia 1: Cómo crear un menú emergente
Con la ayuda de un código HTML competente y reglas CSS simples, puede crear una buena ventana emergente menú, que se puede cambiar y complementar fácilmente. Al utilizar las herramientas de lenguaje de marcado y las hojas de estilo en cascada, puede garantizar un funcionamiento correcto menú en todos los navegadores
Instrucciones
1
Primero, crea la estructura básica de tu menú. Abra un editor de texto y cree una lista numerada desde abajomenú, que actúa como un elemento de la lista principal. Por ejemplo:
El primer elemento Elemento desplegable Elemento desplegable2
2
Guarde la lista creada en un archivo html por separado. A continuación, cree un archivo con la extensión .Css e ingrese todos los parámetros de la hoja de estilos.
3
Elimine todas las sangrías y marcadores que se usan en la lista no numerada, y configure el ancho menú usando herramientas CSS: ul {list-style: none; width: 200px; }
4
Establezca la posición relativa de todos los elementos de la lista utilizando el atributo de posición: ul li {position: relative; }
5
Además, es necesario emitir bajomenú, cada uno de cuyos elementos aparecerá a la derecha del padre menú en el momento en que el puntero estará sobre el punto: li ul {position: absolute; left: 199px; top: 0; display: none; } El atributo de la izquierda tiene un valor de un píxel más pequeño que el ancho del menú. Esto le permite colocar correctamente los puntos emergentes sin crear bordes dobles. El atributo de visualización se usa para ocultar elmenú cuando abres la página.
6
Establezca los estilos deseados para los enlaces utilizando las opciones de CSS adecuadas. Incluya la pantalla: parámetro de bloque para que cada enlace ocupe todo el espacio asignado.
7
Para menú apareció en el momento en que el cursor está sobre él (hover), debe ingresar el código: li: hover ul {display: block; }
8
Especifique, si lo desea, opciones adicionales para mostrar enlaces y elementos de la lista.
9
Pop-up menú listo Ahora es necesario incluir el atributo en el archivo .html: Pop-up menú
Consejo 2: Cómo hacer una página emergente
Cuando creas sitios se usan muy a menudoventanas emergentes como menús, textos de anuncios, etc. Además, el formulario compacto le permite ahorrar espacio en la página. Todo lo que necesitas es escribir el código correcto.
Instrucciones
1
Crear páginas emergentes se puede hacerbasado en javascript Sin embargo, hay una opción más simple: usar lenguaje de marcado HTML y lenguaje CSS. La conveniencia es que las ventanas creadas de esta manera serán compatibles con la mayoría de los navegadores, independientemente de si admiten javascript.
2
Dicho código se ubica en dos términos, en el primerola línea contiene un enlace que es responsable de abrir la ventana, la segunda línea es esencialmente una ventana emergente, el atributo onmouseover indica que el cursor estándar se mostrará cuando el tipo de cursor esté sobre el enlace, onclick indica que después de hacer clic en la ventana oculta se volverá visible: <a onmouseover = "this.style.cursor =" puntero "" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp "). style.display =" block ""> <span style = "text-decoration: underline;"> ¡Haz clic aquí! </ span> </a>
3
Deberá especificar el tamaño de la ventana, el color ytamaño del texto, fondo y marcos. Puede especificar todos estos parámetros en el atributo de estilo. El color está indicado por la tabla de códigos rgb. En la herramienta de pintura estándar en la ventana "Cambiar colores", puede encontrar el código del tono deseado, donde R es rojo, G es verde y B es azul (azul). Así que el negro es el código RGB (0,0,0), rgb blanco (255,255,255), RGB grises (126126126) <div id = estilo "popup" = "display: none; :. posición absoluta; left: 50px; la parte superior: 50px; frontera: 1px negro sólido; padding: 10px; background-color: rgb (255,255,225); text-align: justify; font-size: 12px; ancho: 135px; "> mensaje o texto en una ventana emergente de selección </ div> la pantalla con el valor especificado de none hace que su ventana sea invisible.
4
Ahora debe colocar estas dos líneas entre las etiquetas de su página <cuerpo> y </ cuerpo>. Después de eso, la ventana emergente está lista para funcionar.
5
Sin embargo, con este conjunto, recibirás constantementeabrir ventana Por lo tanto, si usted necesita para obtener una ventana emergente se puede cerrar, añadir un enlace, que será el responsable de esta acción, antes de la etiqueta </ div>: <br /> <div style = "text-align: right;"> <a onmouseover = "this.style.cursor =" puntero "" style = "font-size: 12px;" onfocus = "this.blur ();" onclick = "document.getElementById (" popup ") = style.display." ninguna ""> <span style = "text-decoration: underline;"> cerrar </ span> </a> </ div>
6
Es probable que desee hacer una ventana emergenteno mediante un clic, como se describe arriba, sino al pasar el cursor. A continuación, la primera línea debe ser escrito como sigue: <a onmouseover = "document.getElementById (" popup ") style.display =." Bloque "" onmouseout = "document.getElementById (" popup ") style.display =" ninguna "". onfocus = "this.blur ();"> <span style = "text-decoration: underline;"> pasa el ratón aquí </ span> </a>!
7
Entonces, el código HTML de la ventana emergente es ustedrecibido, y familiarizado con la estructura de su redacción. Todo lo que queda es decorar la apariencia y el contenido, lo cual, naturalmente, dependerá de tus habilidades, propósito e imaginación. Pero debemos recordar que esta es la opción más simple para crear una ventana emergente. Si tiene suficientes habilidades de programación en javascript (MooTools, jQuery, Prototype, etc.), puede crear una página más hermosa e interesante.
