Este artículo presenta un marco que es tan simple que no puede ser más simple.
Primero veamos la composición de la página de este marco. Dado que es un programa de prueba puramente manual, acabo de hacer algún código en NotepA ++, lo cual es muy incompleto. Pero todavía contiene el contenido general en la marca de la marca. Ok, volvamos al grano, primero veamos la composición del archivo.
1.frame.html contiene la estructura del marco
2.link.html contiene la barra de menú en el lado izquierdo del marco
3.FirstPage.html contiene una línea de texto en la página principal del marco (soy vago y no lo hice bien)
4.SecondPage.html es similar al anterior 3 y se usa para probar.
A continuación se muestra una captura de pantalla (no está claro, lo estoy haciendo por primera vez)
Echemos un vistazo al código en Frame.htm:
<html>
<Evista>
</ablo>
<frameset cols = 159px,*>
<Frame name = a1 src = link.html noresize = yes border = 1px scrolling = auto borderColor = blue>
<name de cuadro = a2 src = firstPage.html>
</Frameset>
</html>
¿No se siente muy simple? Consiste principalmente en un elemento Frameset, y luego se establece el atributo cols = 159px,*. El propósito de esta propiedad es dividir la página en 159px y otras dos áreas. Como se muestra en la imagen de arriba.
Luego está la etiqueta de cuadro. El atributo COLS anterior tiene varios valores. Los elementos infantiles <marcador> a continuación también deben tener varios valores correspondientes. Luego hay algunos atributos comunes de <Frame>. Incluyendo el ancho del borde, si aparecen barras de desplazamiento, el color del borde y si el usuario puede cambiar el tamaño. Qué archivo fuente es, etc.
Luego, el segundo archivo de origen apunta a FirstPage como prueba.
El siguiente es Link.html:
<estilo type = text/css>
<!-
*{margen: 0; relleno: 0; borde: 0;}
cuerpo {
Font-Family: Arial, serif, serif;
tamaño de fuente: 12px;
}
#nav {
Ancho: 180px;
Línea-aguja: 24px;
Tipo de estilo de lista: Ninguno;
text-align: izquierda;
/*Defina la altura de la línea y el color de fondo de todo el menú UL*/
}
/*========================================================*/
#nav a {
Ancho: 160px;
Pantalla: bloque;
RODING-LUFE: 20px;
/*Ancho (debe), de lo contrario, el li a continuación se deformará*/
}
#nav li {
Antecedentes: #ccc; /*Color de fondo del directorio de primer nivel*/
Border-Bottom: #fff 1px Solid; /*Un borde blanco debajo*/
flotante: izquierda;
/*FLOAT: a la izquierda, no debe establecerse, pero no se puede mostrar normalmente en Firefox.
Heredando el ancho de NAV, limitando el ancho, Li se extiende automáticamente hacia abajo*/
}
#nav li a: hover {
Antecedentes:#CC0000; /*El color de fondo que se muestra por el directorio de primer nivel en Mouseover*/
}
#nav a: enlace {
Color:#666; Decoración de texto: ninguna;
}
#nav a: visitado {
Color:#666; Decoración de texto: ninguna;
}
#nav A: Hover {
Color: #fff; Decoración de texto: Ninguno; Font-Weight: Bold;
}
/*==========================================================*/
#nav li ul {
Estilo de lista: Ninguno;
text-align: izquierda;
}
#nav li ul li {
Antecedentes: #ebebeb; /*Color de fondo del directorio secundario*/
}
#nav li ul a {
ROLDE-LEFT: 10px;
Ancho: 160px;
/* Los caracteres chinos del directorio secundario de la izquierda-izquierda se mueven hacia la derecha, pero el ancho debe restablecerse = (ancho total de ancho-izquierda)*/
}
/*El siguiente es el estilo de enlace del directorio secundario*/
#nav li ul a: enlace {
Color:#666; Decoración de texto: ninguna;
}
#nav li ul A: Visited {
Color:#666; Decoración de texto: ninguna;
}
#nav li ul a: hover {
Color:#F3F3F3;
Decoración de texto: ninguna;
Font-peso: Normal;
Antecedentes:#CC0000;
/* Color de fuente y color de fondo de Secundario On Mouseover*/
}
/*============================================*/
#nav li: hover ul {
Izquierda: Auto;
}
#nav li.sfhover ul {
Izquierda: Auto;
}
#contenido {
claro: izquierda;
}
#nav ul. colapsed {
Pantalla: ninguno;
}
->
#PADRE{
Ancho: 180px;
}
*#PADRE{
Ancho: 100%;
}
</style>
<Div ID = Parent>
<ul id = Nav>
<li> <a href =#menú = ChildMenu1 onClick = Domenu ('Childmenu1')> Mi sitio web </a>
<ul id = childmenu1 class = colapsed>
<li> <a href = firstPage.html Target = A2> Primera página </a> </li>
<li> <a href = SecondPage.html Target = A2> Segunda página </a> </li>
</ul>
</li>
<li> <a href =#menú = ChildMenu2 onClick = Domenu ('ChildMenu2')> Mi cuenta </a>
<ul id = childmenu2 class = colapsed>
<a href =#> pay </a> </li>
<li> <a href =#> gestión </a> </li>
<li> <a href =#> pago en línea </a> </li>
<li> <a href =#> Registro de registro </a> </li>
<li> <a href =#> en línea encontrado </a> </li>
<li> <a href =#> Cuentas históricas </a> </li>
</ul>
</li>
<li> <a href =#menú = ChildMenu3 onClick = Domenu ('Childmenu3')> Gestión del sitio web </a>
<ul id = childmenu3 class = colapsed>
<li> <a href =#> Login </a> </li>
<a href =#> gestión de roles </a> </li>
<li> <a href =#> gestión de usuarios </a> </li>
</ul>
</li>
</ul>
</div>
<script type = text/javaScript>
<!-
var lastleftid =;
función menúfix () {
var obj = document.getElementById (NAV) .getElementsBytagName (li);
para (var i = 0; i <obj.length; i ++) {
obj [i] .onmouseover = function () {
this.classname + = (this.classname.length> 0? :) + sfhover;
}
obj [i] .onmouseDown = function () {
this.classname + = (this.classname.length> 0? :) + sfhover;
}
obj [i] .onmouseUp = function () {
this.classname + = (this.classname.length> 0? :) + sfhover;
}
obj [i] .onmouseout = function () {
this.classname = this.classname.replace (nuevo regexp ((? |^) sfhover // b),);
}
}
}
función domenu (EMID)
{
var obj = document.getElementById (emid);
obj.classname = (obj.classname.tolowercase () == expandido? colapsado: expandido);
if ((lastleftid! =) && (emid! = lastleftid)) // cierre el menú anterior
{
document.getElementById (lastleftid) .className = collapsed;
}
Lastleftid = emid;
}
función getMenuid ()
{
var menúD =;
var _paramstr = new String (window.location.href);
var _sharppos = _paramstr.indexof (#);
if (_sharppos> = 0 && _sharppos <_paramstr.length - 1)
{
_paramstr = _paramstr.substring (_sharppos + 1, _paramstr.length);
}
demás
{
_paramstr =;
}
if (_paramstr.length> 0)
{
var _paramarr = _paramstr.split (&);
if (_paramarr.length> 0)
{
var _paramkeyval = _paramarr [0] .split (=);
if (_paramkeyval.length> 0)
{
Menuid = _paramkeyval [1];
}
}
}
if (menuid! =)
{
Domenu (Menuid)
}
}
GetMenuid (); //* Preste atención al orden de estas dos funciones, de lo contrario getMenuid () no tendrá ningún efecto en Firefox
menúfix ();
->
</script>
Esto es realmente vago. Es un menú desplegable realizado por Div+CSS+JS que se encuentra en Internet. Si está interesado, puede echarle un vistazo usted mismo. Siento que puedo usarlo yo mismo, y estará bien saber cómo cambiarlo.
Aquí hay dos páginas de prueba. Dado que incluso aquellos que conocen un poco de HTML pueden escribirlos, solo se publica el código para la página 1 aquí:
<html>
<Evista>
<title> Primera página </título>
<estilo>
</style>
</ablo>
<Body>
<h1> Primera página </h1>
</body>
</html>
Supongo que el maestro vomitará cuando vea esto, y debe haber dicho que es muy basura, pero solo registra las pequeñas cosas que hizo. Jaja, perdóname.