Wulin.com (www.vevb.com) Artículo Introducción: Página web Habilidades de producción: XHTML, CSS y JS.
Detalles 1 …………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………1. Cuando el texto y la imagen están en la misma línea, el texto debe estar alineado con la parte inferior de la imagen, y debe escribirse así:
<li> Recuerde la contraseña <img src = align = bottom style = margin-bottom: -4px/> </li>
2. Cuando el texto y la imagen están en la misma línea, el texto y la imagen deben centrarse y escribir así:
<li> Recuerde la contraseña <img src = static/img/xyx.jpg align = middle/> </li>
3. Cambie el editor abierto por el menú del código fuente de vista IE
Abra el editor de registro e ingrese a Regedit en inicio
Encuentre la siguiente ubicación: HKEY_LOCAL_MACHINEOFTWAREMICOSOFT Internet Explorerview SourceCeditorEditor Nombre Modifique los datos predeterminados a D: Archivos de programa EMEDITORTIder.exe
Cambie a IE para ver el código fuente y podrá ver el efecto.
Si el elemento de nombre del editor del editor de la fuente no lo tiene, puede crearlo usted mismo.
4. Maximice automáticamente la ventana y agregue entre <Body> y </body>:
<Script Language = JavaScript>
setTimeOut ('top.moveto (0,0)', 5000);
setTimeout ('top.resizeto (screen.availwidth, screen.availheight)', 5000);
</script>
5. Ventana. Opener es en realidad la forma principal del formulario abierto con Window.open.
Por ejemplo, en el formulario principal de la forma parent, pase Window.open (subform.html), luego en la ventana subform.html.opener
Significa la forma principal, puede establecer el valor del formulario principal o llamar al método JS de esta manera.
1, window.opener.test (); --- Llame al método test () en el formulario principal;
2. If Window.opener existe, establezca el valor de Stockbox en la forma parent.
if (window.opener &&! Window.opener.Closed)
{
window.opener.document.parentform.stockbox.value = símbolo;
}
6. Cómo actualizar la página
Cómo actualizar la página en JavaScript:
1 HISTORIA.GO (0)
2 ubicación.reload ()
3 ubicación = ubicación
4 ubicación. Assign (ubicación)
5 document.execCommand ('actualizar')
6 ventana. Navigate (ubicación)
7 ubicación. Replacia (ubicación)
8 document.url = ubicación.href
Cómo actualizar automáticamente la página:
1. Actualización automática de la página: agregue <meta http-oquiv = actualización de contenido = 20> al área <Head>
2. Salto de página automático: agregue <meta http-oquiv = actualización de contenido = 20; url = http: //www.webjx.com> al área <fead>
3.js actualiza automáticamente la página
<Script Language = JavaScript>
función myRefresh ()
{
Window.location.Reload ();
}
setTimeout ('myRefresh ()', 1000); // especificar actualización una vez en 1 segundo
</script>
4. JS RECRESH Marco
a) Actualice la página que contiene el marco para
<Script Language = JavaScript>
parent.location.reload ();
</script>
b) La ventana del niño actualiza la ventana principal
<Script Language = JavaScript>
self.opener.location.reload ();
</script>
(o <a href = javaScript: abiertamente.location.reload ()> actualizar </a>)
c) Actualice la página de otro cuadro
<Script Language = JavaScript>
parent.omother frameid.location.reload ();
</script>
7. Si ha usado hacks CSS, debe saber que nombrar con subrayos es un hack. Si usa _Style, puede hacer que la mayoría de los navegadores fuera, es decir, ignorar la definición de este estilo, por lo que usar _ como separador al no nombrar no está estandarizado. Aparecerá un mensaje de error al hacer verificaciones de CSS.
8. IE Método de redacción de anotaciones condicionales
<!-[if! ie]> se puede reconocer excepto es decir <! [endif]->
<
<!-[si IE 5.0]> Solo IE 5.0 puede reconocer <! [Endif]->
9. Método de escritura de hack de CSS
El primer tipo:
.div {
Antecedentes: naranja;
*Antecedentes: ¡Verde! Importante;
*fondo: azul;
}
El segundo tipo:
.div {
margen: 10px;
*margen: 15px;
_Margin: 15px;
}
El tercer tipo:
#div {color: #333; }
*+html #div {color: #999; }
* html #div {color: #666; }
Detalles 2 …………………………………………………………………………G ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. IE6 y lo siguiente no reconocen: Pseudo-Clase flotante fuera de la etiqueta. En Firefox, es decir, el efecto se puede lograr correctamente. Solución:
#show li.s1 {borde: 1px sólido #ff9900; Antecedentes:#454242;}
#show li.s2 {borde: 1px sólido #d9d8d8; Antecedentes:#312E2E;}
<li> </li>
2. Establezca Haslout para elementos
Muchos problemas de IE6 (o IE7) se pueden resolver estableciendo el valor HaslayOut. La forma más fácil de establecer el valor HASLayout para un elemento es agregar la altura o el ancho de CSS (por supuesto, el zoom también se puede usar, pero esto no es parte de CSS). Por ejemplo, establecido en altura: 1%. Si el elemento principal no establece la altura, la altura física del elemento no cambiará, pero ya tiene la propiedad HaslayOut.
3. Los personajes aparecen repetidamente en IE6
Asegúrese de que la pantalla: Inline esté configurada en el elemento flotante;
Use margen-derecha: -3px en elementos flotantes;
4. Prioridad de estilo
1. Estilo en línea [1.0.0.0]
2. Selector de identificación [0.1.0.0]
3. Clase, atributo, selector de pseudo-clase [0.0.1.0]
4. Etiquetas de elementos, selector de pseudo-elemento [0.0.0.1]
5. Método de escritura CSS de un elemento centrado verticalmente
#exm {
Posición: Absoluto;
Izquierda: 50%;
arriba: 50%;
índice z: 1;
Ancho: 200px;
Altura: 100px;
margen-izquierda: -100px;
margen-top: -52px;
}
6. Zoom: Normal | número
Establece o recupera la relación de escala del objeto. Establecer o cambiar este valor de propiedad para un objeto que se haya representado hará que el contenido que rodea el objeto fluya nuevamente. Aunque esta propiedad no es heredable, afecta a todos los objetos infantiles del objeto (hijos).
7. Cuando la imagen y el texto están dispuestos uno al lado del otro, el texto de la imagen debe centrarse verticalmente:
1> Establecer Línea de altura: a la altura de la imagen, o la altura del elemento principal de la imagen.
2> Luego establezca vertical-Align: Middle en el CSS de la imagen;
8. Cuando el elemento LI contiene un elemento IMG, aparece un blanco bajo IE6
Solución 1
Haga que Li flote y configure IMG en el elemento de nivel de bloque
Solución 2
Establecer el tamaño de la fuente de UL: 0;
Solución 3
Establecer el alineado vertical de IMG: Bottom;
Solución 4
Establezca el fondo de margen de img: -5px;
Detalles 3 ………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. Los estilos de hipervínculo que se han visitado haciendo clic no tienen flotantes y activos
Solución: Cambie el orden de los atributos CSS: LVHA
2. Los campos largos continuos bajo FF no se pueden envolver automáticamente
Solución: Word-Wrap: Break-Word; Overflow: Oculto;
3. La altura del contenedor principal no puede ser adaptable bajo FF
Solución: borre la flotación de los elementos infantiles
4. Se genera una brecha debajo de la imagen en IE
SOLUCIÓN: Defina IMG como pantalla: bloque o alineación vertical como superior/inferior/media/fondo de texto
Defina el tamaño de fuente del contenedor principal a cero, tamaño de fuente: 0
5. Hay un espacio de 3px entre el elemento flotante bajo IE6 y su elemento no flotante adyacente.
Solución: los elementos no flotantes adyacentes también se establecen para flotar;
Los elementos flotantes se definen en relación con IE6_Margin-Right: -3px;
6. El contenido de Li se muestra en un elipsis después de que sea demasiado largo.
Solución: espacio blanco: Nowrap; (El texto no se envuelve) TEXT-OPROLOW: Ellipsis; -o-text-upverflow: ellipsis; desbordamiento: oculto;
7. El texto no se puede centrar verticalmente
Solución: la altura de la línea y la altura del contenedor son de igual altura de línea = altura;
8. El cuadro de entrada de texto no se puede alinear con el texto adyacente.
Solución: Establezca el cuadro de entrada de texto alineado vertical: medio;
9. es decir, configurar el estilo de la barra de desplazamiento
Solución:
cuerpo{
Scrollbar-Face-Color:#F6F6F6;
Scrollbar-Highlight-Color: #fff;
Scrollbar-shadow-color: #EEEEEE;
Scrollbar-3Dlight-Color: #EEEEEE;
Scrollbar-Arrow-Color:#000;
Scrollbar-Track-Color: #ffff;
Scrollbar-Darkshadow-Color: #fff;
}
10. IE6 no puede definir contenedores con una altura de 1px
Solución: desbordamiento: oculto
Zoom: 0.8
Línea de altura: 1px
Detalles 4 …………………………………………………………………………G ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. Deje que la capa se muestre en flash
Solución: Establecer transparente <param name = wmode value = transparent /> o <param name = wmode value = opque /> para flash
2. Haga una capa centrada verticalmente en el navegador
Solución: Use el porcentaje de posicionamiento absoluto, con valores negativos de parches externos.
Posición: Absoluto;
arriba: 50%;
Izquierda: 50%;
margen: -100px auto auto -100px;
Ancho: 200px;
Altura: 200px;
3. Agregar a los favoritos
Solución: <script type = text/javaScript>
// <! [Cdata [
function bookmark () {
title var = document.title
var url = document.location.href
if (window.sidebar) window.sidebar.addpanel (título, 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 ();}
else if (document.all) window.external.addfavorite (url, título);
}
//]]>
</script>
<a href = javaScript: bookmark ()> Agregar a los favoritos </a>
Detalles 5 ………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. Cómo escribir listas de noticias comunes:
<ul class = list>
<li> <span> 6 de junio de 2006 </span> <a href =#> Título de noticias 01 </a> </li>
<li> <span> 6 de junio de 2006 </span> <a href =#> Título de noticias 02 </a> </li>
<li> <span> 6 de junio de 2006 </span> <a href =#> Título de noticias 03 </a> </li>
<li> <span> 6 de junio de 2006 </span> <a href =#> Título de noticias 04 </a> </li>
</ul>
2.ie implementa el gradiente de fondo de la página (FF y Chrome no admiten)
De arriba a abajo:
Body {Filter: progid: dximagetransform.microsoft.gradient (gradienteType = 0, startColorstr =#ffffff, endcolorstr =#000000);}
Superior izquierda a abajo derecha:
Filtro: alfa (estilo = 1, opacidad = 25, finketopacity = 100, startx = 50, finkx = 100, starty = 50, finkey = 100); Color de fondo: SkyBlue;}
De izquierda a derecha
Body {Filter: progid: dximagetransform.microsoft.gradient (GradientType = 1, startColorstr =#ffffff, endcolorstr =#000000);}
De arriba a abajo
style = filtre: progid: dximagetransform.microsoft.gradient (gradienteType = 0, startColorstr = blue, endcolorstr = white);
3. El estilo de un flotador logra una variedad de efectos y se puede utilizar de manera flexible
#outer a {borde: 1px sólido #069;}
#outer a: hover {border: 1px discontinuo #c00;}
4.Border: Ninguno; diferencia desde el borde: 0
Diferencias de rendimiento teórico:
borde: 0; Establezca el borde en 0 píxeles, aunque es invisible en la página, de acuerdo con el valor predeterminado del borde, el navegador aún hace que el ancho de la frontera/color de la frontera sea, el valor de la memoria ha sido ocupado. borde: ninguno; Establezca el borde de ninguno, es decir, no hay acción de representación cuando el navegador no analice ninguno, es decir, el valor de la memoria no se consumirá.
Diferencias de compatibilidad:
La diferencia de compatibilidad es solo para los navegadores IE6, IE7, el botón de etiqueta, la entrada, y esto ocurrirá bajo los temas XP de WIN, WIN7 y Vista. Cuando el borde es ninguno, parece que el borde inválido para IE6/7 todavía existe. Cuando el borde es 0, se siente más efectivo que ninguno. Todos los navegadores esconden constantemente el borde.
Cómo hacer el borde: ninguno; Totalmente compatible? Simplemente agregue atributos de fondo al mismo selector
5.CSS implementa el diseño de contorno de múltiples columnas, margen interno positivo y margen externo negativo
Aplicar estilos a cada columna que necesite lograr contornos: .e {Bottom de relleno: 32767px; Botón de margen: -32767px;}
6. Posición: relativo; uso especial? ? ? ?
* {margen: 0; relleno: 0; fuente: normal 12px/25px Songti;}
cuerpo {fondo:#f8f8f8;}
ul {list-style: none; ancho: 300px; altura: 25px; margen: 20px automático;}
li {float: izquierda; ancho: 86px; altura: 25px; text -align: centro; margen: 0 -5px; display: inline;}
A {color: #ffff; flotante: izquierda; ancho: 86px; altura: 25px; arriba: 0; izquierda: 0; fondo: url (***. gif) centro centro sin repaticle;}
A: Hover {color:#000; fondo: url (***. gif) 0 0 no-repeat; ancho: 86px; posición: relativo;}
Detalles 6 ……………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. Innertesx: Contenido desde la posición de inicio hasta la posición final, no incluye la etiqueta innerhtml
Outerhtml: contiene innerhtml y etiquetas
<div id = test> <span> test1 </span> test2 </iv>
test.innteText: test1 test2
test.innerhtml: <span> test1 </span> test2
test.outerhtml: <div id = test> <span> test1 </span> test2 </div>
2. Número (): Cuando cualquier cadena que contenga caracteres no numéricos se usa como parámetro, el resultado es nan
parseInt (): Convierta la cadena en un número lo más bajo posible de izquierda a derecha hasta que se detenga cuando se encuentra un no dígito
isnan (): return true cuando el parámetro no es un número;
3. A = 23.50ABC
typeof (a) = string
parsefloat (a) = 23.5
parseint (a) = 23
Número (a) = nan
4. Los nombres de variables JS contienen números subrayados por signos de dólar y no pueden comenzar con números
5. GetElementsBytagName_r () debe recuperarse después de cargar el documento
6. NodeType: 12 tipos, 1 representa el nodo de elemento y 3 representa el nodo de texto
NodeName: representa el nombre del nodo. Si es un nodo de texto, significa #Text
NodeValue: representa el valor del nodo
Por ejemplo, obtenga el nodo if (obj.nodename.tolowercase () == 'li') {}
Cambie el contenido de texto de p documento
7. Nodo principal al nodo infantil
Nodos de niños: Lista de todos los nodos infantiles de primer nivel en el elemento, excluyendo nodos infantiles más profundos
obj.firstchild = obj.childnodes [0]
obj.lastchild = obj.childnodes [obj.childnodes.length-1]
HaschildNodes () determina si el elemento tiene hijos y devuelve un valor booleano
7. Nodo infantil al nodo principal
var
while (ParentElm, ClassName! = 'Syna' && ParentElm! = 'Document.Body')
ParentElm = ParentElm.ParentNode
8. Modificar propiedades del elemento
1) Obtener o configurar en forma de propiedades del objeto
var mainImage = document.getElementByIdx_x ('nav'). getElementsBytagName ['img'] [0];
mainiMage.src = '';
MainImage.;
2) use los métodos getAttribute () y setattribute ()
Detalles 7 …………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1. Convierta los números en un formulario que tiene la función de X Decimal Places Roundto (Base, Precisión)
{var m = math.pow (10, precisión);
var a = math.round (base*m)/m;
regresar a;
}
var n = 3.942487;
Roundto (n, 3) = 3.942
Roundto (n, 0) = 3
2. Cree números aleatorios restringidos
Función Randombetween (Min, Max)
{return min+math.floor (math.random ()*(max-min+1))}
3. Convierta los números en cadenas
var a = 10;
a = string (a);/a = A.ToString ();
4. URL de codificación
var a =? p = e;
var b = escape (a);
var c = (b);
5. Cambie el tipo de elementos en el documento
P ---> div
Primero cree un elemento Div, luego copie el nodo infantil de P en el DIV y finalmente reemplace P con Div
6. ¿Cuántos parámetros se requieren para una función?
función add (n1, n2) {}
return num = add.length;
7. ¿Cuántos parámetros se pasan en una función?
función add (n1, n2) {
devolver argumentos.length;}
Detalles 8 ………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………
1). Pantalla: bloque en línea; Como su nombre lo indica, es una forma de bloque en línea, y se puede establecer el ancho de altura.
.Element-Class {
Display: -Moz-Inline-Stack; // Código de solo Firefox
Pantalla: bloque en línea; // Algunos navegadores estándar
Zoom: 1; // es solo
*Pantalla: en línea; // Solo es decir, saber este código (CSS Hack)
}
2) .cle el flotador
.Clearfix: After {Visibility: Hidden; Display: Block; Font-Size: 0; Contenido:; Clear: Ambos; Altura: 0;}
.clarfix {zoom: 1;}
3). Agregue un icono personalizado en la barra de direcciones
Primero, necesitamos preparar un archivo de icono previamente con un tamaño de 16*16 píxeles. La extensión del archivo es ICO y la cargue en el directorio correspondiente. Agregue el siguiente código entre el archivo de origen HTML <SEAD> </HEAD>: <Link rel = icon name href = la dirección de la imagen (tenga en cuenta que corresponde al directorio ahora)>. Por supuesto, si el usuario navega con IE5 o superior, es aún más fácil. Simplemente suba la imagen en el directorio raíz del sitio web y se puede reconocer automáticamente.
4). Al configurar el contenedor vacío de la pantalla: bloque en IE6 a una altura más pequeña, como <p style = altura: 1px;> </p>, encontrará que su altura no puede ser inferior a un cierto valor. Solución: Establecer Overflow: Oculto.
5). El texto se corta con elipsis
div {ancho: 200px; altura: 100px; desbordamiento: oculto; texto-uprflow: ellipsis; espacio blanco: nowrap;}