Este artigo apresenta uma estrutura tão simples que não pode ser mais simples.
Vamos primeiro olhar para a composição da página dessa estrutura. Como é um programa de teste puramente manual, acabei de fazer algum código no NoftaPA ++, o que é muito superficial. Mas ainda contém o conteúdo geral no quadro. Ok, vamos voltar ao ponto, primeiro olhe para a composição do arquivo.
1.Frame.html contém a estrutura da estrutura
2.link.html contém a barra de menus no lado esquerdo do quadro
3.Firstpage.html contém uma linha de texto na página principal da estrutura (eu sou preguiçoso e não o fiz bem)
4.SecondPage.html é semelhante ao acima 3 e é usado para teste.
Abaixo está uma captura de tela (não está claro, estou fazendo isso pela primeira vez)
Vamos dar uma olhada no código em quadro.htm:
<html>
<head>
</head>
<FrameSet cols = 159px,*>
<nome do quadro = a1 src = link.html noresize = sim borda = 1px rolagem = borderColor automático = azul>
<nome do quadro = A2 src = FirstPage.html>
</frameSet>
</html>
Não parece muito simples? Consiste principalmente em um elemento de quadros e, em seguida, o atributo cols = 159px,* está definido. O objetivo desta propriedade é dividir a página em 159px e duas outras áreas. Como mostrado na figura acima.
Depois, há a etiqueta do quadro. O atributo cols acima possui vários valores. Os elementos filho do <Frame> abaixo também devem ter vários valores correspondentes. Depois, existem alguns atributos comuns de <drame>. Incluindo a largura da borda, se as barras de rolagem aparecem, a cor da borda e se o usuário pode alterar o tamanho. Qual arquivo de origem é, etc.
Em seguida, o segundo arquivo de origem aponta para a primeiraPAGE como o teste.
O próximo é link.html:
<tipo de estilo = texto/css>
<!-
*{margem: 0; preenchimento: 0; borda: 0;}
corpo {
Fonte-família: Arial, Serif, Serif;
tamanho de fonte: 12px;
}
#nav {
Largura: 180px;
altura da linha: 24px;
Tipo no estilo de lista: nenhum;
Alinhamento de texto: esquerda;
/*Defina a altura da linha e a cor de fundo de todo o menu UL*/
}
/*========================================================*/
#nav a {
Largura: 160px;
exibição: bloco;
Potding-Left: 20px;
/*Largura (deve), caso contrário, o li abaixo se deformará*/
}
#nav li {
Antecedentes: #ccc; /*Cor de fundo do diretório de primeiro nível*/
fundo da borda: #fff 1px sólido; /*Uma borda branca abaixo de*/
flutuar: esquerda;
/*Float: Esquerda, não deve ser definido, mas não pode ser exibido normalmente no Firefox.
Herdando a largura do NAV, limitando a largura, LI se estende automaticamente para baixo*/
}
#nav li a: hover {
Antecedentes:#CC0000; /*A cor de fundo exibida pelo diretório de primeiro nível onMouseOver*/
}
#nav a: link {
Cor:#666; Decoração de texto: Nenhum;
}
#nav a: visitado {
Cor:#666; decoração de texto: nenhum;
}
#nav a: hover {
Cor: #fff; decoração de texto: nenhum; peso-fonte: negrito;
}
/*===========================================================*/
#nav li ul {
estilo de lista: nenhum;
Alinhamento de texto: esquerda;
}
#nav li ul li {
Antecedentes: #EBeBEB; /*Cor de fundo do diretório secundário*/
}
#nav li ul a {
preenchimento-esquerda: 10px;
Largura: 160px;
/* Diretório secundário de preenchimento de preenchimento Os caracteres chineses se movem para a direita, mas a largura deve ser redefinida = (Largura total-esquerda)*/
}
/*O seguinte é o estilo de link do diretório secundário*/
#nav li ul a: link {
Cor:#666; Decoração de texto: Nenhum;
}
#nav li ul a: visitado {
Cor:#666; decoração de texto: nenhum;
}
#nav li ul a: hover {
Cor:#f3f3f3;
Decoração de texto: Nenhum;
peso-fonte: normal;
Antecedentes:#CC0000;
/* Cor da fonte e cor de fundo do OnMouseOver secundário*/
}
/*=============================================*/
#nav li: hover ul {
Esquerda: Auto;
}
#nav li.sfhover ul {
Esquerda: Auto;
}
#contente {
claro: esquerda;
}
#nav ul.collapsed {
Exibir: Nenhum;
}
->
#Parent {
Largura: 180px;
}
*#Pai {
largura: 100%;
}
</style>
<div id = pai>
<ul id = nav>
<li> <a href =#menu = childmenu1 onclick = domenu ('childmenu1')> meu site </a>
<UL ID = Childmenu1 Class = em colapso>
<li> <a href = FirstPage.html Target = A2> Primeira página </a> </li>
<li> <a href = SecondPage.html Target = A2> Segunda página </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu2 onclick = domenu ('childmenu2')> minha conta </a>
<UL ID = Childmenu2 Class = em colapso>
<a href =#> pay </a> </li>
<li> <a href =#> gerenciamento </a> </li>
<li> <a href =#> pagamento online </a> </li>
<li> <a href =#> Registre remessa </a> </li>
<li> <a href =#> online encontrado </a> </li>
<li> <a href =#> Contas históricas </a> </li>
</ul>
</li>
<li> <a href =#menu = childmenu3 onclick = domenu ('childmenu3')> gerenciamento de sites </a>
<UL ID = Childmenu3 Class = em colapso>
<li> <a href =#> login </a> </li>
<a href =#> Gerenciamento de função </a> </li>
<li> <a href =#> gerenciamento de usuários </a> </li>
</ul>
</li>
</ul>
</div>
<Script Type = Text/JavaScript>
<!-
var lastleftId =;
função MENUFIX () {
var obj = document.getElementById (NAV) .getElementsByTagName (li);
for (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 (novo regexp ((? |^) sfhover // b),);
}
}
}
função domenu (emid)
{
var obj = document.getElementById (EMID);
obj.className = (obj.className.tolowerCase () == Expandido? colapsado: expandido);
if ((lastleftid! =) && (emid! = lastleftid)) // feche o menu anterior
{
document.getElementById (lastleftId) .className = colapsado;
}
Lastleftid = emid;
}
função getMenuid ()
{
var menuID =;
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);
}
outro
{
_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 (); //* Por favor, preste atenção à ordem dessas duas funções, caso contrário, getMenuid () não terá nenhum efeito no Firefox
MENUFIX ();
->
</script>
Isso é realmente preguiçoso. É um menu suspenso fabricado pelo DIV+CSS+JS encontrado na Internet. Se você estiver interessado, pode dar uma olhada nela você mesmo. Sinto que posso usá -lo sozinho e tudo bem saber como modificá -lo.
Aqui estão duas páginas de teste. Como mesmo aqueles que conhecem um pouco de HTML podem escrevê -los, apenas o código da página 1 é publicado aqui:
<html>
<head>
<title> Primeira página </ititure>
<estilo>
</style>
</head>
<Body>
<H1> Primeira página </h1>
</body>
</html>
Acho que o mestre vomitará quando vir isso, e ele deve ter dito que é muito lixo, mas ele apenas grava as pequenas coisas que fez. Haha, me perdoe.