Wulin.com (www.vevb.com) Introdução: Habilidades de produção de página da web: XHTML, CSS e JS.
Detalhes 1 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………1. Quando o texto e a imagem estão na mesma linha, o texto precisa estar alinhado com o fundo da imagem, e precisa ser escrito assim:
<li> Lembre-se da senha <IMG src = align = Bottom Style = Margin-Bottom: -4px/> </li>
2. Quando o texto e a imagem estão na mesma linha, o texto e a imagem precisam ser centralizados e escritos assim:
<li> Lembre -se da senha <img src = static/img/xyx.jpg align = médio/> </li>
3. Altere o editor aberto pelo menu do código -fonte do IE View
Abra o editor de registro e entre no Regedit no início
Encontre o seguinte local: hkey_local_machinesoftwaremicrosoft Internet Explorerview SoudEditorEDitor Nome Modificar os dados padrão para D: Program FileMeditorEMeditor.exe
Mude para o IE para visualizar o código -fonte e você pode ver o efeito.
Se o item de nome do editorEditor do View Source não o tiver, você poderá criá -lo sozinho.
4. Maximize automaticamente a janela e adicione entre <body> e </body>:
<Idioma do script = javascript>
setTimeout ('top.moveto (0,0)', 5000);
setTimeout ('top.resizeto (screen.availwidth, screen.availHeight)', 5000);
< /script>
5. Window.Pener é na verdade o formulário pai do formulário aberto com janela.
Por exemplo, na forma pai parentforma, passe window.open (subforform.html), então no subform.html window.opener
Significa o FELEMFORM, você pode definir o valor do formulário pai ou chamar o método JS dessa maneira.
1, window.opener.test (); --- Chame o método test () na forma pai;
2. Se houver janela.
if (window.opener &&! window.opener.closed)
{
window.opener.document.parentform.stockbox.value = símbolo;
}
6. Como refrescar a página
Como atualizar a página em JavaScript:
1 HISTÓRIA.GO (0)
2 localização.reload ()
3 Localização = Localização
4 Localização.Assign (Localização)
5 Document.ExecCommand ('Refresh')
6 window.navigate (localização)
7 Localização.Plina (Localização)
8 document.url = location.href
Como atualizar automaticamente a página:
1. Atualização automática da página: adicione <meta http-equiv = refresh Content = 20> à área de <Head>
2. Página automática de página: adicione <meta http-equiv = refresh Content = 20; url = http: //www.webjx.com> para a área <head>
3.js Atualize automaticamente a página
<idioma do script = javascript>
função myRefresh ()
{
window.Location.Reload ();
}
setTimeout ('myRefresh ()', 1000); // Especifique a atualização uma vez em 1 segundo
< /script>
4.JS Framework de refresh
a) Atualize a página que contém o quadro para
<idioma do script = javascript>
parent.Location.Reload ();
< /script>
b) A janela infantil refresca a janela dos pais
<idioma do script = javascript>
self.opener.Location.Reload ();
< /script>
(ou <a href = javascript: oper.location.reload ()> refresh </a>)
c) Atualize a página de outro quadro
<idioma do script = javascript>
parent.anther frameId.Location.Reload ();
< /script>
7. Se você usou hacks CSS, deve saber que nomear com subscores é um hack. Se você usa o estilo, ele pode fazer com que a maioria dos navegadores seja ignorada a definição desse estilo; portanto, usar _ como um separador quando a nomeação não é padronizada. Uma mensagem de erro será exibida ao fazer verificações de CSS.
8. Método de escrita de anotação condicional
<!-[se! ie]> pode ser reconhecido, exceto ie <! [endif]->
<!-[se ie]> todas as IES são identificáveis <! [endif]->
<!-[se ie 5.0]> Somente o IE 5.0 pode reconhecer <! [endif]->
9. Método de redação de hack
O primeiro tipo:
.div {
Antecedentes: laranja;
*Antecedentes: Verde! IMPORTANTE;
*Antecedentes: azul;
}
O segundo tipo:
.div {
margem: 10px;
*margem: 15px;
_Margin: 15px;
}
O terceiro tipo:
#div {color: #333; }
*+html #div {color: #999; }
* html #div {color: #666; }
Detalhes 2 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. IE6 e o seguinte não reconhecem a: Pseudo-classe pairar fora da etiqueta. No Firefox, IE7, o efeito pode ser alcançado corretamente. Solução:
#show li.s1 {borda: 1px sólido #ff9900; Antecedentes:#454242;}
#show li.s2 {borda: 1px sólido #d9d8d8; Antecedentes:#312E2E;}
<li> </li>
2. Defina HasLayout para elementos
Muitos problemas do IE6 (ou IE7) podem ser resolvidos definindo o valor do HasLayout. A maneira mais fácil de definir o valor HasLayout para um elemento é adicionar a altura ou largura do CSS (é claro, o zoom também pode ser usado, mas isso não faz parte do CSS). Por exemplo, defina como altura: 1%. Se o elemento pai não definir a altura, a altura física do elemento não mudará, mas já possui a propriedade Haslayout.
3. Os caracteres aparecem repetidamente no IE6
Certifique -se de que a exibição: Inline está definido como o elemento flutuante;
Use a direita da margem: -3px em elementos flutuantes;
4. Prioridade do estilo
1. Estilo em linha [1.0.0.0]
2. Seletor de ID [0.1.0.0]
3. Classe, atributo, seletor de pseudo-classe [0.0.1.0]
4. Tags de elemento, seletor de pseudo-elementos [0.0.0.1]
5. Método de escrita CSS de um elemento centrado verticalmente
#exm {
Posição: Absoluto;
Esquerda: 50%;
TOP: 50%;
Z-Index: 1;
Largura: 200px;
Altura: 100px;
margem-esquerda: -100px;
Margin-top: -52px;
}
6. Zoom: Normal | número
Define ou recupera a taxa de escala do objeto. Definir ou alterar esse valor de propriedade para um objeto que foi renderizado fará com que o conteúdo em torno do objeto flua novamente. Embora essa propriedade não seja herdável, afeta todos os objetos infantis do objeto (crianças).
7. Quando a imagem e o texto são dispostos lado a lado, o texto da imagem deve ser centrado verticalmente:
1> Defina altura da linha: na altura da imagem ou na altura do elemento pai da imagem.
2> Então defina o alinhamento vertical: meio no CSS da figura;
8. Quando o elemento Li contém um elemento IMG, um espaço em branco aparece em IE6
Solução 1
Faça Li flutuando e defina o elemento IMG no nível do bloqueio
Solução 2
Defina o tamanho da fonte da UL: 0;
Solução 3
Defina o Alinheiro Vertical do IMG: Bottom;
Solução 4
Defina o fundo da margem do img: -5px;
Detalhes 3 …………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. Os estilos de hiperlink que foram visitados clicando não têm pairar e ativos
Solução: Altere a ordem dos atributos CSS: LVHA
2. Campos longos contínuos sob FF não podem ser embrulhados automaticamente
Solução: Enrolamento de palavras: Word-Word; Overflow: Hidden;
3. A altura do recipiente pai não pode ser adaptável sob FF
Solução: limpe a flutuação dos elementos infantis
4. Uma lacuna é gerada abaixo da imagem sob o iE
Solução: Defina IMG como exibição: bloco ou alinhamento vertical como parte superior/inferior/média/textom
Defina o tamanho da fonte do contêiner pai para zero, tamanho da fonte: 0
5. Existe uma lacuna de 3px entre o elemento flutuante no IE6 e seu elemento não flutuante adjacente.
Solução: elementos não flutuantes adjacentes também estão definidos para flutuar;
Os elementos flutuantes são definidos em relação ao IE6_Margin-Right: -3px;
6. O teor de LI é exibido em uma elipse depois de muito tempo.
Solução: Espaço Branco: Nowrap; (texto não envolve) text-overflow: elipsis; -o-text-overflow: elipsis; estouro: oculto;
7. O texto não pode ser centrado verticalmente
Solução: a altura da linha e a altura do contêiner são igual à altura da linha = altura;
8. A caixa de entrada de texto não pode ser alinhada com o texto adjacente.
Solução: Defina a caixa de entrada de texto Align Vertical: Middle;
9. ou seja, defina o estilo da barra de rolagem
Solução:
corpo{
scrollbar-face-cor:#f6f6f6;
ScrollBar-Highlight-Color: #FFF;
scrollbar-shadow-cor: #eeeeee;
ScrollBar-3dlight-color: #eeeeee;
ScrollBar-Arrow-Color:#000;
ScrollBar-Track-Color: #FFFF;
scrollbar-darkshadow-cor: #fff;
}
10. O IE6 não pode definir recipientes com uma altura de 1px
Solução: Overflow: oculto
Zoom: 0.8
altura da linha: 1px
Detalhes 4 …………………………………………………………………………………………………………………………………………………. ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. Deixe a camada ser exibida no flash
Solução: Definir transparente <nome do param = value wmode = transparent /> ou <nome do param = value wmode = opaca /> para flash
2. Faça uma camada centrada verticalmente no navegador
Solução: Use o posicionamento absoluto da porcentagem, com valores negativos de patches externos.
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
margem: -100px auto -100px;
Largura: 200px;
Altura: 200px;
3. Adicione aos favoritos
Solução: <Script Type = Text/JavaScript>
// <! [CDATA [
Função marcador () {
var title = document.title
var url = document.location.href
if (window.sidebar) window.sidebar.addpanel (title, url,);
else if (window.opera && window.print) {
var mbm = document.create_r_relement_x ('a');
mbm.setattribute ('rel', 'barra lateral');
mbm.setattribute ('href', url);
mbm.setattribute ('título', título);
mbm.click ();}
caso contrário, if (document.all) window.external.addfavorite (URL, título);
}
//]]>
< /script>
<a href = javascript: markmark ()> adicione aos favoritos </a>
Detalhes 5 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. Como escrever listas de notícias comuns:
<UL Class = List>
<li> <span> 6 de junho de 2006 </span> <a href =#> título de notícias 01 </a> </li>
<li> <span> 6 de junho de 2006 </span> <a href =#> Título de notícias 02 </a> </li>
<li> <span> 6 de junho de 2006 </span> <a href =#> título de notícias 03 </a> </li>
<li> <span> 6 de junho de 2006 </span> <a href =#> título de notícias 04 </a> </li>
</ul>
2.E implementa a página Gradiente de fundo (FF e Chrome não suportam)
De cima para baixo:
corpo {filtro: progid: dximageTransform.microsoft.gradient (gradientType = 0, startColorstr =#ffffff, endColorstr =#000000);}
Subter esquerdo para baixo direito:
Filtro: alfa (estilo = 1, opacidade = 25, finalizoPacity = 100, startx = 50, finalizx = 100, starty = 50, final = 100); Background-Color: Skyblue;}
Da esquerda para a direita
corpo {filtro: progid: dximageTransform.microsoft.gradient (gradientType = 1, startColorstr =#ffffff, endcolorstr =#000000);}
De cima para baixo
style = filtro: progid: dximageTransform.microsoft.gradiente (gradientType = 0, startColorstr = azul, endColorstr = branco);
3. O estilo de um pau alcança uma variedade de efeitos e pode ser usado com flexibilidade
#outer a {borda: 1px Solid #069;}
#outer a: hover {borda: 1px tracejado #c00;}
4.BORDER: Nenhuma; diferença da borda: 0
Diferenças teóricas do desempenho:
borda: 0; Defina a borda como 0 pixels, embora seja invisível na página, de acordo com o valor padrão da borda, o navegador ainda renderiza a largura da fronteira/cor da fronteira, ou seja, o valor da memória foi ocupado. fronteira: nenhuma; Defina a borda como nenhuma, isto é, não há ação de renderização quando o navegador não analisar, ou seja, o valor da memória não será consumido.
Diferenças de compatibilidade:
A diferença de compatibilidade é apenas para navegadores IE6, IE7, botão de tag, entrada, e isso ocorrerá nos temas XP de Win, Win7 e Vista. Quando a fronteira é nenhuma, parece que a fronteira inválida para o IE6/7 ainda existe. Quando a borda é 0, parece mais eficaz do que nenhum. Todos os navegadores escondem consistentemente a borda.
Como fazer fronteira: nenhum; Totalmente compatível? Basta adicionar atributos de fundo ao mesmo seletor
5.Css implementa o layout de contorno de várias colunas, margem interna positiva e margem externa negativa
Aplique estilos a cada coluna que precisa alcançar o contorno: .e {preenchimento-bottom: 32767px; Margin-Bottom: -32767px;}
6. Posição: relativa; uso especial? ? ? ?
* {margem: 0; preenchimento: 0; fonte: normal 12px/25px Songti;}
corpo {background:#f8f8f8;}
Ul {estilo de listagem: nenhum; largura: 300px; altura: 25px; margem: 20px automático;}
li {float: esquerda; largura: 86px; altura: 25px; text -align: centro; margem: 0 -5px; display: inline;}
a {color: #ffff; Float: Esquerda; Largura: 86px; Altura: 25px; Top: 0; Esquerda: 0; Antecedentes: URL (***. GIF) Centro Centro No-repetir;}
A: Hover {Color:#000; Background: URL (***. GIF) 0 0 sem repetição; largura: 86px; posição: relativa;}
Detalhes 6 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. InnerText: conteúdo da posição inicial para a posição final, não inclui tag inerhtml
OuterHtml: contém inerhtml e tags
<div id = test> <pan> test1 </span> test2 </div>
test.innerText: test1 test2
test.innerhtml: <span> test1 </span> test2
test.outerhtml: <div id = test> <pan> test1 </span> test2 </div>
2. Número (): Quando qualquer string contendo caracteres não numéricos é usada como um parâmetro, o resultado é NAN
parseint (): converta a string em um número o mais baixo possível da esquerda para a direita até que ela pare quando um não dígito é encontrado
isnan (): retorne verdadeiro quando o parâmetro não for um número;
3. A = 23,50ABC
typeof (a) = string
parsefloat (a) = 23,5
parseint (a) = 23
Número (a) = nan
4. Os nomes de variáveis JS contêm números sublinhados por sinais de dólar e não podem começar com números
5. GetElementsByTagName_R () precisa ser recuperado depois que o documento é carregado
6. NodeType: 12 Tipos, 1 representa o nó de elemento e 3 representa o nó de texto
NodeName: representa o nome do nó. Se for um nó de texto, significa #Text
NodEvalue: representa o valor do nó
Por exemplo: obtenha o nó if (obj.nodename.tolowercase () == 'li') {}
Altere o conteúdo do texto de P document.getElementsByTagName_R ('P') [0] .FirstChild.NodEvalue = '' '
7. Nó dos pais para o nó infantil
ChildNodes: Lista de todos os nós filhos de primeiro nível no elemento, excluindo nós mais profundos para crianças
obj.firstchild = obj.childnodes [0]
obj.lastChild = obj.childnodes [obj.childnodes.length-1]
haschildnodes () determina se o elemento tem filhos e retorna um valor booleano
7. Nó da criança para o nó dos pais
var parentelm = myLinkItem.parentnode;
while (parentelm, className! = 'syna' && parentelm! = 'document.body')
Parentelm = Parentelm.ParentNode
8. Modificar propriedades do elemento
1) Obtenha ou defina na forma de propriedades do objeto
var mainImage = document.getElementByidx_x ('Nav'). getElementsByTagName ['img'] [0];
mainImage.src = '';
MainImage.;
2) Use métodos getAttribute () e setAttribute ()
Detalhes 7 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1. Converta os números em um formulário que possui x Placas decimais funcionem (base, precisão)
{var m = math.pow (10, precisão);
var a = math.Round (base*m)/m;
retornar a;
}
var n = 3,942487;
RoundTo (n, 3) = 3,942
RoundTo (n, 0) = 3
2. Crie números aleatórios restritos
função randombetween (min, max)
{return min+math.floor (math.random ()*(max-min+1))}
3. Converta números em strings
var a = 10;
a = string (a);/a = a.toString ();
4. Codificação de URL
var a =? p = e;
var b = escape (a);
var c = (b);
5. Altere o tipo de elementos no documento
p ---> div
Primeiro, crie um elemento div e depois copie o nó filho de P na div e finalmente substitua P por Div
6. Quantos parâmetros são necessários para uma função
função add (n1, n2) {}
return num = add.length;
7. Quantos parâmetros são passados em uma função
função add (n1, n2) {
Retornar argumentos.Length;}
Detalhes 8 ... ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………
1). Exibição: bloco embutido; Como o nome indica, é uma forma de bloco em linha e a largura da altura pode ser definida.
.lement-classe {
Exibição: -moz-inline Stack; // Código somente Firefox
Exibição: bloco embutido; // Alguns navegadores padrão
zoom: 1; // ou seja, apenas
*Display: Inline; // Só sei este código (CSS Hack)
}
2). Clee o flutuador
.clearfix: após {visibilidade: oculta; display: block; font-size: 0; content:; limpe: ambos; altura: 0;}
.clearfix {zoom: 1;}
3). Adicione um ícone personalizado na barra de endereço
Primeiro, precisamos pré-fabricada um arquivo de ícone com um tamanho de 16*16 pixels. A extensão do arquivo é OCO e envie -a para o diretório correspondente. Adicione o seguinte código entre o arquivo de origem HTML <Head> </ad Head>: <link rel = Nome do ícone href = o endereço da imagem (observe que corresponde ao diretório agora)>. Obviamente, se o usuário navegar usando o IE5 ou acima, é ainda mais fácil. Basta fazer o upload da imagem no diretório raiz do site e ela pode ser reconhecida automaticamente!
4). Ao definir a tela: o contêiner vazio do bloco no IE6 em uma altura menor, como <p style = altura: 1px;> </p>, você descobrirá que sua altura não pode ser menor que um determinado valor. Solução: Defina o transbordamento: oculto.
5). O texto é cortado com elipsis
Div {Larth: 200px; Altura: 100px; Overflow: Hidden; Text-overflow: elipsis; White-Space: Nowrap;}